How to install

To install the form into your web page, there are 5 things you must do:

• 1. Copy the HTML code for the form into your web page
• 2. Copy the CSS stylesheet link(s) into your web page
• 3. Copy the JavaScript links into your web page
• 4. Configure the form to send messages to your email address
• 5. Upload the quform folder to your web server

Each step is explained in more detail below.

1. Copy the HTML code for the form into your web page

Open the index.html file and locate the HTML code for the form, it is located between the HTML comments <!-- To copy the form start here --> and <!-- To copy the form end here -->. Select all of this code then copy and paste it into the body of your web page.

2. Copy the link to the CSS stylesheet into your web page

There is one main stylesheet used by the form, the base.css located in quform/css/

The other optional stylesheet is a Theme style, these are located in quform/themes/. There are 6 options for Themes 3 dark and 3 light, for more information on this see Changing the form theme.

• 1. Base:
  • quform/css/base.css
• 2. Themes:
  • quform/themes/light/light.css
  • quform/themes/light/rounded.css
  • quform/themes/dark/dark.css
  • quform/themes/dark/rounded.css
  • quform/themes/minimal/light.css
  • quform/themes/minimal/dark.css

Here is an example of the stylesheets in the head. Note: if you change the theme stylesheet you will also need to add a new class into the quform-outer div. You can get more information on this on the Changing the form theme page.

1
2

<link rel="stylesheet" type="text/css" href="quform/css/base.css" />
<link rel="stylesheet" type="text/css" href="quform/themes/light/light.css" />

<link rel="stylesheet" type="text/css" href="quform/css/base.css" />
<link rel="stylesheet" type="text/css" href="quform/themes/light/light.css" />

3. Copy the JavaScript links into your web page

The form requires the 3 JavaScript files shown below, to include them in your web page, copy the lines below and paste them into your web page. The best place to put these is at the end of the page, just before the closing </body> tag.

1
2
3

<script type="text/javascript" src="quform/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="quform/js/plugins.js"></script>
<script type="text/javascript" src="quform/js/scripts.js"></script>

<script type="text/javascript" src="quform/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="quform/js/plugins.js"></script>
<script type="text/javascript" src="quform/js/scripts.js"></script>

Note: if your web page already uses the jQuery library you do not need the first file (jquery-3.5.1.min.js) so remove that line, jQuery needs to be version 1.8.0 or later for the form to work.

4. Configure the form to send messages to your email address

To configure the form, open quform/process.php and search for the code below.

1

$config['recipients'] = '';

$config['recipients'] = '';

Inside the single quotes enter the email address that you would like to receive the submitted form data. For example:

1

$config['recipients'] = 'me@example.com';

$config['recipients'] = 'me@example.com';

Set the “From” address

While you are in quform/process.php you should also set the “From” email address, search for the term $config['from'] = ''; and enter an email address inside the single quotes. Any emails you get from the script will appear to be sent from this address. Some web hosts will block emails sent from an email address that is not hosted on their servers, so it’s usually a good idea to set this to an email address that has the same domain as the site that the form is hosted on.

1

$config['from'] = 'company@example.com';

$config['from'] = 'company@example.com';

If you want to include your name or company name in the “From” address you can also use the code below.

1

$config['from'] = array('company@example.com' => 'Company');

$config['from'] = array('company@example.com' => 'Company');

Further configuration

You have now completed is the minimal setup that is required for the form to work, you can now upload the form to your web server as described in step 5. You can also continue to change the settings in process.php at this time or upload additional changes as you build your form. Each setting in process.php is accompanied by a comment explaining what it does and what the options are. You can also refer the customisation sections for further help.

5. Upload the quform folder to your web server via FTP

You should now upload the quform folder so that it resides in the same place as your web page containing the form. The quform folder and your PHP/HTML file should be in the same folder on your web server. If this setup is not possible, just change the action="" attribute of the <form> tag to point to the location of the quform/process.php file relative to the page with your form on it.

Now visit your web page in your browser, the form should appear and the contact form should work correctly. See the troubleshooting section if you are having problems.