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.

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.