How to customize a contact form on Knorish?

Customizing a contact form is super easy with basic HTML/CSS coding.

Currently, the form has the options for name, email id, phone number, subject, and message fields. 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 on 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, etc for learners. Please follow the steps listed below to create a contact form.

A sample image has been shared to show 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 by switching to 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;">We have received your message and someone from our support team will get back to you soon.</label>
<label id="cfresponse" style="color:red;display:none;">Error occurred while submitting.</label>
</div>
</section>
</div>
</div>
</form>
</div>

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