Customizing Opt-In Forms

If you want to change the default look of an opt-in form you can fully customize it. For small, simple customizations you can still use the one-line JavaScript embed and just customize the CSS under the form style settings.

Screen Shot 2015-04-02 at 9.24.10 AM

If you want to customize the form to look entirely custom, you can do that. It's actually pretty easy.

Hide the First Name Field

A simple example is to hide the first name field with one line of CSS:
.ck_first_name { display: none !important; }

Customize anything

We give you the full HTML and CSS to copy and paste from each form so you can customize anything. Though you'll need to know basic web design.

Note: 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.

When customizing the HTML you'll need to make sure to include a few 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>
      		

With those explanations out of the way let's get into some examples you can copy and paste (just make sure to update the form ID).

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. Otherwise it's clean and simple.

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 »

If you have a custom implementation of a ConvertKit form that you'd like to share, please send it to support@convertkit.com.

Still need help? Contact Us Contact Us