Home Forums Porto Template FAQ’s How to add fields to the contact form

This topic contains 0 replies, has 1 voice, and was last updated by  Support 5 years, 6 months ago. This post has been viewed 14224 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #454

    Support
    Keymaster

    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']
    	)
    );

Viewing 1 post (of 1 total)