Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me from contact form in Profile Page. Thanks so much!
I'm using one index file per form in different folders to be more organized
The HTML Structure is identical in all the forms
<head> <meta charset="utf-8"> <meta name="author" content="InsideLab - Designer Studio and Front-end Web Developer."> <title>Forms - Contact Form</title> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <!-- Favicon --> <link rel="shortcut icon" type="image/ico" href="Images/Favicon.ico"> <!-- Css Styles --> <link rel="stylesheet" type="text/css" href="Css/settings.css"> <!-- Font Link --> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <!-- jQuery from the google apis --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script> <!-- Js Files --> <script type="text/javascript" src="Js/jquery.contact.js"></script> <script type="text/javascript" src="Js/jquery.form.js"></script> </head>
<body>
<div class="container">
<div class="top-form-bar">
<div class="top-bar top-bar-green"></div>
</div>
<div class="contact-form">
<div class="contact-multi-column">
<div class="header">
<div class="column-full">
<h4><i class="icon-support"></i>Send us a Message</h4>
</div>
</div>
<div class="section">
<form method="post" action="php/form.php" id="contact" enctype="multipart/form-data">
<fieldset>
<div class="column-full">
<div id="contact-message"></div>
</div>
<div class="column-half">
<div class="input-group">
<label for="firstname" name="firstname"><i class="icon-user-3"></i></label>
<input type="text" id="firstname" name="firstname" maxlength="30" placeholder="First Name">
</div>
</div>
<div class="column-half">
<div class="input-group">
<label for="lastname" name="lastname"><i class="icon-user-3"></i></label>
<input type="text" id="lastname" name="lastname" maxlength="30" placeholder="Last Name">
</div>
</div>
<div class="column-full">
<div class="input-group">
<label for="useremail" name="useremail"><i class="icon-envelop-opened"></i></label>
<input type="email" id="useremail" name="useremail" maxlength="70" placeholder="Email Address">
</div>
<div class="input-group">
<label for="usersubject" name="usersubject"><i class="icon-checkmark"></i></label>
<input type="text" id="usersubject" name="usersubject" maxlength="50" placeholder="Subject">
</div>
<div class="input-group">
<label for="usermessage" name="usermessage"><i class="icon-bubble-10"></i></label>
<textarea rows="5" id="usermessage" name="usermessage" maxlength="200" placeholder="Enter your Message"></textarea>
</div>
<div class="input-group">
<label for="userfile1"></label>
<span class="button-upload button-blue">Upload</span>
<input type="file" id="userfile1" class="file" name="userfile1" onchange="document.getElementById('fake1').value = this.value;">
<input type="text" id="fake1" placeholder="Please Enter your upload File">
</div>
</div>
<div class="column-half">
<div class="input-group">
<label for="verification"><span class="number-captcha">11 + 7</span></label>
<input type="text" class="captcha" name="verification" maxlength="2" id="verification">
</div>
</div>
<div class="column-half">
<button type="reset" class="button button-small button-red">Reset</button>
<button type="submit" id="send" class="button button-small button-green">Send Message</button>
<div id="loader"></div>
</div>
</fieldset>
</form>
</div>
<div class="footer">
<div class="column-full">
<p>Hey Buddy! Be the first to receive Updates</p>
<p>Subscribe our Newsletter <a href="#">Click here</a>
</div>
</div>
</div>
</div>
</div>
</body>
I'm using one CSS file per form in different folders to be more organized
In Settings css file you can edit evething for you have the forms in your way
In Body you have background image change it if you want
body {
background-image:url(../Images/BG.png);
background-repeat:repeat;
overflow:scroll;
line-height:1;
}
.container {
position:relative;
width:560px;
margin:0 auto;
padding:0;
height:auto;
}
Changes in columns will reflect in dimension and alignments of fields so be careful
.contact-multi-column {
margin:0;
padding:0;
border:none;
outline:none;
}
.contact-multi-column .column-full { width:500px; }
.contact-multi-column .column-half { width:245px; }
.contact-multi-column .column-one-third { width:160px; }
.contact-multi-column .column-fouth { width:117.5px; }
.contact-multi-column .column-fifth { width:92px; }
.contact-multi-column .column-sixth { width:75px; }
.contact-multi-column .column-full,
.contact-multi-column .column-half,
.contact-multi-column .column-one-third,
.contact-multi-column .column-fourth,
.contact-multi-column .column-fifth,
.contact-multi-column .column-sixth{
display:inline-block;
float:left;
margin-left:5px;
margin-right:5px;
}
Change or remove the top bar in form
.top-form-bar {
height:5px;
overflow:hidden;
width:100%;
margin:15px auto 0 auto;
}
.top-form-bar .top-bar{
height:100%;
float:left;
}
.top-bar-green { background-color:#89bf55; width:100%; }
Form Header
.contact-form .header{
padding:30px 25px;
text-align:right;
overflow:hidden;
background-color:#f5f5f5;
border-bottom:1px solid #e5e5e5;
}
.contact-form .header h4 {
text-align:left;
font-style:normal;
font-weight:normal;
font-family:"Open Sans";
font-size:16px;
color:#777;
margin:0;
padding:0;
}
.contact-form .header i {
font-weight:normal;
font-style:normal;
font-size:16px;
color:#777;
margin-right:10px;
vertical-align:baseline;
}
Form Section and input fields
.contact-form .section {
padding:30px 25px;
background-color:#f9f9f9;
}
.contact-form .section .input-group{
position:relative;
display:block;
}
.contact-form .section .input-group input[type="text"],
.contact-form .section .input-group input[type="email"],
.contact-form .section .input-group textarea,
.contact-form .section .input-group input[type="text"].captcha,
.contact-form .section .input-group .number-captcha{
border:1px solid #ccc;
padding:10px;
margin-bottom:10px;
outline:none;
font-family:"Open Sans";
font-size:13px;
color:#999;
box-shadow:none;
font-style:normal;
font-weight:normal;
background-color:#fff;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.contact-form .section .input-group input[type="text"],
.contact-form .section .input-group input[type="email"],
.contact-form .section .input-group textarea{
width:100%;
}
.contact-form .section .input-group input[type="text"]:focus,
.contact-form .section .input-group input[type="email"]:focus,
.contact-form .section .input-group textarea:focus,
.contact-form .section .input-group input[type="text"]:focus.captcha{
border-color:#bbb;
color:#333;
outline:none;
}
.contact-form .section .input-group input[type="text"].captcha,
.contact-form .section .input-group .number-captcha{
width:60px;
text-align:center;
}
.contact-form .section .input-group label i{
position:absolute;
cursor:pointer;
top:13px;
right:20px;
display:block;
color:#aaa;
font-weight:normal;
font-style:normal;
font-size:15px;
vertical-align:baseline;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.contact-form .section .input-group .file{
width:100%;
padding:10px;
position:absolute;
opacity:0;
cursor:pointer;
margin:-2px 0 0 0;
left:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.contact-form .section .input-group span.button-upload {
position:absolute;
float:right;
right:0;
top:0;
font-style:normal;
font-weight:normal;
font-family:"Open Sans";
font-size:14px;
color:#fff;
text-align:center;
cursor:pointer;
padding:14px 30px;
height:40px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.contact-form .section fieldset {
margin:0;
padding:0;
border:0;
}
Notification Messages CSS
.contact-error-message {
display:block;
font-family:"Open Sans";
font-weight:normal;
font-style:normal;
font-size:13px;
background-color:#e0635b;
border:1px solid #c14b44;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
padding:8px 20px;
margin:0 0 10px 0;
color:#fff;
-webkit-font-smoothing:antialiased;
}
.contact-success-message {
display:block;
font-family:"Open Sans";
font-weight:normal;
font-style:normal;
font-size:13px;
background-color:#96aa39;
border:1px solid #7b8b2f;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
padding:8px 20px;
margin:0 0 10px 0;
color:#fff;
-webkit-font-smoothing:antialiased;
}
#contact-message { margin:0; padding:0; }
Loader CSS
.contact-form .section #loader {
background-image:url(../Images/loader.gif);
background-repeat:no-repeat;
background-position:0 0;
margin-top:14px;
margin-left:-20px;
width:16px;
height:16px;
display:none;
}
Form Footer
.contact-form .footer {
padding:30px 25px;
overflow:hidden;
background-color:#f5f5f5;
border-top:1px solid #e5e5e5;
}
.contact-form .footer p {
text-align:left;
font-style:normal;
font-weight:normal;
font-family:"Open Sans";
font-size:11px;
color:#777;
margin:0;
padding:0;
line-height:18px;
}
.contact-form .footer a {
text-align:left;
font-style:normal;
font-weight:normal;
font-family:"Open Sans";
font-size:11px;
text-decoration:none;
color:#777;
}
.contact-form .footer a:hover {
color:#999;
text-decoration:none;
}
The other styles are generic like buttons, responsive code or Icon Font
Tooltipster is for display error messages in client side validation forms
Here you can easily change the tooltip settings like background, color, font or the animations of tooltip
This Item imports some Javascript files for make Ajax Forms Work (Server side).
Jquery Library reduce the amount of Javascript code produced in the theme
Just make sure your include this line of code before any scripts listed below in the head of your html page ( http )
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Just make sure your include this line of code before any scripts listed below in the head of your html page ( https )
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
Jquery Form is a Plugin that make all the process works via ajax and make the forms more easy to use
Just make sure your include this line of code in the head of your html page
In this script you don´t need to change nothing just see time to time if the script is up to date
<script type="text/javascript" src="Js/jquery.form.js"></script>
Jquery Contact, Jquery Feedback and Jquery Newsletter is a custom jquery to call the
form plugin for evething work prefectly
Just make sure your include this line of code in the head of your html page
In this script you don´t need to change nothing unless you are a developer and you need to add more features
Here you can change the errors messages or change the way errors messages are displayed
Add more fields in form and validate them easily just see documentation about jquery validation plugin here
For Contact Form
<script type="text/javascript" src="Js/jquery.contact.js"></script>
For Feedback Form
<script type="text/javascript" src="Js/jquery.feedback.js"></script>
For Newsletter
<script type="text/javascript" src="Js/jquery.newsletter.js"></script>
This client side validation forms have tooltipster to call error messages to user
in this way the forms look awesome
Just include this line of code in head of your html page you can edit easily the look of tooltip in css file
<script type="text/javascript" src="Js/jquery.tooltipster.js"></script>
This two scripts is for validation of fields and call the respective methods
This is the most complete script available for validation of forms i think
Don´t need to changing nothing here just make sure you update that script here
<script type="text/javascript" src="Js/jquery.validate.js"></script> <script type="text/javascript" src="Js/jquery.methods.js"></script>
This item Uses PHP for validation of fields and for send the messages to email
Phpmailer is a mailer class to send in a secure way emails and turn this process more easy to understand
Just make sure your include this line of code in form php file before call he php mailer settings
require "class.autoload.php";
In all the forms you have autoresponder and in contact form you will receive attachments
In Newsletter form you have Mailchimp Integration so you can customize your campaigns easily
Form php file is where all the validation and all the settings for send the email happens
Just make sure your include the correct file in action of form with the correct directory (this is an example)
<form method="post" action="php/form.php" id="feedback">
This is where you add you name
$yourname = "Your Name";
This is where you add the address that receive email
$youremail = "example@example.com";
This is where you add the subject of email
$mailsubject = "Message from your Support Form";
In Contact form you have the possibility to receive emails with attachment
This is the allow types of files that you can upload from contact form you can add here the files that you need
$allow_types = array ('image/pjpeg','image/gif','image/tiff','image/jpeg','image/png','application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/pdf','aplication/xpdf','application/x-rar-compressed','application/zip');
The Files will be uploaded to your server first then will be send email with file in attachment
So be careful with the allow types that you choose like exe files or whatever
For remove files from server automatically after email is send just replace this code in your form php file
if($automail->Send()){
// Email has sent successfully.
echo '<div class="contact-success-message">Congratulations! Your Message has been Send</div>';
}
With this Code
if($automail->Send()){
// Email has sent successfully.
echo '<div class="contact-success-message">Congratulations! Your Message has been Send</div>';
unlink ('../upload/'.$_FILES['file']['name']);
}
This is the Max Size of File that can be uploaded in contact form
If you want add more just make sure your host support it
$max_file_size = 1024 * 1024 *2;
This is where all the validation happens
if (empty($firstname)) {
echo '<div class="contact-error-message">Attention! Please enter your First Name</div>';
}
elseif(empty($lastname)) {
echo '<div class="contact-error-message">Attention! Please enter your Last Name</div>';
}
elseif(empty($useremail)) {
echo '<div class="contact-error-message">Attention! Please enter your Email</div>';
}
elseif(!preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$useremail)){
echo '<div class="contact-error-message">Attention! Enter a valid Email Address</div>';
}
elseif(empty($usersubject)) {
echo '<div class="contact-error-message">Attention! Please enter your Subject</div>';
}
elseif(empty($usermessage)) {
echo '<div class="contact-error-message">Attention! Please enter your Message</div>';
}
elseif(empty($_FILES['userfile1']['name'])){
echo '<div class="contact-error-message">Attention! Please enter your Upload File</div>';
}
elseif(array_search($_FILES['userfile1']['type'], $allow_types) === false) {
echo '<div class="contact-error-message">Attention! Upload Files Allowed are Images & Doc Docx Pdf Rar Zip</div>';
}
elseif($_FILES['userfile1']['size'] > $max_file_size) {
echo '<div class="contact-error-message">Attention! Max size of file is 2048 KB</div>';
}
elseif(empty($verification)) {
echo '<div class="contact-error-message">Attention! Please enter Verification Code</div>';
}
elseif($verification != '18') {
echo '<div class="contact-error-message">Attention! Enter a valid Verification Code</div>';
}
This is where you add your smtp details by default this have 465 port but you can add another
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPAuth = true;
$mail->SMTPSecure = 'ssl';
$mail->Host = 'your-host';
$mail->Port = 465;
$mail->Username = 'your-username';
$mail->Password = 'your-password';
and here is for autoresponder so every time a user contact you he/she receive a confirmation Email
$automail = new PHPMailer();
$automail->IsSMTP();
$automail->SMTPAuth = true;
$automail->SMTPSecure = 'ssl';
$automail->Host = 'your-host';
$automail->Port = 465;
$automail->Username = 'your-username';
$automail->Password = 'your-password';
If you are having trouble with smtp and don´t like it you can use Send Mail
For Send Mail Option Just add your email here and you are ready to go
$youremail = "example@example.com";
If you want use CC or BCC just turn this true overwise turn false
$recipients = false;
if($recipients == true){
$recipients = array(
"example@example.com" => "Person Name",
"example@example.com" => "Person Name",
);
foreach($recipients as $email => $name){
$mail->AddBCC($email, $name);
}
}
This is for random a unique name for attachemnts files so if a two users upload files with same
name it don´t be replaced and you have three random files because you have to have a unique
name for three upload fields that you have in form if you need more just add and follow the sequence
$random_file1 = uniqid();
$random_file2 = uniqid();
$random_file3 = uniqid();
$finalname1 = $random_file1.$_FILES['userfile1']['name'];
$finalname2 = $random_file2.$_FILES['userfile2']['name'];
$finalname3 = $random_file3.$_FILES['userfile3']['name'];
if ($_FILES['userfile1']['error'] == 0 || $_FILES['userfile2']['error'] == 0 || $_FILES['userfile3']['error'] == 0) {
move_uploaded_file($_FILES['userfile1']['tmp_name'], '../upload/' .$finalname1);
move_uploaded_file($_FILES['userfile2']['tmp_name'], '../upload/' .$finalname2);
move_uploaded_file($_FILES['userfile3']['tmp_name'], '../upload/' .$finalname3);
$mail->AddAttachment('../upload/'.$finalname1);
$mail->AddAttachment('../upload/'.$finalname2);
$mail->AddAttachment('../upload/'.$finalname3);
This config file is for you configure your details for connect newsletter form with your Mailchimp Account
Just create first your mailchimp Account if you don´t have one Click here
Then go to your account settings and copy api Key and add in this line of code
$apikey = 'your-api-key';
Then add your list ID (First Create a list)
$listId = 'your-list-id';
Add your Campaign ID to run Campaigns to your email list (First create a campaign)
$campaignId = 'your-campaign-id';
Add here the Email Address of your Mailchimp Account
$email_address = 'your-mailchimp-email';
The message file is for your email template just make sure you include message before mail settings
see form.php file
require "message.php";
And the Automessage is the email template for autoresponder just include it before automail settings
require "automessage.php";
Once again, thank you so much for purchasing this item. As I said at the beginning, I'd be glad to help you if you have any questions relating to this item. No guarantees, but I'll do my best to assist. If you have a more general question relating to the itens on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
InsideLab