Plugin Directory

Test out the new Plugin Directory and let us know what you think.

Contact Form Email

Contact form that sends the data to email and also to a database list and CSV file. Contact form with form builder.

Q: How can I add specific fields into the email message?

A: There is a tag named <%INFO%> that is replaced with all the information posted from the contact form, however you can use also optional tags for specific fields into the contact 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 contact form 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%>, ...

Q: Can I add a reference to the item number (submission number) into the email?

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

Q: The contact form doesn't appear. What is the solution?

A: The cause is in most cases a conflict with a third party plugin or with the theme. To fix that, go to the "troubleshoot area" (located below the list of forms in the settings area) change the "Script load method" from "Classic" to "Direct".

If the problem persists after that modification please contact our support service and we will give you a solution. We will appreciate any feedback to make the contact form avoid conflicts with third party plugins/themes.

Q: I'm having problems with non-latin characters in the contact form.

A: Use the "troubleshoot area" to change the character encoding. Try first with the UTF-8 option.

Q: I'm getting this message: "Destination folder already exists". Solution?

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

If you are uploading a new version via Plugins - New - Upload and a previous version is still installed, then delete the previous version first. 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.

Q: How to edit or remove the form title / header?

A: 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.

Q: Can I align the form horizontally in two or more columns?

A: 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:


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

Q: What means each field in the contact form settings area?

A: For each contact form you will be able to edit the following settings:

Form Processing / Email Settings:

  • Send email "From": Indicate if the email will be sent from a fixed email address or from the email address entered by the customer. This is explained in more detail in the "Other notes" tab.
  • "from" email: The email used as from in the notifications (for fixed "from" addresses).
  • Destination emails (comma separated): List of administrators that will receive the email notification.
  • Email subject: Subject of the notification email sent after completing the payment.
  • Include additional information?: Optional information about the user IP and browser.
  • Thank you page (after sending the message): After the completing the payment the user may go back to a page into your website (usually a "thank you" page). Type the page address into this field.
  • Email format?: Select if the email will be sent as plain-text or HTML-formatted.
  • Message: Content of the notification email that you will receive after each submission of the contact form. Keep the tag , it will be replaced automatically with the form data send by the user.

Form Builder: The drag and drop contact form builder. It's explained in detail in the "Other notes" tab.

Submit button: To specify the label of the contact form submit button (no need to add it from the visual contact form builder). Contains also other settings and instructions for further customizations to the contact form submit button and contact form CSS styles.

Validation Settings: This area contains the "texts" used for the contact form validations. You can easily translate them to other languages.

Email Copy to User:

  • Send confirmation/thank you message to user?: Select if you want to sent the "confirmation/thank you" message to the user.
  • Email field on the form: Select here the field that contains the user's email on the contact form.
  • Email subject: Subject of the email sent to the user after payment
  • Email format?: Select if the email will be sent as plain-text or HTML-formatted.
  • Message: Content of the email sent to the user after payment. The tag will be replaced by the information sent using the contact form, if needed.

Captcha Verification:

  • Use Captcha Verification?: Select if the captcha image will be used in the contact form to prevent spam.
  • Width: Width of the captcha image.
  • Height: Height of the captcha image.
  • Chars: How many characters will appear in the captcha image.
  • Min font size: Minimum size used for the font (randomized).
  • Max font size: Maximum size used for the font (randomized).
  • Preview: Preview for checking how the captcha image will look.
  • Noise: Amount of noise to make it stronger.
  • Noise Length: Length of the noise to modify its look.
  • Background: Background color.
  • Border: Border color.
  • Font: Base font used to render the text. Four options already included.

Automatic Reports. Send submissions in CSV format via email: This area contains many settings to automatically send reports every the specified period of time containing the data of all the contact forms submitted during that period of time. The report settings are explained more in detail in the tab "Other Notes" (see "Customizing the automatic email reports"). Note: All the submissions are stored into the contact form database, so can be easily recovered when needed.

Q: How can I apply CSS styles to the contact form fields?

A: To modify the whole styles of the contact 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 the styles of all the field labels:

    #fbuilder, #fbuilder label, #fbuilder span {
    color: #00f;
  • Change the styles of all the input and textarea fields:

    #fbuilder input[type=text], #fbuilder textarea, #fbuilder select {
    border: 2px solid #00f;
  • Change the contact form submit button:

    #fbuilder .pbSubmit {
    color: #00f;
    font-weight: bold;
  • Change the "contact 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 contact form:

  • Step #1: Into the contact form builder, 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 in the contact form builder but 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 Contact Form to Email 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:

  • For changing the field label:

    .specialclass label {
    color: #00f;
  • For changing the input or textarea of the field:

    .specialclass input[type=text],.specialclass textarea,.specialclass select {
    border: 2px solid #00f;

To get the modifications shown into the public contact form you may have to refresh the page twice or clear the browser cache to be sure that the old CSS styles aren't still being shown from the cache.

Requires: 3.0.5 or higher
Compatible up to: 4.7.2
Last Updated: 6 hours ago
Active Installs: 40,000+


3.8 out of 5 stars


2 of 4 support threads in the last two months have been marked resolved.

Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 100,4,4