Free Html Contact Form With File Upload

Usage:

1. Press the download button to a higher place. The zip file contains all the code you lot need for the form.
2. Unzip the file html5-contact-form-with-file-upload
3. Open the file named "handler.php"
   Wait for sendEmailTo add the email addresses to receive the form submissions.
4. Upload the whole binder to your website
5. Open up the formpage.html in your browser and test

See the customization guide . You tin change the validations, edit the styles, and more than

See a video demo here

The sections below explain the code of this form

The HTML Lawmaking

                      <div id="form-chief">   <div id="form-div">     <grade class="montform" id="reused_form" enctype="multipart/form-information" >       <p form="name">       	<input name="name" type="text" course="feedback-input" required placeholder="Name" id="name" />       </p>       <p course="email">         <input name="email" type="email" required  class="feedback-input" id="email" placeholder="Email" />       </p>       <p class="text">         <textarea name="message" course="feedback-input" id="comment" placeholder="Message"></textarea>       </p>             <p class="file">         <input name="image" type="file" id="file" course="feedback-input">       </p>             <div class="submit">         <push blazon="submit" class="button-blue">SUBMIT</button>         <div class="ease"></div>       </div>     </grade>           <div id="error_message" manner="width:100%; height:100%; display:none; ">                 <h4>Fault</h4>                 Distressing there was an error sending your class.                    </div>           <div id="success_message" mode="width:100%; height:100%; display:none; ">           <h2>Success! Your Message was Sent Successfully.</h2>           </div>     </div> </div>                  

CSS Styling

The post-obit extra CSS styling is used to make the form look meliorate

                      <link rel="stylesheet" href="form.css" >                  

jQuery Form submission handling

                      <script> $(office() {     office after_form_submitted(data)      {         if(data.result == 'success')         {             $('form#reused_form').hibernate();             $('#success_message').show();             $('#error_message').hide();         }         else         {             $('#error_message').suspend('<ul></ul>');              jQuery.each(data.errors,role(key,val)             {                 $('#error_message ul').append('<li>'+central+':'+val+'</li>');             });             $('#success_message').hide();             $('#error_message').show();              //reverse the response on the button             $('push[type="button"]', $class).each(role()             {                 $btn = $(this);                 characterization = $btn.prop('orig_label');                 if(label)                 {                     $btn.prop('type','submit' );                      $btn.text(label);                     $btn.prop('orig_label','');                 }             });                      }//else     }  	$('#reused_form').submit(function(east)       {         e.preventDefault();          $form = $(this);         //evidence some response on the button         $('push[type="submit"]', $class).each(function()         {             $btn = $(this);             $btn.prop('type','button' );              $btn.prop('orig_label',$btn.text());             $btn.text('Sending ...');         });                               var formdata = new FormData(this);             $.ajax({                 type: "Post",                 url: 'handler.php',                 data: formdata,                 success: after_form_submitted,                 dataType: 'json' ,                 processData: faux,                 contentType: fake,                 enshroud: false                     });                });	 }); </script>                  

Form Validations

HTML5 validations are used. For instance, the Name and Electronic mail fields have 'required' validation and the e-mail field is of input type 'email'.

                      <input type="email" class="form-control" id="e-mail" name="email" required>                  

Similarly, the message field (textarea) allows a max length of 6000 characters

                      <textarea  proper name="Message"  maxlength="6000" required></textarea>                  

using the congenital-in HTML5 validations has the advantage that the browser itself shows the error bulletin.
You can customize those validations to fit your needs

File Upload Handling

For adding file upload back up, first nosotros need to add enctype attribute to the form tag: enctype="multipart/form-data"

And then, upload fields are added using input of type 'file'

                      <input type="file" proper name="epitome"  required />                  

Server Side Handling

Every form requires a server side script to collect the form data and do the processing like send emails, relieve to database etc. This class comes with a PHP script to handle the form submissions. PHP is widely supported server side scripting platform.

When the class is submitted, the javascript class submission outcome handler above collects the class data and sends it to the server side script.

The serverside script entry signal is handler.php (come across in your downloaded zip file). The script uses a library called FormHandler, which inturn, uses other libraries.

Here is the code of the handler.php

                      <?php ini_set('display_errors', ane); ini_set('display_startup_errors', ane); error_reporting(E_ALL); /* Tested working with PHP5.four and to a higher place (including PHP seven )   */ require_once './vendor/autoload.php';  employ FormGuide\Handlx\FormHandler;   $pp = new FormHandler();   $validator = $pp->getValidator(); $validator->fields(['proper noun','email'])->areRequired()->maxLength(l); $validator->field('email')->isEmail(); $validator->field('message')->maxLength(6000);   $pp->attachFiles(['image']);   $pp->sendEmailTo('someone@gmail.com'); // ← Your email here  echo $pp->process($_POST);                  

You lot have to edit the handler.php and change "someone@gmail.com" to your email address. If y'all want to add a second or third electronic mail address, yous can do then similar this:

                      $fh->sendEmailTo(['someone@gmail.com', 'someone.else@gmail.com']);                  

Server Side Form Validations

Server side form validations are essential for whatsoever class. You can't trust data sent to a grade processing script.

For this form, the server side form validations are done using this PHPFormValidation library. See the documentation to add or update the validations.

Customizations

Edit the handler.php and modify abc@cdef to your email address. Remove the second electronic mail accost, if not required.

See the customization guide for more customization options.

Preview the form Download

montanoscuman76.blogspot.com

Source: http://reusableforms.com/d/o3/html5-contact-form-with-file-upload

Share this post