If you have already built a form in HTML and want to use Quform to handle the form processing, follow these instructions instead of the normal installation instructions.
Step 1
Find the <form>
tag in your existing form HTML and add the class quform
to it, and set the action attribute to the path to the quform/process.php file and make sure that the method attribute is post
. For file uploads to work when JavaScript is disabled, add the attribute enctype="multipart/form-data"
.
1 | <form class="quform" action="quform/process.php" method="post"> |
<form class="quform" action="quform/process.php" method="post">
Wrap all of the form fields in a <div> with class quform-elements
, the success message will be displayed at the top of this. If you already have a tag wrapping all fields just add the class quform-elements
to it. This tag must be inside the <form>
tag.
1 2 3 | <div class="quform-elements"> ... all form fields here ... </div> |
<div class="quform-elements"> ... all form fields here ... </div>
Wrap each form field in a <div>
with class quform-input
, validation error messages will be displayed at the bottom of this. If you already have a tag wrapping each field just add the class quform-input
to it.
1 2 3 4 5 6 | <div class="quform-input"> ... one form field here ... </div> <div class="quform-input"> ... one form field here ... </div> |
<div class="quform-input"> ... one form field here ... </div> <div class="quform-input"> ... one form field here ... </div>
Step 2
Add the link to the Quform base stylesheet in the <head>
section of the page.
1 | <link rel="stylesheet" type="text/css" href="quform/css/base.css" /> |
<link rel="stylesheet" type="text/css" href="quform/css/base.css" />
Step 3
Add the links to the Quform JavaScript files 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.
Step 4
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');
Add PHP configuration for each existing field
So that the fields can be processed you need to add an element configuration to the process.php file for each field. For most fields you can simply add this code to the element configuration section of process.php for each field.
1 2 | $element = new Quform_Element('my_element_name', 'My element label'); $form->addElement($element); |
$element = new Quform_Element('my_element_name', 'My element label'); $form->addElement($element);
- Replace
my_element_name
to exactly match thename
attribute of the field in the form HTML - Replace
My element label
with a label for this field - Note:
$element
is PHP variable which stores the element before it is added to the form on the line$form->addElement($element);
. The actual name of the variable does not matter, you could for example replace both instances of$element
with$my_element
in the code above, and it will still work properly.
You can also remove any existing element configuration from process.php that does not apply to your form. See the Customisation page for more information about element configuration.
Step 5
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.