Visual 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 create a new style.
   
   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 'Save Style'. These settings will be applied to every form that has this style selected on the 'Manage Form Styles' tab.
4. Click on Manage Form 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' 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' > 'Edit Styles' > 'General'

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 Select a style to edit dropdown and hit 'Select'.
3. Check the Make 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 and click Select.
   
2. Scroll down to the bottom of the 'Styles' page and click 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.

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' → 'Edit 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 Save Style 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' → 'Edit Styles' → 'Field Colors'. Look for the Read Only tab and select the color that you want from the Text selector.

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.