Documentation

IMNO - Participation and Registration Form Wizard

Thank you so much for purchasing our item from themeforest.

Version: 1.0
Author: Mike Ansonika

Created: 8 January, 2023
Last Update: -

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:

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.
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 - Scss 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 Structure
2. CONTENT

- 2.1 Wizard
- 2.2 Success submit
- 2.3 Panel info

3. COMMON

- 3.1 Misc
- 3.2 Forms
- 3.3 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
Jquery.nice-select
ScrollCue.js animation on scroll
Quantity incrementer
Magnific Popup

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

<img src="img/logo.png" alt="" class="img-fluid" width="44" height="44">

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 7831 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 (ex. phpmailer/wedding_phpmailer_template.php)

$message .= "<br />Participation options:<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 with Honeypot

If the hidden input field (id website) is filled by the spam bot the form will be not processed.

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

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 php files located in phpmailer folder . Please change the path to the php available if you need; below a list of version included:

// PHPmailer text/html > phpmailer/wedding_phpmailer.php
// PHPmailer text/html SMPT > phpmailer/wedding_phpmailer_smpt.php
// PHPmailer with html template > phpmailer/wedding_phpmailer_template.php
// PHPmailer with html template SMTP> phpmailer/wedding_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 Imno); // 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 Imno); // Email Address and Name NOREPLY
$mail->Subject = Message from Imno;  // 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 and images in the phphmailer/template-email/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:

Common issues for the forms

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)
3) If your email has to be managed from the same hosting provider or requires special "php headers"

Source & Credits

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

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)

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)

Added More Datepicker examples/options (Read the section Datepicker above)
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)

Update Update the documentation (Checkboxes example)

Version 1.4 (5 May 2022)

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)

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);
}