There may be some cases in which you want to customize how the forms appear on your site or tailor the layout for a specific form.  FormBuilder is specifically designed to allow you to do this, and there are a number of ways you could go about it.

One of the easiest ways to change the look and feel of your forms is to add to or modify the CSS in a special FormBuilder plugin file called “additional_styles.css”.  The standard FormBuilder installation comes with a file in the main plugin folder called “additional_styles.sample.css”.  In order to activate additional CSS changes in the FormBuilder system, you simply have to add them to that file, and rename the file to “additional_styles.css” and move it to your root /wp-content/ folder. So the final location of the file in your site will be: /wp-content/additional_styles.css

FormBuilder will detect that the file exists, and use it to override any of it’s built-in CSS formatting controls.  The reason we recommend making modifications to this file instead of (for example) your theme CSS file directly, is this will allow you to change themes if necessary, without losing your form layout customizations.

Individual Form Styles

In some cases you may want a specific form on your site to look different than the rest.  This can be easily accomplished by simply looking at the ID attribute attached to the FORM tag when the form has been created.  Each FORM ID is specific to the original name you gave the form when you created it.  For example, on our sample form on this site, the FORM ID is “formBuilderFormBuilder_Sample_Form”.  A CSS programmer should then find it very easy to customize the look and feel of a given form, simply based on this FORM ID.

Individual Field Styles

Individual form fields can also customized in the CSS in the same way as the forms above.  Each field on the form is placed inside a DIV tag with an ID matching the name of the field in question.  For example, if you have a field on your form named “Email”, when displayed in the HTML, it will have a DIV ID of “formBuilderFieldEmail”.  Using this ID combined with the specific form ID listed above if necessary, a CSS programmer could easily change the layout or look of a single field on a single form on your site.

Related Reading:

Modern PHP: New Features and Good PracticesModern PHP: New Features and Good Practices

PHP is experiencing a renaissance, though it may be difficult to tell with all of the outdated PHP tutorials online. With this practical guide, you... Read More >

PHP for the Web: Visual QuickStart Guide (5th Edition)PHP for the Web: Visual QuickStart Guide (5th Edition)Learn PHP programming the quick and easy way!
With PHP for the Web: Visual QuickStart Guide readers can start from the beginning to get a tour... Read More >
PHP Cookbook: Solutions & Examples for PHP ProgrammersPHP Cookbook: Solutions & Examples for PHP Programmers

Want to understand a certain PHP programming technique? Or learn how to accomplish a particular task? This cookbook is the first place to look. Wit... Read More >