Skip to main content
All CollectionsGetting Started With Kit
How to create your first form in Kit
How to create your first form in Kit

How to create a simple opt-in form to embed in your site or blog.

Updated over a week ago

Are you ready to build your opt-in? 

Forms are opt-ins you can embed on your site or blog.

To get started, locate the Landing Pages & Forms section of your account (Grow > Landing Pages & Forms).

Next, click on + Create new.

Then, choose Form from the next page.

Once you've chosen to create a form, you'll need to choose the display format of your new form. You'll see four options:

Inline: A form that fits within the content of your page. This option is most commonly used to add a form to blog posts, footers, and sidebars.

Modal: A form that pops up based on timing, exit intent, percent of the page scrolled, or even when clicking a link or button.

Slide in: A form that slides up from the bottom-right or bottom-left of your site after a certain time or scroll percentage.

Sticky bar: A form that shows up at the top or bottom of the page.

No matter which format you choose, you'll see a few options for templates. Each option has an example of how it will look, and you can change this form template at any time!

Once you've selected your template, you'll be able to get started on making it look and function the way you like.

Customizing your form

Anything you can click on, you can edit. This includes the name of the form, the button text, colors, headings, and more!

Your form's overall style

On the right-hand side of the form editor, in the General styles menu, you can change the background color, border radius, background image, as well as add custom CSS.

To edit the style of your form's individual content, start by clicking on the text, fields, or button. On the right-hand side, the style menu will switch to allow you to make changes to the content you clicked. You will be able to tweak things like color, size, font, and more.

Screen Recording 2024-10-01 at 12.03.56.15 PM (1).gif [crop output image]

Your form's content

To edit the actual content of the form, click anywhere you'd like to edit and select the text (heading, body text, button, etc). Then write whatever text you'd like to add.

Screen Recording 2024-10-01 at 12.10.04.74 PM.gif [crop output image]

Arranging form fields

With the editor, you can easily add, re-label, and rearrange form fields!

To add a new field, click the + below the final form field:

Screen Recording 2024-10-01 at 12.14.22.45 PM.gif [crop output image]

In the right sidebar, select a custom field you want to connect to:

You can also select "Tag" rather than "Custom Field" to create a dropdown list or check boxes. Here's how to add tag dropdowns and checkboxes to your form.

To rearrange your fields, hover over each field and you'll see a grip appear to the left (three parallel lines). You can easily click and drag the fields into whatever order you choose.

Screen Recording 2024-10-01 at 12.16.55.21 PM.gif [crop output image]

That's all there is to it! Now you can embed your form directly onto your blog or website by clicking Publish, and then using the appropriate embed code.

Did this answer your question?