How to install and configure your contact form

How to install and configure a contact form

In this guide on how to install your contact form, we'll cover the following areas:


Contact form installation overview

This guide covers how to install and configure your contact form which was downloaded after May 14th, 2020.

Although our contact forms are simple to use and setup, they do contain a lot of flexibility. They've been designed to work out of the box as much as possible with minimum effort. However, you are required to provide a number of settings first.

This page covers most of the settings you should be aware of. Most of them you will never need to set or change, they're included for completeness.


Using the contact form installer to set up your form

To make your setup as easy as possible, the form package comes with an installer. This is a form where you enter in the settings for your form. Here's an overview of the contact form installer.

Unzip the download package

The first thing to do when you download your package is to unzip the files to a folder on your computer.

Unzip files to computer

Upload files to your website

Connect to your website for file transfer (SFTP or Cpanel file upload for example), and upload ALL the files to the folder where you want your contact form to be installed.

Important: The installer will generate your form with the name contact-form.htm, please make sure you don't already have a file with that name in the same directory as the installer (if you do, please back it up before running the installer!).

Upload files to your website

Browse to the installer

In your browser, go to your website as you normally would. If you uploaded your files to the root of your website, then go to website.com/contact-form.install.php. Or if you uploaded your files to a folder (for example "folder"), then go to website.com/folder/contact-form.install.php

Browse to the intaller url

Enter your License Key

Install form license key field

If you're installing the free contact form, this field is prepopulated with 'FREE', don't change this value. Pro versions will however require that you supply your License Key which is provided along with your download link after purchase.

Select the style of your form Pro Feature

Contact form style selector

Click on the contact form style you want to install, there are currently 4 styles to pick from. S (Standard), S+ (Standard with Icons), M (Material Design Inspired) or M+ (Material Design Inspired with Icons)

Email message details

Contact form email message details

The first field here is very important - this is the email address where your form submissions will be sent to. The next field is optional, and you can put your name or company name in here.

The next 3 fields are will already have default values, all starting with "FIELD:", this means the value will be pulled from the data which was entered into your contact form. You can change these values if you prefer.

More details available in the Configuration section later on.

Do you want to send an Auto-Response email to your visitor? Pro Feature

Auto respond email to visitor

This is entirely optional, if you want to configure this, first tick the checkbox before completing the fields shown (I've entered test data into thee fields, you would obviously enter your own data here).

Please check out the help guide for which contact form email smtp settings to use with your hosting provider.

Use SMTP to send emails

Send contact form emails using SMTP

If you want to send your emails using SMTP (highly recommended!), tick this box and complete the fields with your own SMTP values.

Protect your form with reCAPTCHA Pro Feature

Use reCAPTCHA to protect your form

If you intend to using reCAPTCHA to protect your form from unwanted spambots and suspicious traffic, tick this box and enter your site key and secret key.

Find out how to set-up a Google reCAPTCHA account

The final stage is to click on the "Install Form" button. This will generate all the required code and configuration for your form. Once complete, you should see the following message.

contact form installation is complete

Congratulations, your form is now ready to use!

Please now test your form to make sure it's been configured correctly and is sending emails. If you experience any problems, please double check all your settings. If you continue to have issues, take a look at the contact form troubleshooting page for help.

You can now add your contact page contents around the form, or take the form HTML code and add it to your existing contact page.

Adding the form to your website

At this point, your form should be installed (see above). To add the form to an existing webpage, simply copy the HTML code from your new contact form page (contact-form.htm) and paste it to your page.

To keep things nice and tidy, you should exclude the following code:

At the very top - remove

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>contact form</title>
</head>

<body>

At the very bottom - remove

</body>
</html>

You can also move the JS and CSS code references to where you're other JS and CSS code references are. It's often best-practice to put the CSS references at the top of your page and the JS at the end.


Getting to know the files

Contact Form file types

Here's a quick list of some of the important files which make up the contact form package.

Usually, you only need to consider the configuration file. However, if you want more power, gaining a basic understanding of some of the other files will come in useful.

  1. contact-form.htm - This is the form which appears on your website.
  2. fcf-assets/contact-form.config.php - Configuration file
  3. fcf-assets/css/contact-form.css - The styles sheet for the form.
  4. fcf-assets/js/contact-form.js - The form validation (client-side).
  5. fcf-assets/templates/contact-form.email-in.htm - Email template

The contact forms HTML file

contact-form.htm

The form code is made up of the four main sections:

  1. Reference to the style sheet
  2. The form
  3. The thank you message (hidden before the form is submitted)
  4. References to the JavaScript files
    <!-- 1: REFERENCE TO STYLE SHEET -->
    <link href="fcf-assets/css/contact-form.css" rel="stylesheet">
    ... 
    <!-- 2: THE FORM -->
    <div id="fcf-form"> 
    ... 
    <!-- 3: THANK YOU MESSAGE -->
    <div id="fcf-thank-you">
    ... 
    <!-- 4: REFERENCES TO JAVASCRIPT FILES -->
    <script src="fcf-assets/js/just-validate.js"></script>
    <script src="fcf-assets/js/contact-form.js"></script>

Top Tip!

You may be interested in changing the message which is shown to your visitor after they submit the contact form.

This is the default code:

    <div id="fcf-thank-you">
    <!-- Thank you message goes below -->
    <h3 class="fcf-h3">Thank you for getting in touch</h3>
    <p>We appreciate you contacting us. We will get back in touch with you soon.</p>
    <!-- Thank you message goes above -->
    </div>

 

Pro Feature

If you're using reCAPTCHA V3, then there are two additional parts you should be aware of.

  1. Sitekey inside a hidden form field
  2. Sitekey in a JavaScript reference
    <!-- NEAR THE TOP OF THE FORM CODE -->
    <input type="hidden" id="recaptcha-sitekey" value="[SITEKEY]">
    ... 
    <!-- AT THE BOTTOM, AT THE JAVASCRIPT FILE REFERENCES -->
    <script src="https://www.google.com/recaptcha/api.js?render=[SITEKEY]" async defer></script>

You should make sure that you put your sitekey value in the [SITEKEY] parts.

Find out how to get your Google reCAPTCHA Keys.


The contact forms configuration file

fcf-assets/contact-form.config.php

This is the most important part of setting up and running your form, so please read carefully.

As you can see from the file extension, this is a PHP file. This is used by your Server when processing the form submissions.

The file is split into the following sections:

  1. License key
  2. Form field validation
  3. Form field mapping
  4. Email templates - incoming
  5. Email templates - auto-response Pro Feature
  6. Email message
  7. Email transport
  8. reCAPTCHA V3 Pro Feature

Let's go through each part.

Configuration - License Key

    // ***********
    // LICENSE KEY
    // ***********
    define('KEY', 'YOUR-KEY-HERE');

This one is nice and simple. Just replace the YOUR-KEY-HERE part with your license key. The free form key is: FREE. Your Pro key is found in your purchase email along with your download details.

Configuration - Form Field Validation

    // *********************
    // FORM FIELD VALIDATION
    // *********************
    $validate = array(
        "Name" => "NOT_EMPTY,2,60",
        "Email" => "EMAIL",
        "Subject" => "NOT_EMPTY,2,100",
        "Message" => "NOT_EMPTY,15,3000"
    );

The purpose of the form field validation section is to set which fields on the form should be validated. This is pre-set, so you probably don't need to change.

It's also good to know that the form validation is already carried out in the browser prior to this. This is only a back-up in case your visitor has a browser issue that prevents the validation from functioning client-side.

The fifth line down has "Name" => "NOT_EMPTY,2,60". The first part is the field "Name", the second part is split into three "NOT_EMPTY", 2 and 60. This means that the field "Name" must not be empty, contain at least 2 characters and a maximum of 60 characters.

Configuration - Form Field Mapping

    // ******************
    // FORM FIELD MAPPING
    // ******************
    $mapping = array(
        "Name" => "Your name",
        "Email" => "Your email address",
        "Subject" => "Help you with",
        "Message" => "Your message"
    );

This Form Field mapping part allows you to map a friendly name against the field value. If the above validation fails, then a user is shown a message on the form. The user-friendly field name is used.

Example: 'Your email address' is required.

You usually don't need to change this as it's pre-set.

Configuration - Email Templates Incoming

    // **************************
    // EMAIL TEMPLATES - INCOMING
    // **************************
    define('EMAIL_TEMPLATE_IN_HTML', 'contact-form.email-in.htm');
    define('EMAIL_TEMPLATE_IN_TEXT', 'contact-form.email-in.txt');

Email Templates Incoming is referencing template files that are used to create the email sent to you after someone uses your form. You do not need to change anything directly here, however, if you want to change the format of your email, then take a look at the template .htm and .txt files.

Emails are sent as multipart HTML with a Text alternative. So, if you can't receive HTML emails for whatever reason, then the text version will be shown.

Because we're looking at the configuration file, We'll not explain how the email template works here. You can find out more about that later.

Configuration - Email Templates Auto-Response Pro Feature

    // *******************************
    // EMAIL TEMPLATES - AUTO-RESPONSE
    // *******************************
    define('EMAIL_TEMPLATE_OUT_HTML', 'contact-form.email-out.htm');
    define('EMAIL_TEMPLATE_OUT_TEXT', 'contact-form.email-out.txt');

    define('SEND_AUTO_RESPONSE', 'YES'); // YES OR NO
    define('EMAIL_OUT_SUBJECT', 'Thanks for your message');
    define('EMAIL_OUT_TO', 'FIELD:Email');
    define('EMAIL_OUT_TO_NAME', 'FIELD:Name');
    define('EMAIL_OUT_FROM', '');
    define('EMAIL_OUT_FROM_NAME', '');

If you would like to send an email to your visitor after they send a message through your form, then look at this section.

The first two lines reference where the HTML and Text email templates are located.

SEND_AUTO_RESPONSE - setting the value to YES will send the auto-response, NO will not.

EMAIL_OUT_TO - The default value for this is 'FIELD:Email', this means the email will be sent to the email address which was entered into the "Email" field in the form.

EMAIL_OUT_TO_NAME - The default value for this is 'FIELD:Name', this means the email will be marked with the name which was entered into the "Name" field in the form.

The last two fields are very important (if you want to use an auto-response email feature), you MUST complete these two fields. The first with the email address which the auto-response email will be sent from, the next is the name related to it.

Examples of the last to fields:

define('EMAIL_OUT_FROM', 'example@example.com');
define('EMAIL_OUT_FROM_NAME', 'Example Inc.');

Configuration - Email Message

    // *************
    // EMAIL MESSAGE
    // *************
    define('EMAIL_TO', '');
    define('EMAIL_TO_NAME', '');

    define('EMAIL_TO_CC', '');
    define('EMAIL_TO_CC_NAME', '');

    define('EMAIL_TO_BCC', '');
    define('EMAIL_TO_BCC_NAME', '');

    define('EMAIL_FROM', '');
    define('EMAIL_FROM_NAME', '');

    define('EMAIL_REPLY_TO', 'FIELD:Email');
    define('EMAIL_REPLY_TO_NAME', 'FIELD:Name');

    define('EMAIL_SUBJECT_BEFORE', 'Contact Form:');
    define('EMAIL_SUBJECT', 'FIELD:Subject');
    define('EMAIL_SUBJECT_AFTER', '');

Here's a grid with details of each field:

Setting Description
EMAIL_TO
Required
Email address where the form will be sent to.
EMAIL_TO_NAME
Optional
Name part of the email.
EMAIL_TO_CC
Optional
Email CC address where the form will be sent to.
EMAIL_TO_NAME_CC
Optional
Name CC part of the email.
EMAIL_TO_BCC
Optional
Email BCC address where the form will be sent to.
EMAIL_TO_NAME_BCC
Optional
Name BCC part of the email.
EMAIL_FROM
Required
Email address where the form will be sent from. You can use "FIELD:Email" if you want the email address to be the one entered into the forms Email field. Some hosting providers or SMTP providers need to have a known email address in here, if that's the case, then you may need to put your own email address in here. It's ok for this to be your own email, as the EMAIL_REPLY_TO option below can also be used.
EMAIL_FROM_NAME
Optional
Name part of the email. You can use "FIELD:Name" if you want the name to be the one entered into the forms Name field.
EMAIL_REPLY_TO
Optional
Email address where the form will be sent if you reply to the message. You can use "FIELD:Email" if you want the email address to be the one entered into the forms Email field.
EMAIL_REPLY_TO_NAME
Optional
Name part of the email.
EMAIL_SUBJECT_BEFORE
Optional
If you make use of the next setting using a "FIELD:Subject" option, then this value is prepended to the subject line.
EMAIL_SUBJECT
Optional
If you want the subject to be a value from your form, for example if you have a "Subject" drop-down field, then you can use "FIELD:Subject". Or you can just enter a subject line. For example, "Contact form message"
EMAIL_SUBJECT_AFTER
Optional
If you make use of the above setting using a "FIELD:Subject" option, then this can be appended to the subject line.

Configuration - Email Transport

    // ***************
    // EMAIL TRANSPORT
    // ***************
    define('USE_SMTP', 'YES'); // YES or NO
    define('SMTP_HOST', '');
    define('SMTP_USER', '');
    define('SMTP_PASS', '');
    define('SMTP_SECURE', 'STARTTLS'); // STARTTLS or SMTPS (port 465)
    define('SMTP_PORT', '587');
    define('SMTP_DEBUG', 'NO'); // YES or NO

This is another vital part that you need to complete. Here are more details on these settings:

The first setting USE_SMTP can accept two values, either YES or NO. If you set it to YES, then you must provide values for the rest of the settings in this section.

If you're using SMTP, then you will need to supply the HOST, USER, and PASS values.

The next two settings, SMTP_SECURE and SMTP_PORT usually work together. The most common settings are:

STARTTLS with port 587, or SMTPS with port 465.

Sometimes you may need to try different combinations to find the correct values for your environment.

If you're having issues getting your form to send emails, then set SMTP_DEBUG value to YES. This will provide a whole bunch of information that can help identify the issue. The most common issue is with the user, pass, and port number having the wrong values.

Configuration - reCAPTCHA Pro Feature

    // ************
    // reCAPTCHA V3
    // ************
    define('RECAPTCHA_SITEKEY', '');
    define('RECAPTCHA_SECRETKEY', '');
    define('RECAPTCHA_SCORE', '0.5');
    define('RECAPTCHA_ACCEPT_LOW_SCORE', 'YES'); // YES or NO

If you're using our Contact Form Pro and would like to make use of Google's reCAPTCHA human verification system to stop unwanted automated spam, then complete this section.

Obtain your "site key" and "secret key" values from reCAPTCHA. Read our guide on how to get your Google reCAPTCHA Keys.

The RECAPTCHA_SCORE is a score which the service provides on how likely the form visitor is to be a bot. The score can be anything from 0 to 1. The current minimum accepted value is 0.5 if you want you can change this.

If you want to allow all messages through regardless of the score, then set RECAPTCHA_ACCEPT_LOW_SCORE value to YES. Otherwise set it to NO will silently discard any form submissions below the score limit.


The contact forms JavaScript file

fcf-assets/js/contact-form.js

This file has a number of responsibilities, but the main one you may be interested in is the form field validation.

As mentioned above in the configuration section, the form validation is first done in the browser before the form is submitted.

This is the part in the JS file which sets the required validation settings you want.

    rules: {
        Name: {
            required: true,
            minLength: 2,
            maxLength: 60
        },
        Email: {
            required: true,
            email: true
        },
        Subject: {
            required: true,
            minLength: 2,
            maxLength: 100
        },
        Message: {
            required: true,
            minLength: 15,
            maxLength: 3000
        }
    }

In the above example, four fields have been included. Name, Email and Message all specify that the fields are required and set the minimum and maximum acceptable value lengths. The email field is a required field, and it also states the validation type is 'email'. This will be pre-set for you, so you shouldn't need to change.


The contact forms CSS file

fcf-assets/css/contact-form.css

The required styles for the form are included in this file. If you want to change anything to do with the colours or layout, this is the place to do it.

The style classes are prefixed with "cfc-", this is to prevent any of the styles clashing with your website styles.

Depending on the form version you have, there may other alternative styles available which changes the form look. If you want to switch styles, change the CSS reference in your forms HTML file.