Documentation by “Ansonika” v2.0

“NEW MASTENIA V 2.0 - HTML Form Wizard”

Last update: 25 September 2023
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 files
  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!!
Every type of company can create Registration, Reservation, Questionnaire or Reviews Wizard formsin 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 4 demo versions with 4 different color schemes.

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/front page
- 2.2 Other pages

3. COMMON
- 3.1 Spacing
- 3.2 Owl carousel
- 3.3 Misc
- 3.4 Succes submit

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 45px).

Color schemes
The item comes with 4 premade color schemes:

Just simply add the color scheme css file as last css in order to override the default
color, like the example below.

<!-- BASE CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/icon_fonts/css/all_icons_min.css" rel="stylesheet">
<link href="css/skins/square/grey.css" rel="stylesheet">
	
<!-- COLOR CSS -->
<link href="css/color_3.css" rel="stylesheet">

Add an input field into sing up form first step
1) Add you field.

2) Apply the proper name to the input (<input type="text" name="new_field">)

3) Call validation/error messages for the new field if required: open js/sign-up-validate.js and look the example below in bold:

rules: {
            'firstname': 'required',
            'lastname': 'required',
            'email': 'required',
            'telephone': 'required',
			'new field':	'required',
            'address': 'required',
            'city': 'required',
            'zip_code': 'required',
            'country': 'required',
            'terms': 'required' // BE CAREFUL: last has no comma
        },
        messages: {
            'firstname': { required: 'Name required' },
            'lastname': { required: 'Last name required' },
            'email': { required: 'Invalid e-mail!' },
            'telephone': { required: 'Telephone required' },
			'new_field':	{ required:  'New field required!' },
            'address': { required: 'Address required' },
            'city': { required: 'City required' },
            'zip_code': { required: 'Zip code required' },
            'country': { required: 'Country required' },
            'terms': { required: 'Please accept terms' },
        },

4) Then open phpmailer/registration_phpmailer_template.php and follow the instructions/example below:

//The email body message

	$message = "<strong>Details</strong><br />";
    $message .= "First name: " . $_POST['firstname'] . "<br />";
    $message .= "Last name: " . $_POST['lastname'] . "<br />";
    $message .= "Email: " . $_POST['email'] . "<br />";
    $message .= "Telephone: " . $_POST['telephone'] . "<br />";
    $message .= "Age: " . $_POST['age'] . "<br />";
    $message .= "Gender: " . $_POST['gender'] . "<br />";
	$message .= "\nNew field title: " . $_POST['new_field'] . "<br />";
    $message .= "<br />Address: " . $_POST['address'] . "<br />";
    $message .= "City: " . $_POST['city'] . "<br />";
    $message .= "Zipcode: " . $_POST['zip_code'] . "<br />";
    $message .= "Country: " . $_POST['country'] . "<br />";
    $message .= "<br />Additional message: " . $_POST['additional_message'] . "<br />";
    $message .= "Terms and conditions accepted: " . $_POST['terms'];

Add one more step
Each step is determined by the fieldset tag...so simply add a fieldset. Use the tag legend to describe your step/tab (Ex. <legend>Personal info</legend>)

 <fieldset title="Step 1">
  ......       
 </fieldset><!-- End Step one -->
        
 <fieldset title="Step 2" >
  ......
 </fieldset><!-- End Step two -->

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

THE GRID
Please refer to this documentation Boostrap

C) PHP files - top

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/sign-up-validate.js, js/review-validate.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 registration version - index.html, but the logic is like the others versions):

jQuery(function ($) {
"use strict";
// Chose here which method to send the email, available:
// Phpmaimer text/html > phpmailer/registration_phpmailer.php
// Phpmaimer text/html SMPT > phpmailer/registration_phpmailer_smtp.php
// PHPmailer with html template > phpmailer/registration_phpmailer_template.php (default)
// PHPmailer with html template SMTP> phpmailer/registration_phpmailer_template_smtp.php
......

PHPMailer

1.1) PHPmailer text/html > phpmailer/registration_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 Mastenia;

1.2) PHPmailer text/html SMPT > phpmailer/registration_phpmailer_smtp.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 (usally Username, 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

1.3) PHPmailer with html template > phpmailer/registration_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)

1.4) PHPmailer with html template SMTP> phpmailer/registration_phpmailer_template_smtp.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="45" height="45" alt="" />

Of course you can change the colors and images according to form version used.

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.

F) UPDATES - top

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