Created: 12 November 2018
Last update: 17 June 2024
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!
It's based on Boostrap framework grid. It's ULTRA RESPONSIVE!!
very type of company can create Survey, Quotation, Review or Registration 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, range slider. The results will be sent via email and confirmation email is sent to the user who fill the form. At the moment comes with 4 demo versions.
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 Wizard
- 2.2 Success submit
- 2.3 Inner pages
3. COMMON
- 3.1 Misc
- 3.2 Spacing
Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 35px). Below how is coded
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 4957 aprox, then recreate the minfied version.
Add one more questions with checkbox answer
Open the HTML page (let's take an example quotation-wizard-version.html). 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 class="container_check version_2">Custom interface and layout <input type="checkbox" value="Custom interface and layout" name="question_1[]" class="required" onchange="getVals(this, 'question_1');"> </label>
</div>
<div class="form-group">
<label class="container_check version_2">Web site design <input type="checkbox" value="Web" name="question_1[]" class="required" onchange="getVals(this, 'question_1');"> </label>
</div> $message .= "\n1) Question?\n" ;
foreach($_POST['question_1'] 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="">
How summary step works:
Every input field must have onchange="getVals(this, 'question_1');" where "question_1" correspond to the input field name (just only and exception for the textarea that have onkeyup="getVals(this, 'question_1');) Then in the summary step the id <p id="question_1"></p> Open for example survey_func.js case 'question_1': (--> input name)
// Get the value for a radio
var value = $(formControl).val();
$("#question_1").text(value); (--> id where the input value where displaied in the html )
break; Same logic can be applied for every type of input, except for the checkbox type that have an array: case 'question_2': // Get name for set of checkboxes var checkboxName = $(formControl).attr('name'); // Get all checked checkboxes var value = [];
$("input[name*='" + checkboxName + "']").each(function () {
// Get all checked checboxes in an array
if (jQuery(this).is(":checked")) {
value.push($(this).val()); } }); $("#question_2").text(value.join(", ")); break;
Datepicker
The item comes with a date picker; it support single datepicker or date range picker, translation and RTL. We provide 3 examples in js/functions.js. How date picker works:
Just add the one of this classes (.date-pick-single, .date-pick-single-lang, .date-pick-range) to and input text field as the example below <input type="text" name="date" class="date-pick-single form-control" placeholder="Date"> In js/functions.j there are 3 examples just to have a reference if you need differnts options enabled (true/false), settings or traslations // Date picker single
$('input.date-pick-single').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
autoApply: true,
minDate: new Date(),
showCustomRangeLabel: false,
locale: {
separator:' > ',
direction: 'ltr',
format: 'MM/DD/YY'
}
}, function (chosen_date) {
$('input.date-pick-single').val(chosen_date.format('MM/DD/YY'));
}); // Date picker single + translation French + european date format
$('input.date-pick-single-lang').daterangepicker({
autoUpdateInput: false,
singleDatePicker: true,
autoApply: true,
minDate: new Date(),
showCustomRangeLabel: false,
locale: {
separator:' > ',
direction: 'ltr',
format: 'DD/MM/YY',
applyLabel: 'Valider',
cancelLabel: 'Annuler',
fromLabel: 'De',
toLabel: 'à',
daysOfWeek: [
'Dim',
'Lun',
'Mar',
'Mer',
'Jeu',
'Ven',
'Sam'
],
monthNames: [
'Janvier',
'Février',
'Mars',
'Avril',
'Mai',
'Juin',
'Juillet',
'Août',
'Septembre',
'Octobre',
'Novembre',
'Décembre'
]
}
}, function (chosen_date) {
$('input.date-pick-single-lang').val(chosen_date.format('DD/MM/YY'));
}); MORE INFO at https://www.daterangepicker.com/
THE GRID
Please refer to this documentation Boostrap
The item mainly use two method to send the email.
We strongly reccomend before to edit the item to test the version that works better on your host based on your needs.
You can change the method via js/survey_func.js, js/quotatin_func.js, etc... Please change the path to the php file as you can see below and explained in the comments (in this example we take the survey version - index.html, but the logi is like the others versions):
jQuery(function ($) {
"use strict";
// Chose here which method to send the email, available:
// Simple phpmail text/plain > survey.php(default)
// PHPmailer text/html > phpmailer/survey_phpmailer.php
// PHPmailer text/html SMPT > phpmailer/survey_phpmailer_smpt.php
// PHPmailer with html template > phpmailer/survey_phpmailer_template.php
// PHPmailer with html template SMTP> phpmailer/survey_phpmailer_template_smpt.php
......
1) PHP mail (Simple phpmail text/plain > survey.php)
Takes as reference the files survey.php This method is supported by the most ISP; rarely requires some changes related to the php mail headers.
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 sender email has to be the same from your 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"
2) PHPMailer
If your host/ISP requires some specials settings, or SMTP Authenticantion or if with the PHPmail method above the email is not delivered...try with PHPMailer method.
2.1) PHPmailer text/html > phpmailer/survey_phpmailer.php: This version send an email with basic html support on text
$mail->setFrom('info@yourdomain.com', 'Message from Wilio'); // 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', 'Message from Wilio'); // Email Address and Name NOREPLY
$mail->Subject = 'Message from Wilio';
2.2) PHPmailer text/html SMPT > phpmailer/survey_phpmailer_smpt.php. This version is like above but with SMTP Authentication. We suggest to contact your host/ISP to get the correct info to set this feature (usallyUsername, Password ,SMTP Server, Port, Encryption if required)
$mail->Host = smtpserver; // 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
plus edit the recipients
2.3) PHPmailer with html template > phpmailer/survey_phpmailer_template.php. This version is without SMTP and send the message inside an HTML template. it's like 2.1 version but with and HTML template (template-email.html) for the main message and for the confirmation page sent to the use who fill the form (confirm.html)
2.4) PHPmailer with html template SMTP> phpmailer/survey_phpmailer_template_smpt.php. This version is like above but with SMTP Authentication, so for the settings view 2.2 paragraph.
NOTE ABOUT THE HTML EMAIL TEMPLATE
The email template has been tested on various email clients (desktop and mobiles). But, maybe you know, it's quite impossible to provide an email template that looks equal on all email clients due they have different supports. The email template degrade nicely to maxime the compatibility. Email Template design it's beyond the scope of this item and support, you can implement with your own or drive to a most simple method to send the email (1, 2.1, 2.2).
Edit the email template with your images
Put your logo in the images folder. To reduce spam issue and email weight, images must be upload on your online site/server and the html looks like the example below:
<img src="http://yourdomain/phpmailer/images/logo.png" border="0" width="54" height="60" alt="" />
COMMON ISSUES WITH SPECIAL CHARACTERS/LANGUAGE USING PHPMAILER
If you encounter issues with language/special characters in the mail received, please add the following lines before the $mail->send();
// Econde UTF 8
$mail->CharSet = 'UTF-8';
Here a related article https://stackoverflow.com/questions/2491475/phpmailer-character-encoding-issues
Do the same for the confirmation email if needed.
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:
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.
HOW TO UPDATE FROM PREVIOUS VERSIONS: Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js, js/common_scripts.min.js
HOW TO UPDATE FROM PREVIOUS VERSIONS 1) Copy and paste the folder css/bs-icon-font 2) Update css/vendors.css 3) Update css/style.css or only the #social styles 4) Update the html code in the pages for #social on top
HOW TO UPDATE FROM PREVIOUS VERSIONS 1) Updated jQuery Library 3.7.1 Update on footer pages this line (and of course copy the relative file from the js folder): <script src="js/jquery-3.7.1.min.js"></script>
HOW TO UPDATE FROM PREVIOUS VERSIONS 1) Updated jQuery Library 3.6.4 Update on footer pages this line (and of course copy the relative file from the js folder): <script src="js/jquery-3.6.4.min.js"></script> 2) Force UTF8 for Special Characters in PHPmailer mail sender method In the phpmailer folder, in the php files, add this line: $mail->CharSet = 'UTF-8'; //Force UTF for special characters before the $mail->send(); Repeat for the confirmation $mail->send(); NOTE: this update is useful for users who use other languages than English or have character issues on the emails received.
HOW TO UPDATE FROM PREVIOUS VERSIONS Updated jQuery Library 3.6.3 1) Update on footer pages this line (and of course copy the relative file from the js folder): <script src="js/jquery-3.6.3.min.js"></script>
HOW TO UPDATE FROM PREVIOUS VERSION 1) Updated Bootstrap Library to 5.2.2: Update the following files: css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.min.js,css/bootstrap-rtl.css, css/bootstrap-rtl.min.css, js/common_scripts_rtl.min.js 2) Updated Jquery Version to 3.6.1: Change on footer pages the link into <script src="js/jquery-3.6.1.min.js"></script>
HOW TO UPDATE FROM PREVIOUS VERSION Update the following files (same for the RTL version): assets/contact.php or delete the following lines of code if(get_magic_quotes_gpc()) { $message_contact = stripslashes($message_contact); }
HOW TO UPDATE FROM PREVIOUS VERSION Updated Bootstrap 1) Update the following files (same for RTL version): css/bootstrap.css, css/bootstrap.min.css, js/common_scripts.js, js/common_scripts.min.js 2) Update the meta tags in the head of the pages 3) Update this class .form-group in css/style.css (same in rtl version)...aprox line 1083 4) Add a class position-relative in div col-9 (header) for the about and contact page 5) For the rtl version update css/extra_rtl_styles.css NOTE: you have to apply some changes in the html code of the page since in BS5 there are small differences. Below a short list(Modals and Toggles > The terms and condition modal) or see here https://getbootstrap.com/docs/5.0/migration/ . We suggest to use Google Developer Console to inspect the code or if needed this usefull tool to compare the files https://www.diffchecker.com/ MODALS (The terms and condition modal) data-toggle > data-bs-toggle data-modal > data-bs-modal data-target > data-bs-target data-dismiss > data-bs-dismiss The code of te close button has been changed too.
HOW TO UPDATE FROM PREVIOUS VERSION 1) Update the following files: css/vendors, css/vendors.unminified.css, js/common_scripts.min.js, js/common_scripts.js 2) Update js/functions.js. New lines of code under comments: // Date picker single // Date picker single + translation French + european date format // Date picker range
HOW TO UPDATE FROM PREVIOUS VERSION 1) Update js/registration_func.js file
HOW TO UPDATE FROM PREVIOUS VERSION 1) Copy the folder phpmailer and see the documentation section above to see how it works
HOW TO UPDATE FROM PREVIUOS VERSION 1) Update the following files - css/bootstrap.css - css/bootstrap.min.css - js/common_scripts.js - js/common_scripts.min.js 2) On footer pages change the jQuery version to <script src="js/jquery-3.5.1.min.js"></script> and copy this file into js folder. 3) Takes as reference the html_rtl folder. Just a note if you need to change the file structure/position: all files are equal to the ltr version except for... - js/bootstrap.bundle.js - js/bootstrap.bundle.min.js - js/common_scripts_rtl.js - js/common_scripts_rtl.min.js - js/functions_rtl.js - js/parallax_rtl.js - js/parallax_rtl.min.js - css/extra_rtl_styles.css - all the html files 4) Update quotation.php from line 78 to 80 if(empty($errors)==true){
move_uploaded_file($file_tmp,"upload_files/".$FinalFilename);
$message .= "\nFile: http://www.yourdomain.com/upload_files/".$FinalFilename; // Write here the path of your upload_files folder
HOW TO FIX FROM PREVIOUS VERSION Please update js/quotation_func.js + quotation.php and in the html: <input type="file" name="fileupload" accept="image/*,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" onchange="getVals(this, 'fileupload');">
HOW TO FIX FROM PREVIOUS VERSION Please update quotation.php file or update the /* FILE UPLOAD */ section
Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.
Ansonika