Ajax Contact Form with Attachment in PHP (Using Mail() or PHP Mailer)

Last Updated on January 22, 2023 by Roshan Parihar

Learn how to create an ajax contact form with an attachment in PHP. You can send emails using the PHP default mail() function or PHPMailer Gmail SMTP using PHP.

The contact form is the most essential part of online business to collect customers’ queries. Adding file attachments to it helps you easily understand customers’ queries visually.

Ajax Contact Form with Attachment in PHP

Bonus Tip

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

You have to define what type of file attachments you want to collect from your users. It can be PDF, DOC, TXT, JPG, PNG, or any other file type you need to easily understand customers’ queries.

To give less load to your server, you also require to limit the upload size on your contact form. You need file validation that restricts users to upload the required file type with the required file size.

In this post, you will learn a step-by-step process on how to create an ajax contact form with file attachment and validation in PHP.

So, let’s get started.

How to Create Ajax Contact Form with Attachment in PHP (Step-by-step)

Here is the step-by-step process on how to create an ajax contact form with an attachment using PHP:-

Step 1: Create a Contact Form Design with File Upload for Attachment

I am going to create a contact form design with a file input field to allow users to upload attachments. We will also use Bootstrap to create a responsive design that is also mobile-friendly. We will use Bootstrap version 5 to easily create a design with fewer CSS class additions.

To start using Bootstrap 5 classes and make them work for your design, you just have to include its style CDN URL as given below. Include it in the <head> section of your contact form design code in HTML.

We are also going to use font awesome icons and jQuery ajax script for form submission. To make font awesome icons and jQuery form submission script work, you also have to add the Font Awesome CSS and jQuery library CDN URL given below:-

After adding the above CDN URLs in the <head> section of your HTML design, you can start creating a contact form design with font awesome icons and jQuery ajax script. You will get the jQuery ajax script for form submission in the 2nd step.

Below is the complete code contact form design with a file input field to allow users to upload attachments. You can use the below code to get the example contact form design shown after the below code.

The above contact form with the attachment contains all the important input fields useful to make communicate with your audience. The fields are Name, Email, Message, and File upload. All input field contains required attribute to make them required to fill in to be able to submit the form.

Form design image Ajax Contact Form with Attachment in PHP

Let’s add a jQuery ajax script to submit the form without page refresh. The script also displays the loader icon until the user will get the result of the contact form.

Step 2: jQuery Ajax Contact Form Submission with Loader Icon

jQuery Ajax is useful to submit the form without page refresh. You can also update some parts of a page without refreshing the page.

The below ajax submission script sends contact form data to the PHP file added in the action attribute of the <form> tag above. The PHP file contains the PHP script to validate form data and send an email after all things are ok.

You will have to place the below code just before the </body> close tag to make it work on your contact form.

You will also get the loader icon on click the submit button using the above jQuery Ajax script. The below image shows the loader icon after clicking the submit button. It also hides the loader icon when getting a successful result from the contact form.

Loader icon in the after form submission

The loader icon is useful to show users the form is working backend until the users get proper results after form submission.

Step 3: Get Form Data and Validate Email Address, File Size, and Type Using PHP

After you have done with the design part of the contact form, you can collect form data and check if they are valid or not using PHP. There are three things that you need to perform validation on that are email address, file type, and file size.

First of all, get the form data using PHP global variable $_POST. After that, use regex for an email address to match the email address for validation.

After that, collect uploaded file data using PHP that are file name, size, and type. Now, you can specify the file type and size required to collect from users with the PHP code given below.

The above code restricts users to upload only PDF, Doc, JPG, JPEG, and PNG file formats. It also allows users to upload files with a size maximum of up to 2 MB. Above that size and other file formats, users will get error messages as given in the images below.

Also, create a folder with the name uploads/ in the base location to make the above code work.

I have created the error alert message using Bootstrap to make it look beautiful. You can see these messages below. The cross sign (X) is useful to close the error message.

Email Address Validation Error Message

When the users fill out the contact form and enter the wrong email address format, they will get an error message as shown in the image below.

Email address validation image Ajax Contact Form with Attachment in PHP

File Type Validation Error Message

The specified file format allowed is PDF, Doc, JPG, JPEG, and PNG file format. When the users upload another file format, they will get an error message as shown in the image below.

File type validation error message image

File Size Validation Error Message

When the users upload larger-size files in the contact form, they will give extra load to your server. It can also make your server down. It’s better to restrict upload file size. That is why, in the above PHP code, we have mentioned allowing only files with a maximum size of 2MB.

If the users upload a file with a size of more than 2MB, they will get an error message as shown in the image below.

File size validation message image Ajax Contact Form with Attachment in PHP

Step 4: Choose to Send the Attachment Via Mail() or PHPMailer Gmail SMTP in PHP

After collecting the form data and done with validation, you can send emails either by using the mail() or by using PHPMailer Gmail SMTP. Out of them, PHPMailer is the easiest way of sending attachments in PHP.

If your server provides email services to send emails, you can choose the use the mail(). However, if your hosting server does not allow email services, you won’t be able to send emails using mail(). In that condition, you can prefer PHPMailer to send emails through Gmail SMTP.

That’s why I have included both mail() and PHPMailer method below. So, let’s move ahead to learn them.

Method 1: Send Email with Attachment Using Default mail() Function of PHP

The PHP mail() to send attachments is a little bit difficult to use as it requires more coding to make it work.

Firstly, define the recipient’s email address, sender data, and message data. After that, define the email address and reply to the email address. The other code is self-explained with the comments given in the code below. You can see the below code to learn the method.

After submission of the form, you will get an email to send a success message as shown at the end of the code below.

Method 2: Send Email with the Attachment Using PHPMailer Gmail SMTP in PHP

You can also choose to send the collected contact form data using PHPMailer Gmail SMTP. It is a simple way that needs less code to send attachments in PHP. The codes given below are self-explained using the comments in them. So, you can easily understand the below code with comments.

It requires you to use the PHPMailer which you can download with the button given below. You can download and extract it in the base location where you have placed your main PHP index.php file.

Download PHPMailer

When you submit the form, if everything is ok then you will get the success message as shown in the image below.

Send attachment success message

The email format the recipient will receive in their email inbox is as shown in the image below. The email contains the subject of the sent email, the sender name who submit the form, the email text content with sender data, and the image file attachment.

It is my Gmail inbox where I received the email after filling out and submitting the contact form. You can change the contact form email format as per your requirements.

Email with attachment

You May Also Like to Read

I hope this tutorial helped you to create a contact form to send attachments in emails. If you have any queries, please comment below. I will reply to solve your queries.

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.