Documentation by “Ansonika” v1.8

“QUOTE - HTML Site template”

Created: 11 jannuary 2017
Last update: 8 Febraury 2020
By: Ansonika

Thank you for purchasing my theme. 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 framework grid. It's ULTRA RESPONSIVE!!
LoveFit is an HTML5 site template suitable for Fitness industry. Quote is an HTML 5 site template. Every type of company can create Quotations or Survey Wizard in order to catch new potential customers and usefull data like contacts, trends, answers or requests. It comes with nice UI/UX form elements design: radio, checkbox, select. The results will be sent via email and confirmation email is sent to the user who fill the form. At the moment comes with 2 demo versions: one with revolution slider and another one with video background. It can be used also as a mini site.

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. Below how the file is organized:

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

2. CONTENT
- 2.1 Home
- 2.2 About
- 2.3 Wizard quote
- 2.4 Contact
- 2.5 Success submit
- 2.6 Shortcodes

3. COMMON
- 3.1 Accordion
- 3.2 Spacing
- 3.3 Owl carousel

4. RESPONSIVE

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" title="Quote">Quote - Request a quote for every type of companies</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.

Home with video background not supported on the last OS IPAD due to bandwith limit/restrictions

1) Save you mp4, webm and ogv video in the media folder. You can convert your mp4 here: 	
http://video.online-convert.com/

Add one more step to the wizard
Each step is defined by a div, so simply duplicate one of them. Below an example of the structure:

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

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.js and under the section jQuery Validation Plugin at line 8812 aprox, then recreate the minfied version.

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 checkbox_questions">
<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="">

File upload version: note that usually hosting providers limit the filesize upload to 20MB or less. We suggest to limit the files size as much as possible.
IMPORTANT: create first the folder in your main host root where the files will be stored, by default named "upload_files" and set the permission folder to 0755. You can change the folder name in the php file. The script automatically check if a file the same name is already present and rename it in order to avoid overwriting. The script send in the email the uploaded file name, in order to recognize and associate which user have upload it. 


SET THE FILE ACCEPT CONTROL HERE (index_3.html)
<input type="file" name="fileupload" accept="image/*,doc,pdf">

FILE TYPE AND SIZE JS VALIDATE CONTROL (js/functions_with_upload.js)
$("form#wrapped")
            .validate({
                rules: {
                    fileupload: {
                        fileType: {
                            types: ["doc", "jpg", "jpeg", "gif", "png", "pdf"]
                        },
                    maxFileSize: {
                        "unit": "KB",
                        "size": 50
                    },
                    minFileSize: {
                        "unit": "KB",
                        "size": "2"
                    }
                }
				}
            });

FOR CUSTOM ERROR MESSAGE PLEASE REFER TO THIS FILE: js/file-validator.js

FILE TYPE AND SIZE PHP CONTROL (quote_send_upload.php)
Please follow the comments in the php code in order to set the file type accepted and the max file size.
Of course they should be the same as set in the html code and js validation.

Branch wizard: user see different steps depending on his answers.
First of all start to work on the correct template version...index_4.html. As you can see each branch is defined by the value on the first step branch and the id. Each branch must have the class="branch". Take care on the last step that is little different.

<div class="step" data-state="branchtype">
<h3 class="main_question"><strong>4/6</strong>Do you need installation service? (start branch):</h3>
<div class="form-group radio_questions">
<label>I need installation service
<input name="branchtype" type="radio" value="I need installation service" id="Installation" class="icheck required">
</label>
</div>
<div class="form-group radio_questions">
<label>I don't need installation service
<input name="branchtype" type="radio" value="I don not need installation service" id="Noinstallation" class="icheck required">
</label>
</div>
</div><!-- end step -->

<div class="branch" id="I need installation service">
<div class="step" data-state="end">

----
</div>
</div><!-- end step -->

<div class="branch" id="I don not need installation service">
<div class="step" data-state="end">

----
</div>
</div><!-- end step -->

<div class="submit step" id="end">
....
</div><!-- end step -->

THE GRID
Please refer to this documentation Boostrap


C) PHP files - top

Below the code of the php file that process and send the email.

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"

SMTP version
NOTE: SMTP version depends by your hosting settings, we suggest to test the smtp send email version before to customize the item. 

HOW TO SET THE SMTP VERSION SEND EMAIL:
1) First choose the wizard page version (ex. index.html or index_2.html, etc...)
2) On footer page change the link path for the corresponding functions: 
example > <script src="js/functions.js"></script> becomes <script src="js/smtp/functions.js"></script>
3) Edit the corresponding php file in the smtp folder following the comments on code

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).

common_scripts.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.

E) Updates - top

Version 1.8 8 February 2020

Version 1.7 3 December 2018

HOW TO FIX FROM PREVIOUS VERSION

Please update quote_send_upload.php file or update the /* FILE UPLOAD */ section

Please update this part of code related to the additional textarea:

if(isset($_POST["addtional_info"]) && trim($_POST["addtional_info"]) != "") {
	$message .= "\nAdditional info: " . $_POST['addtional_info'] . "\n";
}

Version 1.6 10 April 2018

HOW TO UPDATE FROM PREVIOUSE VERSIONS (we reccomend to make a copy of your original files):

1) Update to Bootstrap 4
a) Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/bootstrap.js, js/bootstrap.min.js,
js/common_scripts.js, js/common_scripts_min.js, js/functions.js, js/functions_with_upload.js, 
js/functions_with_branch.js, js/functions_no_side_panel.js

b) Update some classes in the html. Unfortunately there's no easy way to update the theme to BS4 other 
than doing it manually. The differences, mainly in the grid system are explained in this link . 
We suggest to use this tool https://www.diffchecker.com/ and compare the html files with the new ones.

c) Update css/style.css or compare using this tool https://www.diffchecker.com/

2) Update Jquery Version on footer

3) Copy new files in js/smtp and smtp folder

4) Update js/functions.js, js/functions_with_upload.js, js/functions_with_branch.js, 
js/functions_no_side_panel.js or compare using this tool https://www.diffchecker.com/

Version 1.5 11 Fabraury 2018

1) Take as reference index_5.html html code and these changes/new files:
- js/functions_no_side_panel.js
- css/style.css > class #main_container.visible aprox line 361

2) Update common_scripts.js and common_scripts.min.js;
in style.css new section 3.6;
in the html page add these lines

<div id="loader_form">
		<div data-loader="circle-side-2"></div>
	</div><!-- /Loader_form -->

3) In style.css remove this property -ms-overflow-style: none; from the class .wrapper_in (aprox line 242)

Version 1.4 24 November 2017

Version 1.3 23 October 2017

How to update from previous versions:
Open css/style.css aprox line 326 and update this id styles (better to copy from v.1.3)

/* Aside panel */
#main_container {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  width: 90%;
  height: 100%;
  box-sizing: border-box;
  position: fixed;
	top:0;
	right:0;
  background-color: #f8f8f8;
  z-index: 999;
	overflow:visible;
}
#main_container.show {
	-webkit-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	visibility: visible;
	opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

Version 1.2 22 June 2017

How to update from previous versions:

CSS
Check for the new styles in css/style.css under the section "3.4 Fileupload"

NEW FILES
- js/functions_with_upload.js
- js/file-validator.js
- img/upload_icon.svg
- quote_send_upload.php

Version 1.1 14 June 2017

How to fix from previous version of Quote:

In the header of the page change this line of code
<meta name="viewport" content="width=device-width, initial-scale=1">

into
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

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 via the Support Tab on the 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