In this guide, we'll cover how to use the Kit form builder to create beautiful, engaging opt-ins that will help you convert followers into fans.

First, click the red button to create a new form:

On the next page, choose the "Form" option on the left. If you want to create a Landing Page, check out this article instead:

Next, choose the display format of this Form.

Inline forms will appear in one position on a page where they’re embedded, modal forms will appear over a page (like a pop-up), slide in forms will slide in to your page, and sticky bar forms will appear in front of your content and "stick" to the top of the window--even as your visitors scroll down the page.

Next, choose a template. This allows you to further customize how your form displays to your subscribers. There are a number of options, and they change a bit depending on which display format you chose.

Start editing your form and you'll see the Styles bar appear on the right.

Here you can change the background color or background image with just a few clicks.

As you click on the different parts of your form to edit them--heading, description, fields, button, etc--the sidebar will update to reflect your selection and the styles available for that part of the form.

For instance, clicking on the form fields or subscribe button opens even more possibilities. You can customize the font color and weight, the border color of the field boxes, and the color and text on the subscribe button! Just click on what you want to edit, and the sidebar will update with the appropriate options.

Play around with the options to see what's possible. Until you hit the Save and Publish buttons, no one can possibly see your form--so you are free to experiment with no consequences!

Want to add even more styling magic? You can, with custom CSS. Learn more here!

You can now add custom fields directly to your forms! Clicking the plus icon near the subscribe button creates a new field, and you'll see options to set up that field appear in the styles sidebar on the right. Like so:

You can select an existing custom field or just start typing to create a new one. On the form, the field will automatically populate with the title, but you can change what displays by editing the 'Custom Field Label' field.
​

When a subscriber enters information into a custom field (such as, for example, Last Name), it will be added to their subscriber profile!

Alternatively, you can also use this same interface to tag subscribers directly from your forms, using a dropdown or checkboxes! Click here for our tutorial on this.

That's pretty much all there is to know about editing a form! It's easy, so give it a shot!

Across the top of the page, you'll see a white toolbar with form settings and options:

The Preview function allows you to see a live version of the form. In fact, it’s more of a ‘view’ and less of a ‘preview’. The Preview function works just like a live form, and will allow you to test a sign-up with a test email.

The Reports page lets you see how well a form is performing by comparing visitors (those who have seen the form) and subscribers (those who actually enter their details). The conversion rate is the percentage of visitors who subscribe to the form.

NOTE: If you use a third party integration, the overall percentage will be skewed or 100% since no one is ‘visiting’ the Kit form. (They’re actually visiting the integration.)

At any point when editing your form, you can check or modify the settings for how it will behave. To do so, click 'Settings' from the top right of the page:

That will open the settings modal. Under 'General', you can choose what happens after a user subscribes to your form:

You can choose to show a success message, or redirect the subscriber to another page.

This section of the Settings modal allows you to control the web address where your form can be visited (in case you want to share it directly, like a landing page, rather than embedding it onto a page on your website).
​

It's fine to not set any domain. You'll always have the default option as well as the possibility of embedding the form on a page on your website.

You may also know this as a Confirmation Email. This is the email that sends when someone subscribes to your form.

You can choose to turn this email off for a single opt-in process, or you can turn it on for a double opt-in process. All new forms start with the incentive email turned On (as shown in the screenshot above, with the green checkmark).

Or, you can keep the email turned on to turn this on, but auto-confirm users as they subscribe.

This is also the place to upload a lead magnet file, or redirect to a page upon confirmation. You can also click the 'Edit Email Contents' button to completely customize this email to entice your subscribers to confirm!

The Advanced section of the Settings menu gives you options to control how your form behaves when it's embedded or being filled out.

The first Setting, 'Change what's shown to return visitors...' determines what visitors who've already filled out your form will see when they revisit the page. 'Show custom content' replaces the form with whatever you enter into the field that appears when you choose that option.

NOTE: This only applies to your subscribers who filled out this form. Each signup is saved as a cookie in their browser. Someone who signed up to a different one of your forms will still see this one, even if you have it set to hide or show custom content.

'Send subscriber data' affects the URL of the page subscribers are redirected to after signing up to the form. For instance, if you have the form set to redirect them to your homepage, instead of landing on https://homepage.com, they would land on something like https://homepage.com/[email protected]. This serves no purpose in and of itself--but if you have the ability to use such data on your website (via plugins or custom coding), it may help to have it available.

Finally, 'Invisible reCAPTCHA' forces all your potential subscribers to fill out a Captcha to prove they aren't a bot. This can reduce signups, but helps ensure your list consists entirely of human subscribers!

As you might expect, the Save button saves all your changes. Be sure to click it! If you don't save the initial version of your form, you may lose all your design work.

Use the Publish button to share your form with the world! When you click it, you'll see these options appear:

Here is what each option does:

Javascript

Paste this line of Javascript into an html block on your website and the form will display on that page (or those pages, if you put it in a block that appears on all pages, such as in your footer).

NOTE: This is our generally recommended way of embedding a form. It is the simplest, from a technical perspective, and so tends to work the best.

HTML

This option gives you the full HTML of the form. It works well for sharing your form on sites that don't run Javascript. Other than that, there is almost never a reason to use this instead of the Javscript embed.

NOTE: If you choose the HTML option, you will need to re-copy + paste to your site every time you make changes to your form.

Share

This option will give you a direct link to the form. If you visit that link, you will see the form on a blank page, instead of within or in front of a page on your website. This can be useful for sharing the form on some social media platforms.

Wordpress

If your site is run on Wordpress, you can use our Wordpress Plugin to add a form to your site. Once the Plugin is installed, you will also have the option to use a Kit shortcode to place your form on a page.

A landing page serves the same function as a form, letting subscribers opt-in to receive your content. However, instead of just being part of a page, a landing page stands alone.

You can embed a landing page on your own domain with Wordpress, or we can host it for you.