How to add fields to the contact form

[Support]

Here is what you need to do if you want to add some extra fields to the contact form:

Contact US – Basic

1) HTML: contact-us.html – Add the new fields you want on the form:

HTML:

Text Field:

<div class="row">
	<div class="form-group">
		<div class="col-md-12">
			<label>Text Field</label>
			<input type="text" value="" data-msg-required="Please enter the text." maxlength="100" class="form-control" name="textSample" id="textSample" required>
		</div>
	</div>
</div>

Select:

<div class="row">
	<div class="form-group">
		<div class="col-md-12">
			<label>Select</label>
			<select data-msg-required="Please select..." class="form-control" name="selectSample" id="selectSample" required>
				<option value="">...</option>
				<option value="Option 1">Option 1</option>
				<option value="Option 2">Option 2</option>
				<option value="Option 3">Option 3</option>
				<option value="Option 4">Option 4</option>
			</select>
		</div>
	</div>
</div>

Checkboxes and Radios:

<div class="row">
	<div class="form-group">
		<div class="col-md-6">
			<div class="row">
				<div class="col-md-12">
					<label>Checkboxes</label>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="checkbox-group" data-msg-required="Please select at least one option.">
						<label class="checkbox-inline">
							<input type="checkbox" name="checkboxesSample[]" id="inlineCheckboxSample1" value="option1"> 1
						</label>
						<label class="checkbox-inline">
							<input type="checkbox" name="checkboxesSample[]" id="inlineCheckboxSample2" value="option2"> 2
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6">
			<div class="row">
				<div class="col-md-12">
					<label>Radios</label>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="radio-group" data-msg-required="Please select one option.">
						<label class="radio-inline">
							<input type="radio" name="radiosSample" id="inlineRadioSample1" value="option1"> 1
						</label>
						<label class="radio-inline">
							<input type="radio" name="radiosSample" id="inlineRadioSample2" value="option2"> 2
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

2) JS: js/views/view.contact.js – Now that you have the new fields in the HTML you need to send the values to the PHP file:

(js/views/view.contact.js)

Code:

data: {
	name: $form.find('#name').val(),
	email: $form.find('#email').val(),
	subject: $form.find('#subject').val(),	
	
	textSample: $form.find('#textSample').val(),
	selectSample: $form.find('#selectSample').val(),
	checkboxesSample: $form.find('input[name="checkboxesSample[]"]:checked').map(function() { return $(this).val().toString(); } ).get().join(","),
	radiosSample: $form.find('input[name="radiosSample"]:checked').val(),					
	
	message: $form.find('#message').val()
},

– Get Field Value:

textSample: $form.find('#textSample').val(),

(Where “textSample” is the variable that is sent to the PHP file and “(‘#textSample’)” is the field ID)

– Get Select Value:

selectSample: $form.find('#selectSample').val(),

– Get Checkboxes Value:

checkboxesSample: $form.find('input[name="checkboxesSample[]"]:checked').map(function() { return $(this).val().toString(); } ).get().join(","),

– Get Radios Value:

radiosSample: $form.find('input[name="radiosSample"]:checked').val(),

3) PHP: php/contact-form.php – Send the E-mail.

Now you need to receive the values and send the message, for that you only need to include the new fields in the “fields” array:

Code:

$fields = array(
	0 => array(
		'text' => 'Name',
		'val' => $_POST['name']
	),
	1 => array(
		'text' => 'Email address',
		'val' => $_POST['email']
	),
	2 => array(
		'text' => 'Message',
		'val' => $_POST['message']
	),
	3 => array(
		'text' => 'Text Sample',
		'val' => $_POST['textSample']
	),
	4 => array(
		'text' => 'Select Sample',
		'val' => $_POST['selectSample']
	),
	5 => array(
		'text' => 'Checkboxes Sample',
		'val' => $_POST['checkboxesSample']
	),
	6 => array(
		'text' => 'Radios Sample',
		'val' => $_POST['radiosSample']
	)
);

---

[Author]

Posts