How to

install & configure

the free contact form

Last updated: 19th October 2022

The following areas are covered in this guide:

Free contact form installation overview

This guide covers how to install and configure your free contact forms.

Although our contact forms are simple to use and setup, they contain a lot of flexibility. The free contact form has 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 when installing or configuring your free contact forms. Most of the settings are pre-configured and should never need change, but they are included for completeness.

Quick set up guide

This is the quick set up guide which should work for you in most cases. However, you may require to add more advanced setting to your free contact forms if this quick guide doesn't work on your environment.

Step 1: Download and extract the free contact form package.

Step 2: Open the file fcf-assets/fcf.config.php in a code or plain text editor.

Step 3: Add your email address to the line below. This is the email address which the form submissions will be sent to.

define('EMAIL_TO', '');

If your email address is "weejimmy@example.com", then it should now look like this:

define('EMAIL_TO', 'weejimmy@example.com');

Step 4: Add your email address to the line below. This is the email address which the form submissions will be sent from. This email address needs to be known by your hosting account.

define('EMAIL_FROM', '');

If your email address is "weejimmy@mydomain.com", then it should now look like this:

define('EMAIL_FROM', 'weejimmy@mydomain.com');

Step 5: Copy the HTML code from fcf.form.htm to your contact page. You can clean-up some code first.

At the very top - remove

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

Keep the Style Sheets links (for example: <link href="fcf-assets/css/fcf.default.css" rel="stylesheet">).

Also remove.

<title>your title</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.

Step 6: Upload all files (including the fcf-assets folder) to your website.

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. More settings are shown below.

If you continue to have issues, take a look at the contact form troubleshooting page for help.

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.

In most cases, you only need to consider the configuration file. But more details are included if you are interested in learning more.

  1. fcf.form.htm - This is the free contact form.
  2. fcf-assets/fcf.config.php - Configuration file
  3. fcf-assets/js/fcf.form.js - Form validation (client-side).
  4. fcf-assets/css/fcf.default.css - Style sheet
  5. fcf-assets/email-templates/fcf.email-in.htm - Email templates

The contact forms HTML file

fcf.form.htm

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

  1. Reference to the style sheets
  2. The form
  3. The thank you message (hidden before the form is submitted)
  4. References to the JavaScript files
    <!-- 1: REFERENCE TO STYLE SHEETS -->
    <link href="fcf-assets/css/fcf.default.css" rel="stylesheet">
    <link href="fcf-assets/css/fcf.default-custom.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/fcf.just-validate.min.js"></script>
    <script src="fcf-assets/js/fcf.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</h3>
    <p>Thanks for contacting us, we will get back in touch with you soon.</p>
    <!-- Thank you message goes above -->
    </div>

You can also have the form redirect to another page after submission. See the next section for details.

 

The contact forms configuration file

fcf-assets/fcf.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. Form field validation
  2. Thank you page
  3. Email templates - incoming
  4. Email templates - auto-response
  5. Email message
  6. Email transport

Let's go through each part.

Configuration - Form Field Validation

// *********************
// FORM FIELD VALIDATION
// *********************
$rules = array(
  "Name" => array(
    "required" => true,
    "label" => "Your name",
    "maxLength" => 100
  ),
  "Email" => array(
    "required" => true,
    "label" => "Your email address",
    "maxLength" => 100,
    "email" => true
  ),
  "Phone" => array(
    "required" => false,
    "label" => "Your phone number",
    "maxLength" => 30
  ),
  "Message" => array(
    "required" => true,
    "label" => "Your message",
    "maxLength" => 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.

Configuration - Thank you page

// ******************
// THANK YOU PAGE
// ******************
define('THANK_YOU_PAGE','thankyou.htm');

This is optional, the default behaviour of the form is to show a message on the same page as the form.

By adding a page here (thankyou.htm in the example above), you will enable this feature.

Setting this empty, for example: define('THANK_YOU_PAGE',''); will keep the default behaviour.

Configuration - Email Templates Incoming

    // **************************
    // EMAIL TEMPLATES - INCOMING
    // **************************
    define('EMAIL_TEMPLATE_IN_HTML', 'fcf.email-in.htm');
    define('EMAIL_TEMPLATE_IN_TEXT', 'fcf.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

    // *******************************
    // EMAIL TEMPLATES - AUTO-RESPONSE
    // *******************************
    define('EMAIL_TEMPLATE_OUT_HTML', 'fcf.email-out.htm');
    define('EMAIL_TEMPLATE_OUT_TEXT', 'fcf.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 two 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', '');
define('EMAIL_SUBJECT', 'New contact form message');
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		 Prepended to the subject line.
EMAIL_SUBJECT
 The subject line from your email, for example: "Contact form message"
EMAIL_SUBJECT_AFTER
Optional		 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_AUTH', '');
define('SMTP_SECURE', 'STARTTLS'); // STARTTLS or SMTPS (port 465)
define('SMTP_PORT', '587');
define('SMTP_DEBUG', 'NO'); // YES or NO

If you need to use SMTP, then complete 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.

SMTP_AUTH should usually be set to YES. But if your SMTP server has authentication switched-off, then change this to NO.

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.

The contact forms JavaScript file

fcf-assets/js/fcf.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,
        "maxLength": 100
    },
    "Email": {
        "required": true,
        "maxLength": 100,
        "email": true
    },
    "Phone": {
        "required": false,
        "maxLength": 30
    },
    "Message": {
        "required": true,
        "maxLength": 3000
    }
},

In the above example, 4 fields have been included: Name, Email, Phone, and Message. Some of the field are required and all have and maximum acceptable value set. 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 files

fcf-assets/css/fcf.default.css

The required styles for the form are included in this file.

fcf-assets/css/fcf.default-custom.css

The core color settings are available in this file. If you want to edit the color theme of your form, this is the best place to do that.

The contact forms email templates

fcf-assets/email-templates/fcf.email-in.htm

This file (along with the .txt version) is used to generate the email which is sent to you after each form submission.

Element like this one: {Name} will be replaced with the form field submitted value.

fcf-assets/email-templates/fcf.email-out.htm

This file (along with the .txt version) is used to generate the email which is sent to your visitor (if you have enabled auto-respond option) after each form submission.