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.

Getting started

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

1. Go to Formidable → 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.
   
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.
   
4. Click on Manage Styles and choose the styling you would like for each form.
   
   Or, change the styling on your forms individually. Just go into your form's Settings → Styling & Buttons and select a Style Template.
   

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.

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.

• 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.

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.

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.
   
3. Check the Make this the default style box. This will make the selected style the new default style.
   

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.
   
2. Click the Trash icon to delete the 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.

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

   

4. Click the Update button and your fields should now look like this.
   

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 that you want from the Text selector.

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.

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

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.

   

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

   

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.

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.
   
2. You can change the Image Opacity after you have uploaded an image.
   

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.

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 in WordPress (with Examples)
  Read More

  How to Style WordPress Forms to Match the Divi Theme
  Read More