Php form upload file send email attachment

Usage:

1. Press the download button above. The zip file contains all the code you need for the form.
2. Unzip the file php-based-email-form-with-file-attachment
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

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

See a video demo here

The sections below explain the code of this form

The HTML Code

  
Contact Us
  
  
      Your Name:
      
    
      Email Address:
      
    
      Message:
      
      
            
          Image Upload:
      
             

      
      Post
  
  

      
Submitted the form successfully!
      

      We will get back to you soon.
      
  
  
  

            
Error
            Sorry there was an error sending your form.

  
   

CSS Styling

The following extra CSS styling is used to make the form look better

jQuery Form submission handling

$[function[]
{
    function after_form_submitted[data] 
    {
        if[data.result == 'success']
        {
            $['form#reused_form'].hide[];
            $['#success_message'].show[];
            $['#error_message'].hide[];
        }
        else
        {
            $['#error_message'].append['
'];

            jQuery.each[data.errors,function[key,val]
            {
                $['#error_message ul'].append['
'+key+':'+val+'
'];
            }];
            $['#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[label];
                    $btn.prop['orig_label',''];
                }
            }];
            
        }//else
    }

	$['#reused_form'].submit[function[e]
      {
        e.preventDefault[];

        $form = $[this];
        //show some response on the button
        $['button[type="submit"]', $form].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: false,
                contentType: false,
                cache: false        
            }];
        
      }];	
}];

Form Validations

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

Similarly, the message field [textarea] allows a max length of 6000 characters

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

File Upload Handling

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

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

Server Side Handling

Every form requires a server side script to collect the form data and do the processing like send emails, save 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 form submission event handler above collects the form data and sends it to the server side script.

The serverside script entry point is handler.php [see 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