Documentation by “Ansonika” v1.3

“STEPS - HTML Site template”

Created: 16 December 2017
Last update: 11 December 2018
By: Ansonika

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!
STEPS is an HTML5 site template Wizard with multiple branches support: users view different steps depending on the answers provided. Every wizard have included the PHP email form that send the results, plus a confirmation/summary email to the user who fill the form. The PHP form email script have 2 tecniques to avoid spam (javascript and hoenypot ). The package includes 4 different Wizards: Multiple Branches Wizard, Single Branch Wizard, Wizard without branch and another onve that use images instead of icons. It's MULTIPUPORSE: you can custom for every usage, add how many steps you need, create different branches and nested branches.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. SASS files are included. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Wizard
- 2.2 Success submit
- 2.3 Inner pages

3. COMMON
- 3.1 Input forms
- 3.2 Spacing

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 34px)Below how is coded

LOGO HOME VERSION WITH H1 FOR SEO PURPOSES (change sizes via css if you need in style.css)

<div id="logo_home">
<h1><a href="index.html">STEPS | Multipurpose Working Wizard with Branches</a></h1>
</div>

REMEMBER to create the retina version that have double size of the orginal dimension and name it with _2x
(logo_2x.png).

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24).

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google require an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>


NOTE: if you apply an api key, the map locally does not load. You must upload your site.

Wizard without branch (take as reference index-3.html + form_send_without_branch.php)

Each step is defined by the step class
<div class="step">
	your content....                
</div><!-- end step-->

Last step
<div class="submit step">
	your content....                
</div><!-- end step-->

Wizard with single branch (take as reference index-2.html + form_send_single_branch.php)

In this demo there are 3 branches. Each targeted step is defined by the class="branch",
the input value as the step id. 
Of course is radio based, so you have to give the same input name to the radios.

<div class="step" data-state="branchtype">
<div class="question_title">
<h3>What Type of Project do you need?</h3>
<p>Single Selection with Branch (Radio based)</p>
</div>

<div class="row">
<div class="col-lg-4">
<div class="item">
<input id="answer_1" type="radio" name="branch_group_1" value="Seo-Optimization" class="required">
<label for="answer_1"><img src="img/seo_icon_1.svg" alt="">Seo Optimization</label>
</div>
</div>

<div class="col-lg-4">
<div class="item">
<input id="answer_2" name="branch_group_1" type="radio" value="Web-Development" class="required">
<label for="answer_2"><img src="img/web_development_icon_1.svg" alt="">Web Development</label>
</div>
</div>

<div class="col-lg-4">
<div class="item">
<input id="answer_3" name="branch_group_1" type="radio" value="Design" class="required">
<label for="answer_3"><img src="img/design_icon_1.svg" alt="">Design</label>
</div>
</div>

</div>
<!-- /row-->
</div>
<!-- /Branch What Type of Project ============================== -->

<!-- What Type of Project > Seo-Optimization ============================== -->
<div class="branch" id="Seo-Optimization">
<div class="step" data-state="budget">
....
</div>
</div>

<!-- What Type of Project > Web-Development ============================== -->
<div class="branch" id="Web-Development">
<div class="step" data-state="budget">
....
</div>
</div>

<!-- What Type of Project > Design ============================== -->
<div class="branch" id="Design">
<div class="step" data-state="budget">
....
</div>
</div>

data-state="budget" define the target to reach once this step has completed.

PHP FILE
A particular mention to this script portion

This portion tell to send only the results of the branch selected/checked.
if (isset($_POST['branch_1_answers']) && $_POST['branch_1_answers'] != "")
	{

This portion is a simple checkboxes results. Can be changed with other types of inputs. Read below how checkbox answers works.
	$message.= "\nWhat Type of Seo Optimization do you need:\n";
	foreach($_POST['branch_1_answers'] as $value)
	{
	$message.= "-" . trim(stripslashes($value)) . "\n";
	};

}

Wizard with multi branch (take as reference index.html + form_send_multiple_branch.php)

The logic is quite similar to the single branch version. In this example there are 2 branches, one at the
beginning with 3 branches, the second one is inside the branch step "Web-Development".

<div class="step" data-state="branchtype">

<input id="answer_1" type="radio" name="branch_group_1" value="Seo-Optimization" class="required">
<label for="answer_1"><img src="img/seo_icon_1.svg" alt="">Seo Optimization</label>

<input id="answer_2" name="branch_group_1" type="radio" value="Web-Development" class="required">
<label for="answer_2"><img src="img/web_development_icon_1.svg" alt="">Web Development</label>

<input id="answer_3" name="branch_group_1" type="radio" value="Design" class="required">
<label for="answer_3"><img src="img/design_icon_1.svg" alt="">Design</label>

</div>
<!-- /Branch What Type of Project ============================== -->

<!-- What Type of Project > Seo-Optimization ============================== -->
<div class="branch" id="Seo-Optimization">
<div class="step" data-state="budget">
....
</div>
</div>

<!-- Second branch Web-Development ============================== -->
<div class="branch" id="Web-Development">

<div class="step" data-state="branchtype">

<input id="branch_2_answer_1" type="radio" name="branch_2_group_1" value="HTML-Development" class="required">
<input id="branch_2_answer_2" name="branch_2_group_1" type="radio" value="CMS-Development" class="required">
<input id="branch_2_answer_3" name="branch_2_group_1" type="radio" value="FrontEnd-Development" class="required">

</div>
</div>

<!-- Web-Development > HTML-Development ============================== -->
<div class="branch" id="HTML-Development">
<div class="step" data-state="budget">
...
</div>
</div>

<!-- Web-Development > CMS-Development ============================== -->
<div class="branch" id="CMS-Development">
<div class="step" data-state="budget">
...
</div>
</div>

<!-- Web-Development > FrontEnd-Development ============================== -->
<div class="branch" id="FrontEnd-Development">
<div class="step" data-state="budget">
...
</div>
</div>

Make an input field, select or radio/checkbox required or not.
Simply add or remove the class "required" to the element. To change the error message go to js/common_script.min.js and under the section jQuery Validation Plugin.

Add one more questions with checkbox answer
Open the HTML page. As you can see the name of the input has to be the same with at the end [], each one have a different value. in the example below we add 2 more checkbox questions: 

<h3>Question?</h3> 
<div class="form-group">
<label>
<input name="question_3[]" type="checkbox" value="Answer_1" class="icheck required">
Answer_1
</label>
<label>
<input name="question_3[]" type="checkbox" value="Answer_2" class="icheck required">
Answer_2
</label>
</div>

then in the php file should be:
$message .= "\n2) Question?\n" ;
foreach($_POST['question_3'] as $value) 
{ 
	$message .=   "- " .  trim(stripslashes($value)) . "\n"; 
};

Antispam protection:
spam bots usually disable javascripts to avoid the jquery validation or automatically fill all the input fields and send the email. Now the php submission script link is removed from the html and placed inside the the js script. So if the js will be disabled, the form will be not processed. The js script check also if the hidden input field (id website) is filled by the spam bot...if filled the form will be not processed. 

LEAVE THE HIDDEN INPUT FIELD WEBSITE for the reason above
<input id="website" name="website" type="text" value="">

THE GRID
Please refer to this documentation Boostrap


C) PHP files - top

If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication)
3) If your email has to be managed from the same hosting provider

Main settings:
1) $to = change with your email address
2) Edit the text as you need (\n is equal to a br)
3) DelayRedirect on body tag = increse the value to get more delay on the redirect page
4) window.location = "your redirect page"

D) JavaScript - top

This theme use these Javascript (minified versions included). i've included all the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder). Main js item setting are in main.js file.

common_scripts.min.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

F) Updates - top

Version 1.3 11 December 2018

HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files:
- js/bootstrap.js
- js/bootstrap.min.js
- css/bootstrap.css
- css/bootstrap.min.css
- js/common_scripts.min.js

2) Update css/style.css or remove @import for Google font
Add on every html pages:
<!-- GOOGLE WEB FONT -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

Version 1.2 1 Febraury 2018

HOW TO UPDATE FROM PREVIOUS VERSION:
Open js/function.js and change these lines

/* Form submit loader */
	var $Loader = $('#loader_form');
	 $('form').on('submit',function() {
       $Loader.show(); 
       return true;
     });
	$Loader.on('click',function(){
		$(this).hide();
	});

into

/* Form submit loader */
    $('form').on('submit',function() {
        var form = $("form#wrapped");
        form.validate();
        if (form.valid()) {
            $("#loader_form").fadeIn();
        }
    });

Version 1.1 15 January 2018

HOW TO UPDATE FROM PREVIOUS VERSION:
Update the following file: css/menu.css

Maybe you are interested in




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents