Contact Form to Email

Frequently Asked Questions

Questions


Answers

How can I apply CSS styles to the form fields?

To modify the whole styles of the form fields and labels, edit the styles file "wp-content/plugins/contact-form-to-email/css/stylepublic.css" and add these rules at the end of that file:

  • Change all the labels:
        #fbuilder, #fbuilder label, #fbuilder span {
            color: #00f;
        }
    
  • Change all the input, textarea and select fields:
        #fbuilder input[type=text], #fbuilder textarea, #fbuilder select {
            border: 2px solid #00f;
        }
    
  • Change the submit button:
        #fbuilder .pbSubmit {
            color: #00f;
            font-weight: bold;
        }
    
  • Change the "Section Break" field:
        #fbuilder .section_breaks label { font-size:18px; }
        #fbuilder .section_breaks span { font-size:14px; }
    
  • Change the "Instructions Text" field:
        #fbuilder .comment_area label { font-size:18px; }
        #fbuilder .comment_area span { font-size:14px; }
    
  • Change the "next" and "previous" buttons:
        #fbuilder .pbNext,#fbuilder .pbPrevious {
            color: #00f;
            font-weight: bold;
        }
    
  • Change the "form title" and "header description":
        #fbuilder .fform h1 {font-size:32px;}
        #fbuilder .fform span {font-size:16px;}
    

On the other hand to modify only a specific field into the form:

  • Step #1: Into the form editor, click a field to edit its details, there is a setting there named "Add CSS Layout Keywords".

  • Step #2: You can add a class name into that field, so the style specified into the CSS class will be applied to that field.

  • Step #3 (Note): Don't add style rules directly there but the the name of a CSS class.

  • Step #4: You can place the CSS class either into the CSS file of your template or into the file "wp-content/plugins/contact-form-to-email/css/stylepublic.css" located into the plugin's folder.

  • Examples: Add a class named "specialclass" into the setting "Add CSS Layout Keywords" and add one of these CSS rules into the mentioned file:

    • Change the field label:
          .specialclass label {
             color: #00f;
          }
      
    • Change the input, textarea or select of the field:
          .specialclass input[type=text],.specialclass textarea,.specialclass select {
              border: 2px solid #00f;
          }
      

There is a tag named <%INFO%> that is replaced with all the information posted from the form, however you can use also optional tags for specific fields into the form.

For doing that, click the desired field into the form builder and in the settings box for that field there is a read-only setting named "Field tag for the message (optional):". Copy & paste that tag into the message text and after the form submission that tag will be replaced with the text entered in the form field.

The tags have this structure (example): <%fieldname1%>, <%fieldname2%>, <%fieldname3%>, ...

Yes, it's possible

If the special characters aren't being correctly displayed, in most cases the problem is located in the database table collation/encoding. The solution is to change the table encoding to UTF-8. You can do that from the PHPMyAdmin provided by your hosting service.

For example, if your WordPress database table prefix is "wp_" (the default one) then run these queries (will update only the contact form tables):

alter table wp_cftemail_forms convert to character set utf8 collate utf8_unicode_ci;
alter table wp_cftemail_messages convert to character set utf8 collate utf8_unicode_ci;

If you aren't sure about how to do that then contact our support service and we will help you with that configuration.

Into the form editor 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 fields into the same line. The CSS classes are named:

  • column2
  • column3
  • column4

For example if you want to put two fields into the same horizontal line then specify for both fields the class name "column2".

If the form doesn't appear in the public website (in some cases only the captcha appear) then change the script load method to direct, this is the solution in most cases.

That can be changed in the "troubleshoot area" located below the list of forms.

Into the form builder in the administration area, click the "Form Settings" tab. That area is for editing the form title and header text.

It can be used also for different alignment of the field labels.

Use the tag <%itemnumber%> into the email content. That tag will be replaced by the submission item number.

The form builder of the Developer Version has the following additional fields in the form builder:

  • Line Text DS: An input field that gets its default values from one of following datasources - Database, Posts information, Taxonomies information or Users information.
  • Email DS: An input field for Email address that gets its default values from one of following datasources - Database or Users information.
  • Text Area DS: A text area field that gets its default values from one of following datasources - Database, Posts information.
  • Checkboxes DS: Checkboxes for selecting one or more options into the same field that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Radio Btns DS: Radiobuttons for selecting one option between the options available for the field that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Drop-down DS: A select / drop down list for selecting one of the values listed that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Hidden DS: A hidden field that gets its value from one of following datasources - Database, Posts information, Taxonomies information, or Users information.

Screenshot: Form builder in the Developer Version.

The Developer Version has the following additional pre-built styles for the form fields:


Screenshot: Additional pre-built styles in the Developer Version.

In the Developer Version the selection made on a field (drop-down, radio-buttons, checkboxes or other fields) can be used to define to which email(s) address(es) will be sent the administration/notification emails.

For doing that in the settings field 'Send email "To"' select the option 'To email ...in form field' and select which of the form fields will be the one used for selecting the email address.

If you are adding a field like a drop-down, radio-button or checkbox then put the email address in the field value (not needed in the field 'visual' text but in the 'internal' value). The email will be detected automatically into that field, so you can mix text and email addresses into the value and also multiple email addresses (comma or space separated). Example:


Screenshot: Using a radio-button to define the "To" email address.

The following additional field types are available in the Developer Version:

  • Fieldset: Used to group fields into a the fieldset, like the HTML FIELDSET tag
  • Div: Used to group fields into a DIV layer, useful for additional customization of the form styles and layout.
  • Data-dynamic fields: Explained in detail in this other FAQ entry.

Screenshot: Form builder in Developer Version.

Installation Instructions:

  1. If you already have installed the free version or an old version of the pro version then delete it before installing the new pro version.
  2. Install the pro version via the Plugins area >> Add New >> Upload

Note: The above is a safe process, the plugin's data and settings won't be lost during the process and will appear again after installed the pro version.

Alternative Installation Method:

  1. Overwrite (or copy if not previously installed) the plugin files into the WP plugins folder through a FTP connection. This is also a safe process, the plugin's data and settings won't be lost during the process.

Upgrade Instructions:

The upgrade instructions are exactly the same instructions mentioned above but be sure to make a backup copy of your current files if you have made custom modifications to the files or translations since the files will be overwritten.

After upgrading the plugin remember to clear your browser cache.

The free version must be deleted before installing the pro version.

If you are upgrading the pro version to a new version you should also remove the previously installed version.

This is a safe step, the plugin's data and settings won't be lost during the process.

Another alternative is to overwrite the plugin files through a FTP connection. This is also a safe step.