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!
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.
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="https://app.convertkit.com/landing_pages/000/subscribe" data-remote="true">
<input type="hidden" name="id" value="000" id="landing_page_id"></input>
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>
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!
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!