Currently, the form has the options for Name, email ID, phone number, Subject, and Message. For most use cases, this form is more than enough. However, you can create a custom form with HTML and CSS Coding.



You can connect Freshdesk with your account to get the updates there or the information will be available under the Contact Section in the dashboard. To learn how to integrate Freshdesk which is a highly recommended free CRM solution, read here: Freshdesk Integration



In this tutorial, you will find the steps to create a contact form that will have the options for address, qualifications, and other options for learners. Please follow the steps listed below to create a contact form. A sample image has been shared below to share how it will look like.



Step 1: Add a contact section on the page builder from the Section Library by clicking on the +Section button at the bottom center of the page. This option is made available when you are in the Edit mode. 



Step 2: Click on the blue HTML Icon to access the code section



In the pop up, you would see this code. Simply delete the entire code.


Now replace the code of that snippet (which you got with section), and use below code:

<div class="col-md-12">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="frmcontactsection" method="post" novalidate="novalidate">
<div class="card card-plain">
<div class="card-header">
<h2 class="size-40" style="margin:0.2em 0">CUSTOM FORM</h2>
</div>
<div class="card-body">
<section class="contact-form-group">
<div class="form-group text-left">
<label for="csubject">Subject</label>
<input type="text" class="form-control" id="csubject" name="csubject" placeholder="Subject" required="">
</div>
<div class="form-group text-left">
<label for="cname">Name</label>
<input type="text" class="form-control" id="cname" name="cname" placeholder="Enter Name" required="">
</div>
<div class="form-group text-left">
<label for="cemail">Email</label>
<input type="email" class="form-control" id="cemail" name="cemail" placeholder="Enter Email" required="">
</div>
<div class="form-group text-left">
<label for="cphone">Phone</label>
<input type="tel" class="form-control" id="cphone" name="cphone" placeholder="Enter Number" required="">
</div>
<div class="form-group text-left">
<label for="Address">Address</label>
<input type="text" class="form-control" id="Address" name="Address" placeholder="Enter Address">
</div>
<div class="form-group text-left">
<label for="Qualification">Qualification</label>
<select class="form-control" id="Qualification" name="Qualification">
<option value="Qualification 1">Qualification 1</option>
<option value="Qualification 2">Qualification 2</option>
</select>
</div>
<div class="form-group text-left">
<label>Major</label>
<br />
<label class="radio-inline">
<input type="radio" name="Major" value="Arts" checked> Arts
</label>
<label class="radio-inline">
<input type="radio" name="Major" value="Science"> Science
</label>
<label class="radio-inline">
<input type="radio" name="Major" value="Commerce"> Commerce
</label>
</div>
<div class="form-group text-left">
<label for="cmessage">Message</label>
<textarea class="form-control" rows="5" id="cmessage" name="cmessage"></textarea>
</div>
<button type="button" class="btn btn-primary btncontactsection" title="Submit">Submit</button>

<div style="margin-top: 15px;">
<label id="csresponse" style="color:green;display:none;"></label>
</div>
<div style="margin-top: 15px;">
<label id="cfresponse" style="color:red;display:none;"></label>
</div>
</section>
</div>
</div>
</form>
</div>

Step 3. You will find the following contact form as shown below and you can now it the way you want.





Step 4. When the user submits this form, the data is pushed to Freshdesk channel if it's already integrated or will be display in the dashboard under the Contact Section.

Freshdesk Integration