You are here: Home » All Posts » Contact Forms » Making a contact form with file upload support

Making a contact form with file upload support

in Contact Forms

Having file upload boxes in contact forms will be greatly convenient for some web sites. For example, if the visitor can attach his/her photo and resume, that will greatly enhance the form’s functionality. Here is a contact form that you can customize for your needs.

Download the contact form code

You can download the contact form that best fits your needs and then customize as required.

Contact form with file attachment
A simple contact form with a file upload field
Try the DemoDownload
Contact form with file attachment and Captcha
Contact form with file upload field and Captcha
Try the DemoDownload
Contact form with file uploads
Contact form with two file upload fields and Captcha
Try the DemoDownload

Features of the contact form

  • You can have any number of file upload boxes
  • Standards compliant (100% XHTML 1.0 strict validated, uses CSS)
  • Secured against spam bots and attacks
  • Easy to customize
  • Hosted on your own web server
  • Free!

Installing the contact form on your web site

  1. Unzip the downloaded contact form code.
  2. Edit contactform.php and edit the email address to your email address
  3. $formproc->AddRecipient('name@your-website.com');//<<---Put your email address here
    
  4. Upload the folder contents to your website (to a sub-folder say, /contact)
  5. The contactform.php contains the form. You can link to this file or embed the form using iframe.
  6. Here is sample iframe code to embed the form:

    <iframe src='/contact/contactus.php' frameborder='0'
    width='100%' height='600' ></iframe>
    

    Alternatively, you can modify contactform.php to have the same look of your web site.

Customizing the form

If you want to add one more file upload box, do the following:

  1. open contactus.php in a text editor
  2. Add the HTML code for the file upload box(just like the existing one for the photo). Gove another unique name and id for the file upload box
  3. <div class='container'>
        <label for='photo' >Another upload:</label><br/>
        <input type="file" name='newupload' id='newupload' /><br/>
        <span id='contactus_newupload_errorloc' class='error'></span>
    </div>
    
  4. Add one more line on the top of the contactus.php
  5. $formproc->AddFileUploadField('photo','jpg,jpeg,gif,png,bmp',2024);
    $formproc->AddFileUploadField('resume','doc,docx,pdf,txt',2024);
    $formproc->AddFileUploadField('newupload','',2024);//<<------- New file upload
    

You can edit the contact.css file to change the style of the form.

License


The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.

Be Sociable, Share!
  • jaio

    firstly thank you for the great form

    how to add phone number field in the form

  • lalrin

    can i use file upload form with HTML code.

Previous post:

Next post: