How To Create A Customized Form In ConvertKit

Important: This Help Article is for customers who are still using our Legacy Forms—Forms created before July 2018. This feature is no longer available on new accounts. For our new Form Builder Help Article, see here.

Within your account, you will find three default Form styles, in our Legacy Form Builder. These are built and ready to go right away! However, you might have a few of your own ideas that you'd like to include. For this, we've made it possible to fully customize your Form within your account!

Simple Changes

For small, simple customizations, you can still use the one-line JavaScript embed, and just customize the CSS under the Form Style Settings. To find this, click on your Form, then select Settings, and Style. Here's what this looks like:

Inside of the CSS field box will be where you make those slight changes to that line of code. Just remember to save your changes!

Looking for a bit more? Not to worry. You can create a fully customized Form, and the best part: it's actually pretty easy. Following are the tools that you'll need to complete any customized look.

1. Hide the First Name Field

For some Forms, you may not want the first name field to appear. That's okay! You can remove this field, entirely, if needed.

2. Change any part of the existing HTML or CSS

You'll find that we give you the full HTML and CSS within your account's Form Settings, which means that you can use this to customize anything.

NOTE: If you choose to customize the HTML, rather than use the JavaScript embed, then content changes on your Form in ConvertKit won't automatically be updated on your site. You'll have to update the HTML manually.

To customize the HTML you will want to include these elements:

There are two places where the Form ID is referenced. Make sure this matches your desired Form ID (which you can see in the URL when you edit any Form inside ConvertKit.) 

<form id="ck_subscribe_form" class"ck_subscribe_form" action="" data-remote="true">    

<input type="hidden" name="id" value="000" id="landing_page_id"></input>  

You also need to include the JavaScript file if you want to track views and display an AJAX message after the Form submits.

<script src=""></script>  

Any content you want to display after a successful sign up will need to go into the #ck_success_message DIV. By default it's just a line or two of text, but you could add anything you want.

<div id="ck_error_msg" style="display:none"> You’re Almost Done! I just sent you an email. Open it and confirm your email address by clicking the link in it. You won't be subscribed until you complete this step. </div>  

Example Forms

Here are two different ways that you can use copy and paste to edit your Forms:

Responsive Single Line Form

This one is fully responsive and has the first name field removed. It's also clean and simple, and looks great on any blog or website!

View the code →

Bar Form pinned to the top of the page

If you want to pin a bar to the top of your site this one will do the trick. It uses media queries so that the form goes full-width at smaller sizes!

View the code →

How to Add Custom Fonts to Your Form

Did this answer your question?