Why Doesn't My Form Button Look The Same As In The Editor

Our funnel and website templates usually come with some Custom CSS that applies special styling to the form and it's button so it looks consistent with the rest of the template. However, this overwrites the styles you have set in the form builder and will make the button appear differently on the live page than it does in the builder.


In This Article:

Forms Built in the Form Builder

If your form button looks different on your live page than it does in the form builder or in the editor, there is likely some CSS that needs to be removed to match how it looks in the form builder.

  1. Click the Custom CSS icon in the upper left hand corner. It looks like a paintbrush icon and this will bring up a pop-up that has all the Custom CSS for the page.

    Custom CSS Button in Page Builder

  2. Look for a comment that says Form Formatting. It will be in grey lettering and look like /* Form Formatting */. The location of this comment will be different from template to template. All of the form styles will be below this comment.

    Form Formatting Comment in CSS

  3. Look for the code that starts with .btn.btn-dark {. This code is what is styling the button on the form. In one of the lines under that code, there will be a line that says background color: and has a value. You can either change this value to be your own hex code/color or delete this line and it will default to the value you selected in the form builder.

    Button Class Code

    Background color circled in CSS

  4. Other styles in this grouping are also controlling the button so you may need to remove other lines for other styles, such as text-transform if the letters are all in uppercase and you don't want them to be in uppercase.

Order Forms

  1. Click the Custom CSS icon in the upper left hand corner. It looks like a paintbrush icon and this will bring up a pop-up that has all the Custom CSS for the page.

    Custom CSS Button

  2. Look for a comment that says Order Form Formatting. It will be in grey lettering and look like /* Order Form Formatting */. The location of this comment will be different from template to template. All of the order form styles will be below this comment.

    Order Form Formatting In CSS


  1. For the background of your order form button, look for the code that starts with .form-btn {. This code is what is styling the button on the order form. In one of the lines under that code, there will be a line that says background color: and has a value. You can either change this value to be your own hex code/color or delete this line and it will default to the value you selected in the order form settings to the right hand side after clicking on the order form element in the builder.

    1. If you change the hex code, make sure to only change the hex code, not the text that says background-color: or the !important; text.

      Order Form Background color in custom CSS


  2. All of the order form styles are listed so if there are any other colors you need to change, you can find the appropriate place in the CSS and change the color.