PHP Ajax Foms - Beautiful Ajax Forms for your next Project

# PHP Ajax Foms

## Beautiful Ajax Forms for your next Project

- created: 03/10/2011
- latest update: 11/27/2013
- by: insidelab
- email: psbm.email@gmail.com

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!

### HTML Structure

I'm using one index file per form in different folders to be more organized

1. Head
2. Body

The HTML Structure is identical in all the forms

### Head

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

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

### CSS Files and Structure

I'm using one CSS file per form in different folders to be more organized

1. Settings
2. Tooltipster

### Settings

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

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

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

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

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

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

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

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

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

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

### JavaScript

This Item imports some Javascript files for make Ajax Forms Work (Server side).

1. Jquery Library
2. Jquery Fom
3. Jquery Contact + Jquery Feedback + Jquery Newsletter
4. Jquery Tooltipster
5. Jquery Validation
6. Jquery Methods

## Jquery Library

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 )

1.     <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 )

1.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

## Jquery Form

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

1.     <script type="text/javascript" src="Js/jquery.form.js"></script>

## Jquery Contact + Jquery Feedback + Jquery Newsletter

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

1.     <script type="text/javascript" src="Js/jquery.contact.js"></script>

For Feedback Form

1.     <script type="text/javascript" src="Js/jquery.feedback.js"></script>

For Newsletter

1.     <script type="text/javascript" src="Js/jquery.newsletter.js"></script>

## Jquery Tooltipster

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

1.     <script type="text/javascript" src="Js/jquery.tooltipster.js"></script>

## Jquery Validation & Jquery Methods

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

1.     <script type="text/javascript" src="Js/jquery.validate.js"></script>
       <script type="text/javascript" src="Js/jquery.methods.js"></script>

### PHP Files

This item Uses PHP for validation of fields and for send the messages to email

1. PHP Mailer
2. Form (for Contact form and Feedback form)
3. Config (for Newsletter form)
4. Message
5. Automessage

### PHP Mailer

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

1.     require "class.autoload.php";

## Form

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)

1.     <form method="post" action="php/form.php" id="feedback">

This is where you add you name

1.     $yourname = "Your Name";

This is where you add the address that receive email

1.     $youremail = "example@example.com";

This is where you add the subject of email

1.     $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

1.     $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

1.     if($automail->Send()){
           // Email has sent successfully.
           echo '<div class="contact-success-message">Congratulations! Your Message has been Send</div>';
       }

With this Code

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

1.     $max_file_size = 1024 * 1024 *2;

This is where all the validation happens

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

1.         $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

1.         $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

1.     $youremail = "example@example.com";

If you want use CC or BCC just turn this true overwise turn false

1.     $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

1.     $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);

2. And don´t forget to add more one line in php mailer options

3.     $mail->AddAttachment('../upload/'.$finalname1);
       $mail->AddAttachment('../upload/'.$finalname2);
       $mail->AddAttachment('../upload/'.$finalname3);

## Config

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

1.     $apikey = 'your-api-key';

Then add your list ID (First Create a list)

1.     $listId = 'your-list-id';

Add your Campaign ID to run Campaigns to your email list (First create a campaign)

1.     $campaignId = 'your-campaign-id';

Add here the Email Address of your Mailchimp Account

1.     $email_address = 'your-mailchimp-email';

## Message & Automessage

The message file is for your email template just make sure you include message before mail settings

see form.php file

1.     require "message.php";

And the Automessage is the email template for autoresponder just include it before automail settings

1.     require "automessage.php";

### Sources and Credits

I've used the following images, icons or other files as listed.

- IcoMoon Ultimate Font
- Fonts Used in Project are from Google Font Directory

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