Adding a form element

To add a form element, there are three steps.

Step 1

Pick a unique name for the element. Choose a name for your new element that is not currently used by another element. The name should be all lower case and multiple words should be joined by an underscore. For example, fax_number.

Step 2

Add the HTML for the form element to your web page. The easiest way to add another form element is to copy the existing HTML code from another element, including all surrounding wrappers. Each element included with the form has comments surrounding it and the file example-all-elements.html has example code for most form elements you will ever need to use.

To copy the entire element, you would select the all the HTML code between the comments. For example, lets say we wanted to add a new required field called “Fax number”. We would copy the HTML for the “Name” field by searching in index.html for <!-- Begin Text input element, you will be taken to the code for the name element, copy the code inside the HTML comments surrounding the name element. Paste the code in between the form elements that you would like your new element to be between. You would then change all occurrences of “name” in your copied code with your unique name “fax_number” (except in this case do not change the actual name attribute key i.e. it should be name="fax_number" NOT fax_number="fax_number" on the input), after all the highlighted changes have been made we have:

1
2
3
45
67
8
9
10

<!-- Begin Text input element -->
<div class="quform-element quform-element-text">
    <div class="quform-spacer">
        <label for="fax_number">Fax number <span class="quform-required">*</span></label>        <div class="quform-input">
            <input id="fax_number" type="text" name="fax_number" />        </div>
    </div>
</div>
<!-- End Text input element -->

<!-- Begin Text input element -->
<div class="quform-element quform-element-text">
    <div class="quform-spacer">
        <label for="fax_number">Fax number <span class="quform-required">*</span></label>
        <div class="quform-input">
            <input id="fax_number" type="text" name="fax_number" />
        </div>
    </div>
</div>
<!-- End Text input element -->

• On lines 4 and 6, change fax_number to the unique element name from Step 1
• On line 4, change Fax number to the Label of the form element

Step 3

To make the PHP script aware of the new element, you will need to edit the quform/process.php file. You will need to create a new Quform_Element object for your new field, if you don’t know how to do that just copy the existing code for the name element. In process.php search for the term $name and you should find 4 lines of PHP code. Copy and paste this code above or below the existing 4 lines of code and then change everything that says “name” to your unique name “fax_number”, giving us:

1234

$fax_number = new Quform_Element('fax_number', 'Fax number');$fax_number->addFilter('trim');$fax_number->addValidator('required');$form->addElement($fax_number);

$fax_number = new Quform_Element('fax_number', 'Fax number');
$fax_number->addFilter('trim');
$fax_number->addValidator('required');
$form->addElement($fax_number);

• On lines 1, 2, 3 and 4, change fax_number to the unique element name from Step 1
• On line 1, change Fax number to the Label of the form element (this sets the label in the email and the non-JavaScript version of the form)

IMPORTANT: The first parameter given after the new Quform_Element( part must match the name="" attribute of the form element in the HTML, they should both be identical to your unique name you created in Step 1. This tells the PHP script what element you are referring to.

The filter you are adding to the element in the code above will trim whitespace from the start and end of the value submitted by the form user. The validator you are adding in the code above will make the field required. If you do not want those filters or validators for the element just delete the line that adds them. For more help see the pages About validators and About filters.