Osolink Step Navigation for CF7 – Tutorial

Pre Requisite

1.) Make sure that Contact form 7 plugin is properly installed to your word-press site. Otherwise, please visit link and install Contact form 7 plugin.

 

Contact form 7

 

2.) Contact form 7 needs to be activate

 

Contact form 7 needs to be activate

 

Building Contact Form

1.) Under admin left sidebar, Find Contact tab and click.

 

Under admin left sidebar

 

2.) Click the form tab.

Click the form tab

 

3.) Start building your form. Create a <div>tag. This tag serve as your step 1 navigation. You may copy paste the code below.

<div class=”panel active” data-labelnext=”Go” data-labelprev=”Back” data-steplabel=”Personal”>
<!-- Paste your code for step 1 fields -->
</div>

 

 Start building your form. Create a div tag

 

4.) Create another <div> tag. This tag serve as your step 2 navigation. You may copy paste the code below.

<div class=”panel” data-labelnext=”Next” data-labelprev=”Previous” data-steplabel=”Address”>
<!-- Paste your code for step 2 fields -->
</div>

 

This tag serve as your step 2 navigation

 

5.) Create another <div> tag. This tag serve as your step 3 navigation. You may copy paste the code below.

<div class=”panel” data-labelnext=”Ok” data-labelprev=”Go Back” data-steplabel=”Message”>
<!-- Paste your code for step 3 fields -->
</div>

 

This tag serve as your step 3 navigation

 

 

6.) Create another <div> tag. This tag serve as your Success Step. You may copy paste the code below.

<div class=”success-panel”>
<!-- Paste your code for success step -->
</div>

This tag serve as your Success Step

 

7.) For complete code, copy and paste the code here.

 

Configuration

1.) Under admin left sidebar, Find Oso-SNCF7 tab and click.

 

Under admin left sidebar, Find Oso-SNCF7 tab and click

 

2.) Use ‘Form ID’ Drop down to select your desired Form template

 

Use ‘Form ID’ Drop down to select your desired Form template

 

3.) ‘Step Label’ Text Field is used to Replace the default Step Label Text

 

‘Step Label’ Text Field is used to Replace the default Step Label Text

 

‘Step Label’ Text Field is used to Replace the default Step Label Text

 

4.) ‘Previous Button HTML’ Text Field is used to replace Previous button form with the Field value.

 

‘Previous Button HTML’ Text Field is used to replace Previous button form with the Field value

 

‘Previous Button HTML’ Text Field is used to replace Previous button form with the Field value

 

 

 

5.) ‘Next Button HTML’ Text Field is used to replace the Next button form with the Field value.

 

 

 

6.) ‘Custom Form Class’ Text Field is used to add class in form tag.

 

 

 

7.) ‘Button Color’ is used to select/change the color of form buttons.

 

 

 

8.) ‘Button Hover Color’ is used to select/change the color of form buttons when hover.

 

 

 

 

9.) ‘Form Animation’ is used to select/change the animated transition of the form.

 

 

Click the link to preview Form Animation demo.

 

10.) ‘Form Template’ is used to select/change the form template style or design.

 

 

 

11.) ‘Form Styles’ Text-Area is the preview of the template css style.

Page Content

1.) Pre Requisite

2.) Building Contact Form

3.) Configuration

Copyright © 2020 OSO Advance Modules. All rights reserved.