Customizing Opt-In Forms

How To Create A Customized Form In ConvertKit 

Within your account in ConvertKit, you will find  three default form styles. 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:  

Screen Shot 2015-04-02 at 9.24.10 AM

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. A simple example is to hide the first name field with one line of CSS: 

.ck_first_name { display: none !important; }

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. 

ConvertKit Hint: if you choose to customize the HTML, rather than use the JS 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="https://app.convertkit.com/landing_pages/000/subscribe" 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="https://app.convertkit.com/assets/CKJS4.js?v=18"></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

Screen Shot 2015-04-20 at 4.09.06 PM

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

Screen Shot 2015-04-20 at 4.52.29 PM

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 »

Have you joined our Slack Community yet? Jump in today and don't miss out on live updates!

If you enjoyed this article, you might also likeThe Complete Guide to Sequences

Still need help? Contact Us Contact Us