Building a Plain HTML Form with ConvertKit

ConvertKit provides different kinds of templates that creators can easily embed on their website, but as a result, it also comes with additional scripts and options you don’t need. I will show you how to create a lightweight form that you can integrate into your website.

Head over the Landing Pages and Forms to create a new form. Choose “Charlotte” as the design. Add another field and name it “First Name” if you want to collect your subscriber’s name. Choose “Embed” and “HTML” to view the content of the form.

You will need to locate the Form ID and User ID from the content of the HTML.

• Form ID: The numerical values found in the URL while you’re editing the form. For example, mine is 2056639. You can also find it as an action value in the HTML as action="https://app.convertkit.com/forms/2056639/subscriptions"
• User ID: The unique string of your ID which is passed as data-uid in the form. For example: data-uid="c72f97e133".

Plain HTML ConvertKit Form

Here is the HTML ConvertKit form that you can integrate into your site. You have to replace the actions, data-sv-form, and data-uid with your own values.

<form class="form" action="https://app.convertkit.com/forms/2056450/subscriptions" method="post" data-sv-form="2056450" data-uid="c249fe0755" data-options="{&quot;settings&quot;:{&quot;after_subscribe&quot;:{&quot;action&quot;: &quot;redirect&quot;,&quot;redirect_url&quot;: &quot;https://sayzlim.net/welcome/&quot;}}}">
  <label for="name">First Name</label>
  <input type="text" value="" name="fields[first_name]" placeholder="First Name" id="name" required>
  <label for="email">Email</label>
  <input type="email" value="" name="email_address" placeholder="Email Address" id="email" required>
  <input type="submit" data-element="submit" class="subscribe" value="Subscribe">
</form>

In the default HTML template provided by ConvertKit, you will find data-options containing the value of options you can set for the form. Here is what it looks like if we display it as a JSON object.

{
    "settings": {
        "after_subscribe": {
            "action": "message",
            "success_message": "Success! Now check your email to confirm your subscription.",
            "redirect_url": ""
        },
        "analytics": {
            "google": null,
            "facebook": null,
            "segment": null,
            "pinterest": null,
            "sparkloop": null,
            "googletagmanager": null
        },
        "modal": {
            "trigger": "timer",
            "scroll_percentage": null,
            "timer": 5,
            "devices": "all",
            "show_once_every": 15
        },
        "powered_by": {
            "show": true,
            "url": "https://convertkit.com?utm_source=dynamic&utm_medium=referral&utm_campaign=poweredby&utm_content=form"
        },
        "recaptcha": {
            "enabled": false
        },
        "return_visitor": {
            "action": "show",
            "custom_content": ""
        },
        "slide_in": {
            "display_in": "bottom_right",
            "trigger": "timer",
            "scroll_percentage": null,
            "timer": 5,
            "devices": "all",
            "show_once_every": 15
        },
        "sticky_bar": {
            "display_in": "top",
            "trigger": "timer",
            "scroll_percentage": null,
            "timer": 5,
            "devices": "all",
            "show_once_every": 15
        }
    },
    "version": "5"
}

Since you don’t need to pass most of the options above, we can keep the settings minimum by removing the values we don’t need.

The only option I enable is redirect_url. It allows you to redirect subscribers to a custom landing page whenever they have successfully signed up for your newsletter. Replace https://sayzlim.net/welcome/ with your landing page URL.

Once you’ve confirmed that the form is working, you can style it to match your site design.