Free Email Php Form for Contact With Upload

Usage:

1. Printing the download push above. The zilch file contains all the lawmaking you demand for the form.
2. Unzip the file php-contact-course-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 binder to your website
5. Open the formpage.html in your browser and test

Run across the customization guide . You can alter the validations, edit the styles, and more than

See a video demo hither

The sections below explain the lawmaking of this form

The HTML Code

                      <!-- Course Started --> 	<div form="container form-top"> 		<div class="row"> 			<div class="col-md-6 col-md-offset-3 col-sm-12 col-xs-12"> 				<div class="console console-danger"> 					<div course="console-body"> 						<form id="reused_form"> 						 	<div class="form-grouping">  						 		<label><i grade="fa fa-user" aria-hidden="truthful"></i> Proper name</characterization> 						 		<input type="text" proper name="name" form="form-control" placeholder="Enter Name">  						 	</div>  						 	<div grade="form-group">  						 		<label><i class="fa fa-envelope" aria-subconscious="true"></i> Email</label>  						 		<input type="email" proper noun="email" class="grade-control" placeholder="Enter Electronic mail">  						 	</div>  						 	<div class="form-group">  						 		<label><i grade="fa fa-comment" aria-hidden="true"></i> Message</characterization>  						 		<textarea rows="3" name="message" class="grade-control" placeholder="Type Your Message"></textarea>  						 	</div>  							 													 	<div class="grade-group"> 						 		<label><i class="fa fa-upload" aria-hidden="true"></i>Upload Your Files</label>  						 		<input type="file" name="paradigm" class="grade-control"> 						 	</div> 						 							 	 						 	<div grade="grade-group"> 						 		<push button course="btn btn-raised btn-block btn-danger">Post →</button> 						 	</div>  						</form> 						<div id="error_message" style="width:100%; superlative:100%; brandish:none; "> 						<h4>Error</h4> 						Deplorable there was an mistake sending your form.          						</div> 						<div id="success_message" style="width:100%; height:100%; display:none; "> 						<h2>Success! Your Message was Sent Successfully.</h2> 						</div> 					</div> 				</div> 			</div> 		</div> 	</div> <!-- Form Ended -->                  

CSS Styling

The following extra CSS styling is used to make the class await ameliorate

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

jQuery Form submission handling

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

Grade Validations

HTML5 validations are used. For example, the Name and Electronic mail fields take 'required' validation and the email field is of input blazon 'email'.

                      <input type="email" grade="course-command" id="electronic mail" name="e-mail" required>                  

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

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

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

File Upload Treatment

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

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

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

Server Side Treatment

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

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

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

Here is the code of the handler.php

                      <?php ini_set('display_errors', 1); ini_set('display_startup_errors', ane); error_reporting(E_ALL); /* Tested working with PHP5.4 and above (including PHP 7 )   */ require_once './vendor/autoload.php';  employ FormGuide\Handlx\FormHandler;   $pp = new FormHandler();   $validator = $pp->getValidator(); $validator->fields(['name','email'])->areRequired()->maxLength(50); $validator->field('email')->isEmail(); $validator->field('comments')->maxLength(6000);   $pp->attachFiles(['paradigm']);   $pp->sendEmailTo('someone@gmail.com'); // ← Your e-mail here  echo $pp->procedure($_POST);                  

You take to edit the handler.php and change "someone@gmail.com" to your email address. If you want to add a second or 3rd email address, you can practise so like this:

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

Server Side Form Validations

Server side form validations are essential for any form. You tin't trust data sent to a class processing script.

For this grade, the server side course validations are washed using this PHPFormValidation library. See the documentation to add or update the validations.

Customizations

Edit the handler.php and change abc@cdef to your electronic mail address. Remove the 2d email accost, if non required.

See the customization guide for more customization options.

Preview the form Download

mettersmothough.blogspot.com

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

Share this post