jQuery Ajax Resume Upload Form with PHP

Last Updated on February 4, 2024 by Roshan Parihar

Learn how to create a jQuery ajax resume upload form in PHP. You can send emails and display notifications without page refresh.

The resume upload form is the most useful part of an online business to collect applicants’ applications. After collecting resumes, you can start communication to call them for interview. It can make hiring process more reachable and easier to apply.

jQuery Ajax Resume Upload Form with PHP

Bonus Tip

If you want to create beautiful looking responsive job application forms without coding required? Signup JotForm and Start Creating beautiful-looking job applications forms.

To collect resumes via emails, you can choose to send emails using the PHP default mail() function or PHPMailer Gmail SMTP using PHP.

You have to define what type of resume file types you want to collect from your applicants. It can be PDF format or any other file type you want to collect from applicants’.

To give less load to your server, it’s also useful to set a limit of uploading size on your resume upload form. You need file validation that restricts applicants 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 a jQuery ajax resume upload form with file validation in PHP.

So, let’s get started.

How to Create Ajax Resume Upload Form in PHP (Step-by-step)

Here is the step-by-step process on how to create an jQuery ajax resume upload form with PHP:-

Step 1: Create a Resume Upload Form Design

I am going to create a resume upload form design with a file input and few text input fields. We will also use Bootstrap to create a responsive mobile-friendly design. We will use Bootstrap version 5 to easily create a design with fewer CSS class additions.

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

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

After adding the above CDN URLs in the <head> section, you can start creating a resume upload form design using Bootstrap. You will get the jQuery ajax script for form submission in the 2nd step to submit form without page refresh.

Below is the complete code resume upload form design with text input fields and a file input field. You can use the below code to get the example resume upload form design shown after the below code.

The above resume upload form contains all the important input fields useful to collect applicants. The fields are Name, Email, and File upload. All input field contains required attribute to make them required for applicants to fill in to be able to submit the form.

Form design image jQuery Ajax Resume Upload Form with PHP

Let’s add a jQuery ajax script to allow applicants to submit the form without page refresh. The script also displays the loader icon until the applicant will get the result of the resume upload form.

Step 2: jQuery Ajax Resume Upload Form Submission with Loader Icon

jQuery Ajax is useful when you want to allow applicants submit the form without page refresh. You can also update some parts of a page using jQuery without refreshing the page.

The below ajax submission script sends resume upload form data to the PHP file location. This location is added in the action attribute of the <form> tag. The PHP file contains the PHP code to validate form data and send an email when everything is ok.

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

It also displays the loader icon on click the submit button until get the success message. The below image shows the loader icon after the applicant click the submit button. It also hides the loader icon after get a successful result from the resume upload form.

Loader icon after form submission

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

Step 3: Get Form Data and Validate Resume File Size and Type Using PHP

After you have done with the design part of the resume upload form, you can collect form data and perform validation on form data 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, collect 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 resume file data using PHP that are file name, size, and type. Now, you can specify the file format type and required size to collect from applicants with the PHP code given below.

The above code restricts applicants to upload only PDF file format. It also allows them to upload file with a maximum size of up to 2 MB. Above that size and other file formats, applicants will get an error message as given in the images below.

Also, create a folder with the name uploads/ in the base location to store resume files.

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

Email Address Validation Error Message

When the users fill out the resume upload form and enter the wrong email address format, they will get an error message as shown in the image below. Its showing that the email address is not of correct format.

Email error message jQuery Ajax Resume Upload Form with PHP

File Type Validation Error Message

The specified file format allowed is PDF and the applicatnt will get an error message as shown in the image below. This will display at the time when the format is not of specified type.

File type validation error message image

File Size Validation Error Message

When the applicant upload a larger-size file in the resume upload form, it will give an extra load to your server. It can also make your server down. So, it’s better to restrict upload file size. That is why, its better to allow only files with a maximum size of 2MB.

If the applicant 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

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

After collecting the form data and collect valid data from form, you can send emails either by using the mail() or by using PHPMailer Gmail SMTP. Out of these two methods, PHPMailer is the most easiest method of sending resumes via emails using PHP.

If your server provides email services to send emails, use the mail(). However, if your hosting server does not provide email services, its not possible to send emails using mail(). In that case, you can prefer PHPMailer method to send emails through Gmail SMTP.

That’s why I have provided you both mail() method and PHPMailer method to send emails. So, let’s move further to learn these methods.

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

The PHP mail() function method to send resume is a little bit difficult to use. It requires some extra coding to make it work for sending emails.

The below code is self-explained using comments given in the code below. You can see the below code and check the comment given with the code to learn the method.

Firstly, define the recipient’s email address where you have to change it with your email where you want to receive the resume. After that, collect the form data and also define the email address and reply to the email address.

After submission of the form, you will get an email containing the applicant details with resume as shown in the below image.

Method 2: Send Email Using PHPMailer Gmail SMTP in PHP

You can also choose to send the resume upload form data using PHPMailer Gmail SMTP. It is a simple way that require less coding to send emails in PHP. The codes given below are well-commented and self-explainatory. So, you can easily understand each line of code with comments.

It uses the PHPMailer library 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

After that, you just have to use the below code and make some changes. These changes includes the recipient email, recipient name, Gmail Id, and Gmail password.

Now, 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 jQuery Ajax Resume Upload Form with PHP

The email format the recipient will receive is as shown in the image below. The email contains the subject of the email, the applicant name who submit the form, and the resume file attached in PDF format.

Below is the email I just recieved after filling out and submitting the resume upload form. You can change the email format as per your requirements.

Email format

You May Also Like to Read

I hope this tutorial helped you to create a resume upload form with PHP. 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.