HTML.form.guide

Making a contact form with file upload support

contact form attachment contact form with upload downloads

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.

Also see free file attachment forms from ReusableForms.com

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 Demo | Download

Contact form with file attachment and Captcha

Contact form with file upload field and Captcha Try the Demo | Download

Contact form with file uploads

Contact form with two file upload fields and Captcha
Try the Demo | Download

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

$formproc->AddRecipient('name@your-website.com');//<<---Put your email address here
  1. Upload the folder contents to your website (to a sub-folder say, /contact)
  2. The contactform.php contains the form. You can link to this file or embed the form using iframe.

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

<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>
  1. Add one more line on the top of the contactus.php

$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.

See Also

Categories