<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 the form is added, here will be created the new form shortcode. This shortcode can be copied and pasted everywhere you wish to display the 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>Recipient's Email</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>On submitting this form, its data will be sent to the email provided in the recipient'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>If something goes wrong with the form submission this message will be shown on the 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 choose the template of the form by selecting one of the options from the drop-down field.</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 drop-down.</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">Information About Fields</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>Submissions tab displays 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>Shortcodes can be copied and used for displaying the forms anywhere on your website.</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>By clicking this button, you can import a form file from 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 to CSV</h4>
                    </div>
                    <div class="col-sm-8">
                        <p>By clicking on 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>By clicking on 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 the drop down list to which you want to apply the custom style.</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>If you select this option, all styles set in this section for a particular 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 -->