You can customize form the way you want, you need to know HTML and CSS (Bootstrap 3), if you don't know, don't worry we will provide few samples for you.


In this tutorial you will find steps to create a contact form which will have address, qualification and major selection for learners. Please follow the steps to create a contact form which will look like below:



Step 1. Add a contact section on page builder


Step 2. 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="cresponse" style="color:red;display:none;"></label>
                    </div>
                </section>
            </div>
        </div>
    </form>
</div>


Step 3. You will find following contact form, now you can customize is the way you want.


Step 4. When user submit this form, we push data to freshdesk channel if integrated or we will display it on dashboard contact page.


Step 5. Different samples for custom form - coming soon