Documentation

QUOTARE - Multipurpose Quotation HTML Request Wizard Form

Thank you so much for purchasing our item from Themeforest.

If you have any questions that are beyond the scope of this help file, Please contact us via Support Tab.

Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server (that support PHP) using FTP (suggested FTP client Filezilla) or localhost in order to use it on your website and of course after your edits.
2. Below is the folder structure and needs to be uploaded to your website or localhost root directory:
   • html - Contains all of the assets referenced
     • css - Stylesheet files
     • img - Images files
     • js - Javacript files
     • phpmailer - Php files for the forms
     • sass - Sass files
   • html/index.html - Homepage

CSS Structure

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 Page backgrounds
  - 1.4 Structure
  
2. CONTENT

- 2.1 Wizard
- 2.2 Contact page
3. COMMON

- 3.1 Misc
- 3.2 Input forms
- 3.3 Float Labels
- 3.4 Spacing
- 3.5 Success submit

Javascript Structure

This theme use these Javascript (minified versions included). i've included 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).

js/common_scripts_min.js content:

• jQuery Library
• Boostrap.js
• Jquery UI
• Jquery Validation
• Input Range Slider

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - html/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder.

Common settings/edits

If you need a little help editing the template, check out Tuts+ tutorial How to Customize an HTML Template.

Change the logo

To change the logo, simply use your PNG24 file (suggested logo height is 35/40px) or better SVG format. Below how is coded:

<img src="img/logo.svg" alt="" class="img-fluid" width="100" height="35">

Animation on Steps

Please read the comment on css/style.css under the section 2.1 Wizard class "step", if you need to change the animation effect. Available animations:

- fadeIn
- slideInLeft
- slideInRight
- slideInDown
- slideInUp (default)
- zoomIn
- zoomOut
- rotateIn
- bounceIn
- bounceInLeft
- bounceInRight
- bounceInDown
- bounceInUp
- flipInX
- flipInY

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 input element. To change the error message text go to js/common_script.js and under the section jQuery Validation Plugin change the default messages, then recreate the minfied version.

messages: {
		required: "Required",
		remote: "Please fix this field.",
		email: "Wrong email.",
		url: "Please enter a valid URL.",
		.....
	},

Understand the logic of checkboxes

Taking as version with checkboxes, the name of the input has to be the same with at the end []
(in this example name="name_1[]").

The "id" and "for" name must match and differ for each checkbox options (name_1_opt_1, name_1_opt_2, etc....)

<div class="checkbox_radio_container">
<input type="checkbox" id="name_1_opt_1" name="name_1[]" class="required" value="Google and Search Engines">
<label class="checkbox" for="name_1_opt_1"></label>
<label for="name_1_opt_1" class="wrapper">Custom interface and layout</label>
</div>
 
<div class="checkbox_radio_container">
<input type="checkbox" id="name_1_opt_2" name="name_1[]" class="required" value="Emails or Newsletter">
<label class="checkbox" for="name_1_opt_2"></label>
<label for="name_1_opt_2" class="wrapper">Web site design</label>
</div>
.......

Below an example how the input name (name="name_1[]") is declared in the PHP file.

$message .= "What your poject need?<br />" ;
foreach($_POST[name_1] as $value) 
	{ 
$message .=   "- " .  trim(stripslashes($value)) . "<br />"; 
};

Understand the logic of Conditional Answer (Advanced)

Each targeted step is defined by the class="branch" , the input value as the branch step id. Below a quick example:

<!-- /Start Branch ============================== -->
 <div class="step" data-state="branchtype">
   <input id="wordpress" type="radio" name="product_opt" value="Wordpress" class="required">
   <input id="wordpress" type="radio" name="product_opt" value="Shopify" class="required">
</div>
<!-- /Step start branch -->

<!-- Wordpress branch ============================== -->
<div class="branch" id="Wordpress">
   <div class="step" data-state="personal_details">
    ....
    </div>
</div>
 <!-- /Wordpress branch ============================== -->

<!-- Shopify branch ============================== -->
<div class="branch" id="Shopify">
   <div class="step" data-state="personal_details">
    ....
    </div>
</div>
 <!-- /Shopify branch ============================== -->

data-state="personal_details" define the target to reach once a branch step has completed.

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 (for wizard_func_1.js, etc...). 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="">

jQuery(function ($) {
"use strict";
// Chose here which method to send the email, available:
// PHPmailer text/html > phpmailer/send_email_1.php
// PHPmailer with html template > phpmailer/send_email_1_template.php
// PHPmailer with html template SMTP> phpmailer/send_email_1_template_smpt.php

$mail->setFrom('info@yourdomain.com', 'Message from Quotare); // Email Address and Name FROM
$mail->addAddress('jhon@yourdomain.com', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('noreply@yourdomain.com', 'Survey from Quotare); // Email Address and Name NOREPLY
$mail->Subject = Message from Quotare;  // Email Subject   

$mail->Host       = 'hostname'; // Set the SMTP server to send through
$mail->Username   = 'username'; // SMTP username
$mail->Password   = 'password'; // SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port       = 587; // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above