Documentation by “Ansonika” v1.4

“POTENZA - HTML Site template”

Created: 19 March 2020
Last update: 30 August 2021
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 contact form, newsltetter form and plan a visit form
  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 Job Application Forms Wizard or interview in order to speed up the recruitment process. It comes with a file upload feature to collect the Resume pdf or doc of each candidate; it have also nice UI/UX form elements design: radio, checkbox, select, float labels. Branch Wizard Support: user view differen steps based on the answer provided. The results will be sent via email and confirmation email is sent to the user who fill the form. At the moment comes with 3 demo versions.

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 Wizard
- 2.2 Success submit
- 2.3 Inner pages

3. COMMON
- 3.1 Misc
- 3.2 Spacing
- 3.3 Float Labels

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

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. 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="experience_1[]" class="required">
</label>
</div>

<div class="form-group">
<label class="container_check version_2">Web site design
<input type="checkbox" value="Web" name="experience_1[]" class="required">
</label>
</div>

$message .= "\n1) Question?\n" ;
foreach($_POST[experience_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 fileupload feature works: 

In this example we set the filesize limit to 2Mb (first ask to your host which the is the default upload limit)

1) Open js/func_1.js and edit these lines below to validate the file upload to the correct file size limit.

$("form#wrapped")

....

maxFileSize: {
"unit": "MB",
"size": 2
},

2) Open send_email_1.php and edit these line below

if($file_size > 2097152){
$errors[]='File size must be max "2Mb"';
}

Note that the file size must be in bytes; 2Mb=2097152bytes. 
Use this tool to convert the file size param https://www.thecalculator.co/others/File-Size-Converter-69.html

3) On your host upload or create a folder upload_files and with your ftp client set the persmission to 755 for this folder.

How file attachment feature works: 

Takes as reference index-4.html and js/func_4.js to change the version with or without SMTP support(default). Below in the "PHP files" section a short explanation.

Wizard with single branch (take as reference index.html + send_email_1.php)

In this demo there are 3 branches. Each targeted step is defined by the class="branch",
the input value as the step id. 
Of course is radio based, so you have to give the same input name to the radios.

 <!-- /Start Branch ============================== -->
<div class="step" data-state="branchtype">
	                         
<div class="form-group">
<label class="container_radio version_2">Full time availability
<input type="radio" name="availability" value="Full-time" class="required">
<span class="checkmark"></span>
</label>
<label class="container_radio version_2">Part time availability
<input type="radio" name="availability" value="Part-time" class="required">
<span class="checkmark"></span>
</label>
<label class="container_radio version_2">Freelance / Contract availability
<input type="radio" name="availability" value="Freelance-Contract" class="required">
<span class="checkmark"></span>
</label>
</div>
</div>

<!-- /Work Availability > Full-time ============================== -->
<div class="branch" id="Full-time">
  <div class="step" data-state="end">
		...
	</div>
</div>
<!-- /step-->

<!-- /Work Availability > Part-time ============================== -->
<div class="branch" id="Part-time">
  <div class="step" data-state="end">
		...
	</div>
</div>
<!-- /step-->

<!-- /Work Availability > Freelance-Contract ============================== -->
<div class="branch" id="Freelance-contract">
  <div class="step" data-state="end">
		...
	</div>
</div>
<!-- /step-->

data-state="end" define the target of the each step (could be also another intermediate step).


PHP FILE
A particular mention to this script portion

This portion tell to send only the results of if the input has been filled..
if (isset($_POST['minimum_salary_full_time']) && $_POST['minimum_salary_full_time'] != "")
			{
				
			}

This portion is a simple checkboxes results. 
if (isset($_POST['experience_1']) && $_POST['experience_1'] != "")
		{
		$message .= "\nSpecialities:\n";
		foreach($_POST['experience_1'] as $value)
			{
				$message.= "- " . trim(stripslashes($value)) . "\n";
			};
		}

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/func_1.js, js/func_2.js, etc... Please change the path to the relative php file as you can see below and explained in the comments on code (in this example we take the index.html ( js/func_1.js - send_email_1.php), but the logic is like the others versions:

jQuery(function ($) {
"use strict";
// Chose below which method to send the email, available:
// Simple phpmail text/plain > send_email_1.php (default)
// PHPMailer text/html > phpmailer/send_email_1_phpmailer.php
// PHPMailer text/html SMTP > phpmailer/send_email_1_phpmailer_smtp.php
// PHPMailer with html template > phpmailer/send_email_1_phpmailer_template.php
// PHPMailer with html template SMTP > phpmailer/send_email_1_phpmailer_template_smtp.php
......

1) PHP mail (Simple phpmail text/plain > send_email_1.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/send_email_1_phpmailer.php: This version send an email with basic html support on text

//Recipients - main edits
$mail->setFrom('[email protected]', 'Message from POTENZA'); // Email Address and Name FROM
$mail->addAddress('[email protected]', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('[email protected]', 'Message from POTENZA'); // Email Address and Name NOREPLY
$mail->isHTML(true);
$mail->Subject = 'Message from POTENZA'; // Email Subject

2.2) PHPMailer text/html SMTP > phpmailer/send_email_1_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

2.3) PHPMailer with html template > phpmailer/send_email_1_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/send_email_1_phpmailer_template_smtp.php. This version is like above but with SMTP Authentication, so for the settings view 2.2 paragraph.

FILE ATTACHMENT VERSION: based on index.html we create a version that send the file as attachment and not uploaded to your host.
Takes a reference index-4.html and js/func_4.js if you need the SMTP version or not:
// PHPMailer with html file(single) attachment support > phpmailer/send_email_4_file_attachment_phpmailer.php (default)
// PHPMailer with html file(single) attachment support SMTP > phpmailer/send_email_4_file_attachment_phpmailer_smtp.php

If you need to use this feature on other demos just take as refernce send_email_4_file_attachment_phpmailer.php, change //The email body message and leave the /* FILE UPLOAD */ section

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

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

Version 1.4 30 August 2021

Version 1.3 18 February 2021

Version 1.2 17 September 2020

HOW TO UPDATE FROM PREVIOUS VERSION

1) Copy the phpmailer folder and see the documentation section above to see how it works

Version 1.1 31 August 2020

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.

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 form on my profile page with subject [ThemeForest Support] Template name, or via 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