Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Customize Form Appearance with the Formidable Form Styler

Last Updated: April 19, 2022

Knowledge Base → Styles → Customize Form Appearance with the Formidable Form Styler

The Styles section in Formidable gives you the ability to create and customize multiple styling templates that can be applied on a form-by-form basis. Coding experience is not necessary with our easy-to-use visual styler.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!
Subscribe on YouTube
— Multiple stylesheets is a premium feature —

Getting started

Follow the steps below to set up and customize multiple form styling templates.

  1. Go to Formidable → Styles.
    Visual Form Styler Styles
  2. A Default Style template will be available automatically for use on your forms. The default settings can be modified to fit your unique needs, or you can create a new style template. If you would like to create a new style template, simply click the +New Style button. You can insert the title of the new style created in the Style Name box.
    Visual Form Styler Create New
  3. Select the colors, margins, font, and other styling options that you want and see how they look on the example form. Once you have the example form looking just right, click the Update button. These settings will be applied to every form that has this style selected on the Manage Styles tab.
    Visual Form Styler Update Style
  4. Click on Manage Styles and choose the styling you would like for each form.
    Visual Form Styler Manage Form
    Or, change the styling on your forms individually. Just go into your form's Settings → Styling & Buttons and select a Style Template.
    Visual Form Styler

If you need more styling options than the visual editor allows, you can add custom CSS to the Custom CSS tab or to your theme’s style.css. Styling in the Custom CSS tab will be used on every Formidable form that uses Formidable styling.

If you update your Styles, but do not see the changes you have implemented on your form, it is possible that your theme (or perhaps another plugin) has style rules that are conflicting with those you have created here. One way to address this is to check the box labeled Override theme styling under Styles → General

Edit Styles

Checkbox and Radio fields Style

Add custom styling to the checkbox and radio button fields of your form by selecting a custom text size, weight, and color for both field types. Choose between multiple rows or single row for the layout.
Visual Form Styler Checkbox Radio Button Style

Buttons Style

By default, the button color is set to blue. This styling is applied to all buttons used on the site including multi-paged form buttons (Next and Previous), Repeater buttons (Remove and Add), and Submit button.
Visual Form Styler Button StylingVisual Form Styler Button Styling

  • Disable button styling: If disabled, you may not see the change take effect until you make two more styling changes or click Update button.
  • On Hover and Click: Styling options for both On Hover and On Click are identical. Define the background color, border, text color.

The padding box is a shorthand property that can contain up to four values for top, right, bottom, and left.

Form Messages Style

Styling options for both Success and Error messages are identical. Define the background color, border, text color and size.
Visual Form Styler Form Messages Style

How to override your theme's style

If you find that your theme is affecting the style of your forms, then you can tell Formidable Forms to override your theme's styling. To do this, go to Formidable → Styles → General, and check the box that says Override theme styling.
Visual Form Styler
Doing this will add !important to many of the lines in the Formidable Forms CSS stylesheet to prioritize your form's styling over your theme's styling.

Set a default template

After you create some new Style templates, you can set any template as your default style. The default style will be used automatically for any new form, unless the Style Template option is changed in the form's Settings.

  1. Go to Formidable → Styles.
  2. Select a style from the Styles dropdown.
    Visual Form Default Style
  3. Check the Make this the default style box. This will make the selected style the new default style.
    Visual Form Default

By default, a newly created form will have Always use default selected for the Style Template option in the Settings. When you change the default style in your Formidable → Styles, the new default style will apply to all forms with the Always use default option selected.

Delete a style

If you would like to delete a style, first make sure it is not set as the default style. A style can only be deleted if it is not set as your default style.

  1. Select the style that you want to delete from the Styles dropdown.
    Visual Form Styler Select
  2. Click the Trash icon to delete the style.
    Visual Form Styler Delete Style

Please note that if you delete a style that is being used on a form, the styling for that form will switch to the Always use default setting.

Examples

Center a form on the page

If you'd like to have your form centered on the page where it is displayed, go to Formidable → Styles → General and select Center form on page. Please note that this will only work if the max width of the form is less than 100%, so you may also need to change Max Width under the General tab to 80% or lower.
Visual Form Styler Center Form

Only show bottom border in field

If you would like to remove the field borders and only show the bottom border for Default, Active, Error, and Inactive states, follow the instructions below:

  1. Go to Formidable → Styles.
  2. In Field Settings, change the Corners to 0px.
    Visual Form Styler Lines Styles Settings
  3. In Field Colors:
    • Change the Thickness to 0px 0px 2px 0px for Default and Error states.
    • Check the box that says Remove box shadow for Default and Active states.

    Visual Form Styler Lines Styles Colors

  4. Click the Update button and your fields should now look like this.
    Visual Form Styler Lines Styles Results

Styling placeholder text

To change the color of the placeholder text inside a field, go to Formidable → Styles → Field Colors. Look for the Read Only tab and select the color you want from the Text selector. Note: This will not work if you are styling a Dropdown placeholder text.
Visual Form Styler Placeholder text read onlyVisual Form Styler Placeholder text read only field

Set transparent colors

Need a transparent background on your form? Most of the color options in the styling settings will use 'transparent' for the color when left blank. Select the setting, remove the current color value, and save the style.

Set font family

If you would like to change the font that is used in your forms, navigate to Styles → General and refer to the image below to find the Font Family setting. Insert a single font or a series of comma-separated fallback font options in double quotes.
Visual Form Styler Enable RTL support

If you would like your theme to set the fonts, you can clear out this setting. If it is blank, this setting will be ignored.

To use a Google font, add it here the same way as if you were adding it in CSS. You will need to load the font in your theme. Once you use the font and test it on your site, the same CSS will work for your forms too.

Note: If a font is two words, be sure to use quotes around it.

Add side margins on buttons

You may have noticed that when you add "10px" into the Buttons → Margin setting, it only adds margin on the top and bottom of the buttons. To add margins on the right and left, use something like "10px 10px".

Enable RTL Support

Subscribe on YouTube

If you would like your form to have RTL support enabled, follow the steps below:

  1. Navigate to Formidable → Styles.
  2. In General:
    • Select Right from Alignment.
    • Select Right to Left from Direction.

    Visual Form Styler Enable RTL support

  3. In Field Labels:
    • Select Right from Position.
    • Select Right from Align.

    Visual Form Styler Enable RTL support 1

However, keep in mind that this only enables support for your forms, not the rest of your website. Your theme also need to have RTL support.

— Premium Feature —

Add a background image

To add an image for the background of your form, follow the steps below.

  1. Click the Upload background image button and select your preferred image.
    Visual Form Styler Add Background Image
  2. You can change the Image Opacity after you have uploaded an image.
    Visual Form Styler Background Image Opacity

Change color opacity

The color picker is available for most of the sections in the Form Styler.  You can select a color or insert the HEX, RGB, RGBA value in the input box. If you want to set the opacity, use the Alpha slider on the right side of the color picker.
Visual Form Styler Color Picker

Troubleshooting

Form looks different on a page

When the form styler shows you one result, and you see another result on the front-end, this means your theme is overriding some of the form styling.

  1. Make sure Formidable styling is enabled in the Global settings.
  2. Check the styling settings for the specific form to make sure the styling is not turned off.
  3. Turn on the option to override the theme styling as described above.
  4. Clear all caches including browser cache, and any caching plugins or server caching.
  5. If there are still problems, temporarily switch to a different theme to verify the conflict is coming from your theme. If you confirm this is a theme conflict, let us know and we can add it to our to do list.
  6. If the form has the same problem with a different theme, check the page HTML and resolve major HTML issues.

Form styling loaded via PHP

Each time the plugin is updated or the styling settings are saved, a new CSS file is generated in plugins/formidable/css/formidableforms.css. On some servers, this file cannot be generated based on file permissions or server permissions. When the file is not created, a dynamic version will be used with a URL like wp-admin/admin-ajax.php?action=frmpro_css.

Try the steps below to create the static css file. Save the form styling settings after each step.

  1. If you are required to enter FTP information when updating plugins, the plugin doesn't have permission to create this css file. Contact your web host for help disabling this FTP credentials requirement.
  2. Delete the Formidable Forms plugin and install it again. This may correct basic file permissions issues.
  3. Check the folder permissions on the formidable/css folder via FTP to make sure they are high enough to allow the folder to be writable.
  4. Save the styling settings again.

Related Articles

  • beautiful contact form design Beautiful Contact Form Design in WordPress (with Examples)
    Read More
    How to Style WordPress Forms to Match the Divi Theme How to Style WordPress Forms to Match the Divi Theme
    Read More
  • Getting started
  • Edit Styles
    • Checkbox and Radio fields Style
    • Buttons Style
    • Form Messages Style
  • How to override your theme's style
  • Set a default template
  • Delete a style
  • Examples
    • Center a form on the page
    • Only show bottom border in field
    • Styling placeholder text
    • Set transparent colors
    • Set font family
    • Add side margins on buttons
    • Enable RTL Support
    • Add a background image
    • Change color opacity
  • Troubleshooting
    • Form looks different on a page
    • Form styling loaded via PHP
  • Related Articles
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

You do not have permission to view this form. Maybe you need to log in?

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews