Documentation

LIMMO - Multipurpose Form Wizard HTML Site template

Thank you so much for purchasing our item from themeforest.


  • Created: 3 September, 2021
  • Last Update: 19 October, 2023

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
      • assets – Files web forms help modal
      • css - Stylesheet files
      • img - Images files
      • js - Javacript files
      • phpmailer - Php files for the forms
      • sass - Sass files
    • html/index.html - Homepage
    • html_rtl - RTL version

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 or play with the scss files included.
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 Datepicker - 3.3 Input forms - 3.4 Spacing - 3.5 Help Modal


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
  • Bootstrap date range picker


Color Schemes

You can change your Website's Color Scheme in an instant. The theme comes with 12 predefined color schemes.

Simply add Color CSS file link it in the Document <head>.
For example for css/color-green.css add this line on every head page after css/custom.css:

Add this line on every head page after custom.css 
<link href="css/color-green.css" rel="stylesheet">

or simply copy the color styles (from example css/color-green.css) in css/custom.css so you don't need to edit every page;

or play with SASS files variables.


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 36/40px) or better SVG format. Below how is coded:

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

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 element. To change the error message text go to js/common_script.js and under the section jQuery Validation Plugin at line 7743 aprox, 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 example quotation.html, as you can see in this group of checkboxes, the name of the input has to be the same with at the end []
(in this example name="question_1[]").

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

<div class="checkbox_radio_container">
<input type="checkbox" id="question_1_opt_1" name="question_1[]" class="required" value="Google and Search Engines">
<label class="checkbox" for="question_1_opt_1"></label>
<label for="question_1_opt_1" class="wrapper">Custom interface and layout</label>
</div>

<div class="checkbox_radio_container">
<input type="checkbox" id="question_1_opt_2" name="question_1[]" class="required" value="Emails or Newsletter">
<label class="checkbox" for="question_1_opt_2"></label>
<label for="question_1_opt_2" class="wrapper">Web site design</label>
</div>
.......

Below an example how the input name (name="question_1[]" > question_1) is declared in the PHP file (phpmailer/quotation_phpmailer_template.php)

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

Below a full example if you need to add a second question with checkboxes: mainly change input name, id and for:

<div class="checkbox_radio_container">
<input type="checkbox" id="question_2_opt_1" name="question_2[]" class="required" value="Your value">
<label class="checkbox" for="question_2_opt_1"></label>
<label for="question_2_opt_1" class="wrapper">Answer 1</label>
</div>

<div class="checkbox_radio_container">
<input type="checkbox" id="question_2_opt_2" name="question_2[]" class="required" value="Your value">
<label class="checkbox" for="question_2_opt_2"></label>
<label for="question_2_opt_2" class="wrapper">Answer 2</label>
</div>
.......
$message .= "Your question?<br />" ;
foreach($_POST['question_2'] as $value)
{
$message .= "- " . trim(stripslashes($value)) . "<br />";
};

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 exampleregistration_wizard_func.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="">

Google API KEY (required for the autocomplete address)

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 additional info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then at the bottom of the page that use the api, add your api key in this line:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"></script>

IMPORTANT! locally the autocomplete does not works, you should apply the api key on the footer page script then upload the site to see it working.

Datepicker

The datepicker support different options: range picker, single picker, days of the week disabled, specific dates disabled, translation, RTL. Below how to switch:

Single datepicker:
- takes as reference the page reservation-single-date-picker.html
- the calendar container is col-md-7
- add the class "single" to the input like the example below

<input type="text" name="dates" id="dates" class="single required" hidden="hidden">

Days of the week disabled:
- add the class "days-disabled" to the input like the example below

<input type="text" name="dates" id="dates" class="days-disabled required" hidden="hidden">
- in js/daterangepicker_func.js in this portion of code you can change whic days
isInvalidDate: function (date) {
return (date.day() == 0 || date.day() == 6); /* Sundays(0) and Saturdays(6) disabled */
},

Specific dates disabled:
- add the class "single-dates-disabled" to the input like the example below

<input type="text" name="dates" id="dates" class="single-dates-disabled required" hidden="hidden">
- in js/daterangepicker_func.js in this portion of code you can change whic dates
isInvalidDate: function (date) {
var formatted = date.format('MM-DD-YY');
return ["10-28-21","10-29-21", "11-28-21","11-29-21", "12-28-21","12-29-21"].indexOf(formatted) > -1;
},

Translation on range datepicker:
- add the class "lang" to the input like the example below

<input type="text" name="dates" id="dates" class="lang required" hidden="hidden">
- in js/daterangepicker_func.js in this portion of code you can translate with your language
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'
]
}

Please refer to this documentation



PHP files

Wizard forms

Note: 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 files located in js folder (for example reservation_wizard_func.js, etc...). Please change the path to the php file as you can see below and explained in the comments:

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

PHPmailer text/html: This version send an email with basic html support on text.

PHPmailer text/html SMPT: 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 (usally Name, Username, Password, Host name, Port, Encryption if required)

PHPmailer with html template: This version is without SMTP and send the message inside an HTML template, (template-email.html) for the main message and for the confirmation page sent to the use who fill the form (confirm.html).

PHPmailer with html template SMTP: This version is like above but with SMTP Authentication.

Common settings (edit recipients)

$mail->setFrom('info@yourdomain.com', 'Message from Limmo); // 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 Limmo); // Email Address and Name NOREPLY
$mail->Subject = Message from Limmo; // Email Subject

SMTP settings (contact your hosting provider, usually need only Host, Username and Password)

$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

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 (without email template).

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



Help form

All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented.

//$address = "HERE your email address";
$address = "info@domain.com";


// Below the subject of the email
$e_subject = 'You\'ve been contacted by ' . $name_contact . '.';

// You can change this if you feel that you need to.
$e_body = "You have been contacted by $name_contact $lastname_contact with additional message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$message_contact\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $lastname_contact via email, $email_contact or via phone $phone_contact";

$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: $email_contact" . PHP_EOL;
$headers .= "Reply-To: $email_contact" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

$user = "$email_contact";
$usersubject = "Thank You";
$userheaders = "From: info@limmo.com\n";
$usermessage = "Thank you for contact LIMMMO. We will reply shortly!";
mail($user,$usersubject,$usermessage,$userheaders);

if(mail($address, $e_subject, $msg, $headers)) {

  // Success message
  echo "
"; echo "Email Sent.
"; echo "Thank you $name_contact,
your message has been submitted. We will contact you shortly."; echo "
"; } else { echo 'ERROR!'; }
Common issues for the help form

Other working forms adopt the same logic and script. If you doesn't recieve the email please first check:

1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the script of help form)
3) If your email has to be managed from the same hosting provider or requires special "php headers"
4) Set the permission of the asset folder on your host to 755 your FTP client


Source & Credits

For the js listed below, you can find more documentation on the relative sites.

Images are not included.


Support

If this documentation doesn't answer your questions, post via Item Support Tab

We are located in GMT +1 time zone and we answer all questions within 24-48 hours working days. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Note: While we aim to provide the best support possible, please keep in mind that it only extends to verified buyers and only to issues related to our template according to Envato Support Terms. Custom modifications or third party module implementations are not included.

Don’t forget to Rate this template

Please Add your Review (Opinion) for Our template. It would be a great support for us.
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.

More Templates

Checkout Our Below Premium Templates

Our Portfolio


Updates

See what's new added, changed, fixed, improved or updated in the latest versions and how to update from previous version.

For Future Updates Follow Us @themeforest / @behance / @Dribbble

Version 1.1 (14 September 2021)

  1. Added Animation on each step
How to update from previous version

1. Update the following files: - css/vendors.css + css/style.css(new class ".step" 2.1 Wizard)


Version 1.2 (1 October 2021)

  1. Added More Datepicker examples/options (Read the section Datepicker above)
  2. Fixed Datepicker current date style (that seems selected)
How to update from previous version

Update the following files: js/daterangepicker_func.js + css/style.css (Section 3.2 Datepicker)


Version 1.3 (3 Febraury 2022)

  1. Update Update the documentation (Checkboxes example)

Version 1.4 (5 May 2022)

  1. Update Bootstrap Library V.5.1.3
How to update from previous version

Update the following files (same for RTL version): css/bootstrap.css + css/bootstrap.min.css + js/common_scripts.js + js/common_scripts.min.js


Version 1.5 (8 August 2022)

  1. Fixed Removed "get_magic_quotes_gpc" php function deprecated for latest PHP versions
How to update from previous version

Update the following files (same for the RTL version): assets/help.php or delete the following lines of code

if(get_magic_quotes_gpc()) {
	$message_contact = stripslashes($message_contact);
}


Version 1.6 (7 November 2022)

  1. Update Bootstrap Library V.5.2.2
How to update from previous version

Update the following files (same for RTL version): css/bootstrap.css + css/bootstrap.min.css + js/common_scripts.js + js/common_scripts.min.js


Version 1.7 (25 January 2023)

  1. UpdatedjQuery Library V.3.6.3
How to update from previous version

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


Version 1.8 (11 April 2023)

  1. Update Bootstrap Library V.5.2.3
  2. Update jQuery Library V.3.6.4
How to update from previous version

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 following files (same for RTL version): js/common_scripts.js + js/common_scripts.min.js


Version 1.9 (19 July 2023)

  1. Update jQuery Library V.3.7.0
How to update from previous version

1. Update the following files (same for RTL version):js/common_scripts.js + js/common_scripts.min.js


Version 2.0 (19 Ocotber 2023)

  1. Update jQuery Library V.3.7.1
How to update from previous version

1. Update the following files (same for RTL version):js/common_scripts.js + js/common_scripts.min.js