<div id="fields-details" class="modal fade fields-details content-large">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Fields Details</h4>
        </div>
        <div class="modal-body">
            <ul class="list-unstyled">
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Form Name</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>Type the contact form name here.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even"> 
                    <div class="col-sm-4">
                        <h4>Shortcode</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>Once form is added, here new form shortcode will be created. This shortcode can be copied and pasted everywhere you wish to show form.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Settings</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On click this button will expand further settings related to form.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even">
                    <div class="col-sm-4">
                        <h4>Recepient's Email</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On submitting this form ,its data will be sent to the email id provided in the recepient's email field.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Subject</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>Here you can provide the subject of the form.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even">
                    <div class="col-sm-4">
                        <h4>Success Message</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>This message will be shown at front end when form is being submitted successfully.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Failure Message</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>In case of failure this message will be shown at front end.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even">
                    <div class="col-sm-4">
                        <h4>Select Front-end Template</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>You can select the template of your form by selecting one of the options from dropdown.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Do you want to redirect after form submit?</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>If you want to redirect user to some other url after form submission then you can opt for yes and it will toggle a filed for url address.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even">
                    <div class="col-sm-4">
                        <h4>Label</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>This will be the label of the input filed you will choose.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Input Type</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>You will choose input type from one of the option of dropdown.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                
                <li class="bg-even">
                    <div class="col-sm-4">
                        <h4>Actions</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>You can remove the existing field.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Enter Submit Button Label </h4>
                    </div>
                    <div class="col-sm-8">
                        <p>You can provide custom submit button text.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn default" data-dismiss="modal">Close</button>
            
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /fields-details -->

<div id="fields-details-list" class="modal fade fields-details">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Fields Details</h4>
        </div>
        <div class="modal-body">
            <ul class="list-unstyled">
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Form Name</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>This is the name of the form.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even"> 
                    <div class="col-sm-4">
                        <h4>Submissions</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>This is representing the number of times a form is being submitted.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even"> 
                    <div class="col-sm-4">
                        <h4>Shortcode</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>This shortcode can be copied and pasted everywhere you wish to show form.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Import wpdevart Form</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On clicking this button, you can import form file form an external source.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even">
                    <div class="col-sm-4">
                        <h4>Actions</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>You can edit, delete, duplicate and export the relevant form.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                
              
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn default" data-dismiss="modal">Close</button>
            
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /fields-details -->

<div id="fields-details-submission" class="modal fade fields-details">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Fields Details</h4>
        </div>
        <div class="modal-body">
            <ul class="list-unstyled">
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Export records csv</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On clicking this button all records will be exported to a csv file.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even"> 
                    <div class="col-sm-4">
                        <h4>Delete all submissions</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On clicking this button all records along with their attachments will be deleted.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
              
              
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn default" data-dismiss="modal">Close</button>
            
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /fields-details -->

<div id="fields-details-styling" class="modal fade fields-details">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h4 class="modal-title">Fields Details</h4>
        </div>
        <div class="modal-body">
            <ul class="list-unstyled">
                <li class="bg-odd">
                    <div class="col-sm-4">
                        <h4>Select Form</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>You can select the form from dropdown list on which you want to apply custom styling.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>
                <li class="bg-even"> 
                    <div class="col-sm-4">
                        <h4>Disable Form Styling</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On checking this option all styling set in this section for particluar form will be disabled.</p>
                    </div>
                    <div class="clearfix"></div>
                </li>  
            </ul>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn default" data-dismiss="modal">Close</button>
            
        </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /fields-details -->