Installing using existing form HTML

Quform PHPGetting startedEssentialsInstalling using existing form HTML

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 the name 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.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy