Customizing Standard Forms in FG Funnels Templates (Opt-In, Application, etc.)

This article covers how to update the form styling for a form that is in any of the Funnel Gorgeous templates. When you open a form in the form builder or see it embedded in the funnel builder, it may look a bit different than it does when you see it on a live page. This is because the FG Funnels templates have CSS styling code that is affecting the way the form looks on the live page.


You can access CSS styling through the paintbrush icon in the upper left hand toolbar. CSS controls the form appearance like the styling of the input fields, button styling, font family, colors, and more.

Custom CSS

Option 1: Customize The CSS To Update Form's Appearance

This option is great if you overall like how things look and just want to swap out colors and fonts.

    • Open the CSS and 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

    • Modify color values in CSS to customize the form while retaining most of the existing formatting, this can be helpful if you are not making heavy modifications to the original template styles. 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.

      Changing Color

    • You can replace the font family name with the name of a font family you are using in the page. font family to use one of the fonts you have selected in the page's typography settings.

      Font Family in CSS

    • Customize button appearance including text, color, border, and hover effects (if applicable - each template has unique form styles).

      Button Styles in CSS

Option 2: Utilizing Form Builder To Update The Form's Appearance

This option is great if you want the form builder to control the styles for the form.

    • Important: For the styles you select in the form editor to appear in the live page, you will need to remove the CSS that is styling the form by default in the funnel/website page editor.
      • We recommend cloning the funnel if you haven't already so you have the original CSS in your account just in case.
      • In general, you will delete all the lines starting with .form-control through to the first ending } you see and then .btn.btn-dark through to the first ending } you see.

  • Access form builder by clicking on the form in the page editor so it is outlined in orange, then click the Edit Form button on the right which will open the form builder in a new tab.

    Edit Form Button

  • From the form builder, click on the Styles & Options icon at the top right under the save button. The icon will look like two sliders on top of each other. Ensure that the Styles tab is selected and this will bring up all of the styles you can customize in the form.
  • You can customize background color, border, padding, shadow, field styles, labels, and placeholder text.
  • You can also style the button in the form.
    • Click on the button to access button style options.
    • Customize padding, shadows, text color, size, and weight for the button.
  • Save changes and preview the updated form on the live page once you have removed the CSS from your page that is overwriting those changes.