Form Builder CP is a contact form plugin for creating contact forms with a visual form builder and email them.
With Form Builder CP you can:
- Build a form - Use a visual form builder to create a form - Receive the form data via email - Add validation rules to the form - Add captcha anti-spam to the form - Style the form - Customize the emails
Form Builder CP is a contact form plugin that allows creating contact forms and email them.
This forms plugin lets you to use its form builder to create contact forms, booking forms, or other types of forms that capture information via your website.
The form builder has a visual interface for creating the contact form with field validation and anti-spam captcha image verification included in all versions. The form builder is as simple as just drag and drop the form fields into the contact form.
This version support three type of form fields: text fields, email fields and textarea fields. These fields can be used unlimited times into the same form to create large forms. Most contact forms are based just in those three type of fields. There are other versions of the plugin (commercial versions) that support other field types, info about other versions can be found at https://wordpress.dwbooster.com/forms/cp-easy-form-builder
The contact form is rendered and validated using a modern jQuery script, compatible with mobile pages.
The kernel of the Form Builder CP is its form maker (or form builder). It is 100% JavaScript and supports the basic email, text and comments fields. There are other versions that support more advanced fields. The form maker also allows to specify CSS classes for each form field (read more in the FAQ) or align various form fields in the same row.
The validations, also integrated in the form builder, cover email form fields, confirmation form fields, length of the texts entered in the form fields, required form fields and other common form validation rules.
The captcha is built 100% into the plugin, there is no need for external captchas or anti-spam services. The captcha image can be visually configured to modify the font, colors, amount of noise and size. The captcha verification is made with Ajax to avoid reloading the page. The captcha configuration section is located below the form builder in the settings area.
New features has been published in the current Form Builder CP version 1.1.4 based on the feedback received and we would like to thank you all the people that have supported the development, provided feedback and feature requests. The plugin is currently over the 30,000 downloads/installations and a new set of updates is already being prepared, any feature requests will be welcome. Thank you!
If the form doesn’t appear: If the form doesn’t appear in the public website that’s probable due to a conflict with the theme. The solution in most cases is the following:
Edit the file cp_easy_form_builder.php, go to the line #22 where says:
define(‘CP_EASYFORM_DEFAULT_DEFER_SCRIPTS_LOADING’, false);
Put that configuration constant to true, example:
define(‘CP_EASYFORM_DEFAULT_DEFER_SCRIPTS_LOADING’, true);
That way the scripts with be loaded in a different way that avoid conflicts with third party themes that force their own jQuery versions. This update may solve also conflicts with the form builder in the dashboard area.
Other Form Builder CP versions: There is a pro version of the Form Builder CP plugin that also supports these features:
You can read more details about that version at https://wordpress.dwbooster.com/forms/cp-easy-form-builder
To install Form Builder CP, follow these steps:
A: The Form Builder CP product’s page contains detailed information about each field and customization:
https://wordpress.dwbooster.com/forms/cp-easy-form-builder
A: Into the form editor (form builder), click a field to edit its details, there is a setting there named “Add CSS Layout Keywords”. You can add the class name into that field, so the style specified into the CSS class will be applied to that field.
Note: Don’t add style rules directly there but the name of a CSS class.
You can place the CSS class either into the CSS file of your template or into the file “cp-easy-form-builder\css\stylepublic.css” located into the plugin’s folder.
A: Yes, use the “Add CSS Layout Keywords” field into the form creator for doing that. Into the form creator click a field and into its settings there is one field named “Add Css Layout Keywords”. Into that field you can put the name of a CSS class that will be applied to the field.
There are some pre-defined CSS classes to use align two, three or four form fields into the same line. The CSS classes are named:
column2 column3 column4
For example if you want to put two form fields into the same line then specify for both form fields the class name “column2”.
A: This is the Form Builder CP shortcode:
[CP_EASY_FORM_WILL_APPEAR_HERE]
You can paste it in any place into a post/page or directly into the template using the do_shortcode function. In the edition of pages and posts there is a link that inserts the Form Builder CP shortcode into the page/post.
A: The class=”pbSubmit” can be used to modify the button styles.
The styles can be applied into any of the CSS files of your theme or into the CSS file “cp-easy-form-builder\css\stylepublic.css”.
For further modifications the submit button is located at the end of the file “cp_easyform_public_int.inc.php”.
A: There is a new settings box in the Form Builder CP settings named “Submit Button”. You can edit the submit button label there and get info about editing its CSS styles.
A: Yes, into the form builder click the field and you will see various options in the “Field Settings” tab. In this case you are interested in the option labeled “Instructions for User”.
Type the instruction in the settings field “Instructions for User” and click the checkbox labeled “Show as floating tooltip” below that field, this way the instructions will appear when the field receives the focus (when the user enters to the field to type something).
If the checkbox “Show as floating tooltip” isn’t marked then the instructions will appear always displayed immediately below the field in the form.