Php Contact Form With File Upload and Recaptcha

Usage:

1. Press the download button above. The zippo file contains all the code you need for the form.
2. Unzip the file php-contact-form-file-upload
3. Open the file named "handler.php"
   Look for sendEmailTo add the email addresses to receive the form submissions.
4. Upload the whole folder to your website
5. Open the formpage.html in your browser and test

Run across the customization guide . You lot tin can change the validations, edit the styles, and more

Encounter a video demo hither

The sections beneath explain the code of this form

The HTML Code

                      <!-- Class Started --> 	<div class="container form-pinnacle"> 		<div class="row"> 			<div form="col-doc-six col-dr.-beginning-3 col-sm-12 col-xs-12"> 				<div course="panel panel-danger"> 					<div course="panel-torso"> 						<course id="reused_form"> 						 	<div class="class-group">  						 		<label><i class="fa fa-user" aria-hidden="true"></i> Name</label> 						 		<input type="text" name="name" course="class-control" placeholder="Enter Name">  						 	</div>  						 	<div form="form-group">  						 		<label><i class="fa fa-envelope" aria-hidden="true"></i> Email</label>  						 		<input type="email" name="email" class="form-control" placeholder="Enter Email">  						 	</div>  						 	<div class="form-group">  						 		<label><i class="fa fa-comment" aria-subconscious="true"></i> Message</label>  						 		<textarea rows="3" name="message" course="form-control" placeholder="Type Your Bulletin"></textarea>  						 	</div>  							 													 	<div class="course-grouping"> 						 		<label><i class="fa fa-upload" aria-hidden="true"></i>Upload Your Files</characterization>  						 		<input type="file" name="epitome" class="form-control"> 						 	</div> 						 							 	 						 	<div grade="form-group"> 						 		<button class="btn btn-raised btn-block btn-danger">Post →</button> 						 	</div>  						</form> 						<div id="error_message" style="width:100%; height:100%; display:none; "> 						<h4>Error</h4> 						Sad there was an error sending your form.          						</div> 						<div id="success_message" style="width:100%; height:100%; brandish:none; "> 						<h2>Success! Your Message was Sent Successfully.</h2> 						</div> 					</div> 				</div> 			</div> 		</div> 	</div> <!-- Course Concluded -->                  

CSS Styling

The following actress CSS styling is used to make the course wait better

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

jQuery Form submission handling

                      <script> $(function() {     function after_form_submitted(information)      {         if(information.result == 'success')         {             $('course#reused_form').hibernate();             $('#success_message').show();             $('#error_message').hibernate();         }         else         {             $('#error_message').append('<ul></ul>');              jQuery.each(information.errors,part(key,val)             {                 $('#error_message ul').suspend('<li>'+key+':'+val+'</li>');             });             $('#success_message').hide();             $('#error_message').show();              //reverse the response on the button             $('button[type="button"]', $form).each(function()             {                 $btn = $(this);                 label = $btn.prop('orig_label');                 if(label)                 {                     $btn.prop('type','submit' );                      $btn.text(characterization);                     $btn.prop('orig_label','');                 }             });                      }//else     }  	$('#reused_form').submit(function(e)       {         due east.preventDefault();          $class = $(this);         //show some response on the button         $('button[type="submit"]', $class).each(role()         {             $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',                 information: formdata,                 success: after_form_submitted,                 dataType: 'json' ,                 processData: false,                 contentType: simulated,                 cache: false                     });                });	 }); </script>                  

Form Validations

HTML5 validations are used. For case, the Name and Email fields have 'required' validation and the email field is of input type 'email'.

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

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

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

using the congenital-in HTML5 validations has the advantage that the browser itself shows the error message.
Yous tin customize those validations to fit your needs

File Upload Treatment

For adding file upload support, first we need to add enctype attribute to the form tag: enctype="multipart/course-information"

Then, upload fields are added using input of type 'file'

                      <input type="file" name="paradigm"  required />                  

Server Side Treatment

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

When the form is submitted, the javascript course submission effect handler above collects the form data and sends information technology to the server side script.

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

Here is the lawmaking 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 above (including PHP 7 )   */ require_once './vendor/autoload.php';  utilise FormGuide\Handlx\FormHandler;   $pp = new FormHandler();   $validator = $pp->getValidator(); $validator->fields(['name','electronic mail'])->areRequired()->maxLength(l); $validator->field('email')->isEmail(); $validator->field('comments')->maxLength(6000);   $pp->attachFiles(['image']);   $pp->sendEmailTo('someone@gmail.com'); // ← Your email here  echo $pp->process($_POST);                  

You take to edit the handler.php and change "someone@gmail.com" to your e-mail address. If you want to add a second or third e-mail address, you lot can practice then like this:

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

Server Side Form Validations

Server side class validations are essential for any course. Y'all can't trust information sent to a form 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 alter abc@cdef to your email address. Remove the second e-mail accost, if not required.

See the customization guide for more than customization options.

Preview the form Download

juhlhicas1978.blogspot.com

Source: http://reusableforms.com/d/o5/php-contact-form-file-upload

Share this post