Step Wizard Form
Step Wizard Form
Introduction
- Item Name : Step Wizard Form
- Item Version : v 1.0
First of all, Thank you so much for purchasing this template and for being my loyal customer.
You are awesome!
You will get the support in time. You will be happy to hear that It may take no longer than one day. We always try to support you as fast as we can. Our cutomers are our main priority.
This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here and here.
Requirements
You will need the following sofwares to customize this template.
- Code Editing Software (eg: Brackets, Sublime Text or Notepad)
- Web Browser for testing (eg: Google Chrome or Mozilla Firefox)
- FTP Tool to upload files to Server (eg: FileZilla)
Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.
Getting Started #back to top
Step Add/Remove #back to top
Step Add / Remove - #back to top
If you Want Add or Remove step just clone this area or cut off this area. And you can add multi step form link this.
...
...
...
...
...
Animation Changes Option - #back to top
If you Want change animation - Follow this.
Just change here
data-animation="slideHorz"
By default you can use - scaleOut, slideHorz, slideVert, fadeIn, scaleIn
data-animation="scaleOut"
data-animation="fadeIn"
You can use animate css effect as well, visit https://animate.style/
To use animate css follow this --
data-animation="animate__bounce"
data-animation="animate__bounceInLeft"
data-animation="animate__swing"
Color Changes Option - #back to top
If you Want Color change- Follow this.
Open scss/template.scss scss folder then pick your color code and comile scss to css or you can directly change inside css/style.css file
/*=========
Color Code
===========*/
$bage-bg: #f6f8fc;
$body-color: #2f3146;
$base-color: #7650e0;
$color-primary: #000;
$color-secondary: #fff;
$color-white: #fff;
$color-blackis: #1a1a1a;
$btn-circle-decor-dimensions: 50px;
Form Validation #back to top
To validate form use "required" attribute or use .required class. You can visit for more about validation - https://github.com/jquery-validation/jquery-validation or https://jqueryvalidation.org/
Script #back to top
Note: Please check it carefully. any wronge information cause fatal error. Better try locally then upload into server
Open connect.php connect with your database details. (JobV.1 Folder) We showing with 1 file. others application you should follow like this.
public function __construct()
{
$this->conn=new mysqli("localhost","USER","PASS","DBNAME") or die("connetion error!"); // please change with your mysql detail
}
public function Insert($job_title,$first_name,$last_name,$email,$phone,$country_list,$city_list,$gender,$address,$position_list,$add_info,$upload, $upload_tmp, $upload_size, $table)
{
$filename = $upload;
//upload file
if($filename != '')
{
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$allowed = ['pdf', 'txt', 'doc', 'docx', 'png', 'jpg', 'jpeg', 'gif'];
//check if file type is valid
if (!in_array($ext, $allowed)) {
echo "You file extension must be .zip, .pdf, jpg, png, gif, doc or .docx";
} elseif ($upload_size > 1000000) {
return "File too large!";
} else {
//set target directory
$path = 'uploads/';
// get last record id
$sql = "SELECT max(id) as id from $table";
$result = mysqli_query($this->conn, $sql);
if ($result)
{
$row = mysqli_fetch_array($result);
$filename = ($row['id']+1) . '-' . $filename;
}
else
$filename = '1' . '-' . $filename;
$created = @date('Y-m-d H:i:s');
// get email
$sql = "SELECT * FROM $table WHERE email='$email'";
$res=mysqli_query($this->conn,$sql);
if (mysqli_num_rows($res) > 0) {
$row = mysqli_fetch_assoc($res);
if($email==$row['email'])
{
echo "Email already exists";
return false;
}
} else {
if(move_uploaded_file($upload_tmp,($path . $filename)) ) {
mysqli_query($this->conn,"INSERT INTO $table SET job_title='$job_title', first_name='$first_name', last_name='$last_name', email='$email', phone='$phone', country_list='$country_list', city_list='$city_list', gender='$gender', address='$address', position_list='$position_list', add_info='$add_info', resume='$filename', created='$created'" ) or die(mysqli_error($this->conn));
return true;
} else {
echo "fail to upload";
}
}
}
}
}
Here
$job_title,$first_name,$last_name,$email,$phone,$country_list,$city_list,$gender,$address,$position_list,$add_info,$upload, $upload_tmp, $upload_size
add variation is form name field. see JobV.1. See Name="job_title"
see action.php
$job_title = $_POST['job_title'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$country_list = $_POST['country_list'];
$city_list = $_POST['city_list'];
$gender = $_POST['gender'];
$address = $_POST['address'];
$position_list = $_POST['position_list'];
$add_info = $_POST['add_info'];
$upload = $_FILES['file_upload']['name'];
$upload_tmp = $_FILES['file_upload']['tmp_name'];
$upload_size = $_FILES['file_upload']['size'];
and then we insert this value by following function. see at the bottom of action.php
if(isset($_REQUEST['submit'])){
//data insert
extract($_REQUEST);
if($obj->Insert($job_title,$first_name ....
HOPE you understand.
Mail #back to top
Open action.php file or create a mail.php file and paste following code on it.
Note: Please check it carefully. Here you can redirect thank you page as well. See line 39
include 'connect.php';
$job_title = $_POST['job_title'];
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$country_list = $_POST['country_list'];
$city_list = $_POST['city_list'];
$gender = $_POST['gender'];
$address = $_POST['address'];
$position_list = $_POST['position_list'];
$add_info = $_POST['add_info'];
$upload = $_FILES['file_upload']['name'];
$upload_tmp = $_FILES['file_upload']['tmp_name'];
$upload_size = $_FILES['file_upload']['size'];
// etc
/**
* For mail fuction
*/
$to = 'dontal@xkx.me'; // change here
$subject = 'Your Service Details'; // change here
$from = 'noreply@noreply.com'; // change here
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Create email headers
$headers .= 'From: '.$from."\r\n".
'Reply-To: '.$from."\r\n" .
'X-Mailer: PHP/' . phpversion();
// Compose a simple HTML email message
$message = '';
$message .= 'You are register for '.$job_title.'
';
$message .= 'Hi '.$first_name.'!
';
$message .= 'Last Name: '.$last_name.'
';
$message .= 'Email: '.$email.'
';
$message .= 'Phone: '.$phone.'
';
$message .= 'Country: '.$country_list.'
';
$message .= 'City: '.$city_list.'
';
$message .= 'Gender: '.$gender.'
';
$message .= 'Address: '.$address.'
';
$message .= 'Position: '.$position_list.'
';
$message .= 'Additional Info: '.$add_info.'
';
$message .= '';
// Sending email
if(isset($_REQUEST['submit'])){
//data insert
extract($_REQUEST);
if($obj->Insert($job_title,$first_name,$last_name,$email,$phone,$country_list,$city_list,$gender,$address,$position_list,$add_info,$upload, $upload_tmp, $upload_size, "job_application")){
//mail
if (mail($to, $subject, $message, $headers)) {
echo 'Your mail has been sent successfully.';
} else {
echo 'Unable to send email. Please try again.';
}
// echo 'Data inserted';
header('location:view.php');
}
}
Thank you page or other redirection page set up. #back to top
Open action.php at the bottom you will see header('Location: ... change here
How to store data in google drive with spreadsheet #back to top
Create a folder in google drive. Open that folder and make another folder into it.
Create Spread sheet > Click New >> More >> Google Apps Script
Make fields - Spreadsheed overview
You have to follow your html's name field. It must same name. For example- Here namefield full_name then spreadsheet field must be full_name
Write code - Go Tools >> script editor
In download package your will get code.gs. just copy and paste it here. Now you have to change littlebit.
- Line 2 : Email address change
- Line 49 : Spreadsheed Id (see Spreadsheed overview
red mark 1) like - 1bNVGpo..RQ58wfOTxGsQBBR...
function record_data(e,fileUrl) {
try {
/*var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));*/
var doc = SpreadsheetApp.openById("your spreadsheet id"); // change here
var sheet = doc.getSheets()[0];
Line 84 , Documents you have to change with your folder name.
function uploadFileToGoogleDrive(data, file, name, email,e) {
try {
var dropbox = "Documents"; //your dropbox folder where pdf, jpg will store
var folder, folders = DriveApp.getFoldersByName(dropbox);
Now Use this link in the form action and make method POST
And In submit button use -- onclick="UploadFile();" or you can modify the js code.