Contact Form with File Upload in PHP

Last Updated on August 3, 2023 by Roshan Parihar

In this tutorial, learn to create a PHP contact form with a file upload field to collect uploads from your audience. Forms that collect files can help you know the exact queries of your audience visually.

When you are running a business online giving services or products to your customers. Quality and support would be the top priority of your business to build a strong customer base.

Contact Form with File Upload in PHP

Bonus Tip

Looking to create contact forms with file upload without coding required? Create beautiful-looking contact forms with JotForm.

Customers can contact you through a contact form on your website. Contact forms collect text data normally when you see them on websites. However, sometimes it is not enough to collect only text data from your users. Image files are required to get screenshots of your customer’s exact problems.

Visually understanding the problems of your customers helps you know the exact location of the problems. It can also help you solve the problems of your software and improve its quality of it. So, files are an important way of getting users’ queries.

In this post, you will learn a step-by-step process on how to create a contact form with a file upload field. So, let’s get started.

How to Create Contact Form with File Upload in PHP

Here is the step-by-step process for creating a contact form with a file upload field:-

Step 1: Create HTML Structure of the Contact Form

First of all, create the HTML structure of the contact form in HTML. It should collect enough data from customers to know the exact query and make one-to-one communication with them. Name, Email, Files, and Message fields are enough to collect customers’ exact queries.

Below is the simple HTML contact form code with all the required fields. You can make these fields compulsory using the required attribute. Add this attribute at the end of the element to make them required to fill.

Your simple contact form will appear like the image shown below. It contains the form field you have added in the code above. The contact form is still not ready to add to your website as it will look attractive to your users.

contact form in html structure

Step 2: Add CSS to Make it Beautiful

To make it beautiful on your website, you must consider adding some CSS to your above HTML code. The CSS should make Name, Email, Files, and Message Fields beautiful to attract users fill.

If your contact form is not looking better than the above image, your customer will find it unprofessional to fill. Below is some CSS code that you can add to the above HTML code to make your contact form look better.

After you add the CSS, it will change the appearance of your contact form as shown in the image below. It looks better and more beautiful as compared to the previous step design.

contact form in HTML CSS file upload

Now, let’s add some PHP code to send emails with contact form data including the uploaded file.

Step 3: Get Contact Form Data with Email and File Upload Validation Using PHP

You need to first collect contact form data including the file upload field. Name and message fields are not required to validate as a user can enter the text as well as the numbers on it. The only fields that required validation are the Email and File upload field.

Validate the exact format of the email address to collect from your users. Getting the wrong email address won’t help you make communication with them as communication is important to convert them into customers.

Similarly, the file upload field is also important and requires validation on:-

  • Upload file size should not exceed the limit (2MB in the code)
  • The file should be of the required file type (‘pdf’, ‘doc’, ‘docx’, ‘jpg’, ‘png’, ‘jpeg’ are allowed in the code)

See the code below for email and file validation using PHP.

After the validation of the email address and upload is completed, you can not move further to send the data via email to the recipient.

Step 4: PHP Code to Send Contact Form Data Via Email with Uploaded File

To send emails in PHP with file upload, the PHP Mailer method is the easiest method that requires less coding as given below. The below code is self-explained as it contains comments that can help you know each line of code.

You have to first download the PHP Mailer by clicking on the button below. Save it in the base location of your main files and extract the folder.

Download PHPMailer

Now, copy the below code and paste it after the validation code of PHP. You have to change the below things in the code:-

  • Change ‘[email protected]’ with your Gmail id
  • Change ‘yourgmailpassword’ with the app password of your Gmail id. You can read the guide Sign in with app password in Gmail to create your app password on Gmail.
  • Change ‘[email protected]’ with the recipient’s email address. Also, change the ‘recipientname’ with your name to appear on the emails.

After you have done with the above code, you can test your form to see the emails received. If you want to send emails without a page refresh, you can read our tutorial on Ajax Contact Form with Attachment in PHP (Using Mail() or PHP Mailer).

If you have any problem sending an email or need any help, you can comment below.

You May Also Like to Read

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.