Styling Your Forms, Pop Up Modal, and Sliders

Within your ConvertKit account, you have several form options available to you. When you get inside the form builder, you may look at the example form you're building and think it's a What You See Is What You Get builder (also known as WYSIWYG) but it's actually not.

Our form builder simply exists as a template to show you the form elements available to you. Your best friend when building forms and landing pages is the View button.

Screen Shot 2016-02-04 at 9.50.44 AM

Headline text going outside of the box? Hit that View button to check it out. Image size showing up really small or really big? Click the View button to see what it really looks like. Can't quite envision it in the builder? View button, baby.

You get the idea, right?

There's more on image sizing on forms and landing pages right here so let's move forward.

Another fun little icon on that Form builder navigation is the Magic Wand (it's over there on the right next to the blue Save button). With the Magic Wand you can change the text color, the accent color (that's the color around the outside of the box), and the button color. Just click those color boxes to insert your own branded hex codes.

Screen Shot 2016-02-04 at 9.58.11 AM

Styling the Pop Up Modal and Slider Form

Once you have your form elements built, it's time to head to the form settings and choose how you'll use the form. In the Style Setting, you have the choice between Inline, Modal (Pop Up), or Slide In.

There are images in the Style Settings to give you an idea of how each style functions but, again, what you see is not what you get. For instance, the image on the Slide In style shows the Full form style (elements side-by-side one another), but an actual Slide In form will stack those two elements on top of one another. Same for Modal. The images shown in the selector are there to show you how they'll function, not what they'll look like.

Screen Shot 2016-02-04 at 10.01.33 AM

Now, remember our friend the View button? Well, that View button is only going to work for Inline Forms and Landing Pages.  To see how your Modal and Slide In forms look in real life, you'll want to embed them into your site to see how they function.

Lastly, Modal Forms offer a number of options on how and when they display (including device type). You can read more about that here.

If you have questions about your form styles, please email so we can give you a hand.

Still need help? Contact Us Contact Us