Simple Job Application Form HTML Code with CSS

Last Updated on January 25, 2024 by Roshan Parihar

In this post, learn how to create a simple job application form with HTML and CSS code. If you want to allow your applicants to apply for your job, you can add a job application form on your website.

Getting applications from your applicants is an essential part of any business running online. You can easily gain more employees to improve the performance of your business.

How to Create a Job Application Form in HTML with CSS

Bonus Tip

Looking to create job application forms without coding? Create beautiful looking job application forms with JotForm.

If you don’t know what a job application form is and how it works, you can read our post on What is a job application Form? How it Works and Why it is Important?

To create a job application form in HTML, you don’t need to be an expert in HTML. You can easily make a job application form in HTML with just a few input types, select boxes, and text area fields. After adding these form fields, you can add a few CSS to make it look better on your website.

So, let’s get started.

How to Create a Job Application Form in HTML with CSS Code (step-by-step)

Here is the step-by-step process on how to create a Job Application form in HTML and CSS:-

Step 1: Simple HTML Code of Job Application Form

The Job Application form should contain the below-given form fields to make applicant data useful:-

  • Name
  • Email Address, and
  • Phone number
  • Position applying for
  • How Many Years of Experience?
  • Cover Letter, and
  • Resume Upload

You should know which HTML input types are correct for the above form fields. To add an input field for ‘Name’, you can use <input type="text">. For ‘Email’, you can use <input type="email">. To add a phone number, you can use <input type="tel">. For displaying position, you can use <select> form fields. Adding years of experience, use <input type="radio">. For the cover letter, you can add <textarea>. To collect resumes from applicants, you can add <input type="file">.

It also requires to submit button to submit the form on click. To add a submit button to your form, you can use <input type="submit"> as given below.

Let’s add these fields one by one to your job application form with the HTML code given below:-

The resume upload field is important for collecting applicants’ educational qualifications, professional qualifications, and work experiences. So, the above fields are enough to create a job application form.

But, without adding CSS, your HTML job application form will look like the image shown below.

Job Application Form in HTML

So, let’s add some CSS code to your HTML code to add some design and make it look better on your website.

Step 2: Add CSS Code to Make Form Beautiful and Responsive

The CSS code can make your form design and its field look better to your applicants. Few CSS codes can do the magic to your job application form. It requires adding CSS for all your input fields, select, textarea, and buttons.

You also have to include CSS to focus on input fields using :focus selector. It gives a different look to highlight when the applicant clicks on the form field to enter data.

Let’s see the CSS code to add to your job application form to give it a look and feel:-

Now, after adding both HTML code and CSS code, your form is ready to add to your website as shown in the image below.

Job Application Form Format

Step 3: Add PHP Code to Send Emails

A Job Application form working in HTML is incomplete without sending emails. To make your job application form work, you must consider adding PHP code to collect applicants’ data via emails from it.

When your applicant enters valid data in the job application form and clicks the submit button, your job application form should send this data in emails. The owner of the website should receive the emails and collect the form-entered data.

Below is the complete PHP code to send form data and resume as an attachment in the email. See the PHP code to learn the method. You can easily understand each line of code as they are well-commented.

The above PHP code first captures form submitted data. After that, it checks the email address of the applicant if it is in the correct form or not. If the email format is not correct, it gives an error message to the applicant and will stop the execution of the PHP code.

When the email address is correct, it proceeds with further execution of the code checks the resume, and saves it.

It requires you to use the PHPMailer to send email from your form. You can download it with the button given below. You have to download and extract PHPMailer in the base location where you have placed your main PHP code file.

Download PHPMailer

Now, if every form entered data is correct, it executes the below code to send the form data via email.

The applicant will get the success message that the application sent to the owner.

The email format the owner 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 submitted the form, the email text content with details of the applicant data, and the resume file as an attachment.

It is my Gmail inbox where I received the email after submitted the job application form. You can change the email format as per your requirements.

Job Application Form Email Format on Gmail

Challenges in Making Job Application Forms in HTML?

Creating a job application form and making it work in HTML isn’t an easy task when you are from a non-coding background. There are many hurdles in creating a form and adding it to your website.

  • Require Learning HTML, CSS, and PHP: You need to learn coding skills to create a simple form for your website. It takes time and effort to learn coding skills. It’s not possible to learn coding and start creating a form overnight.
  • Need Custom Coding: To change anything on your form, you need to modify the complex form manually. One error on your code can break all your code on your live website. You cannot make it happen to you in real and want your users to see errors and decrease your reputation.
  • Customization is Not Easy: You cannot easily customize and change the design of your form to match it with your website. It can be time time-consuming task for you to find the code location to change the form fields and their size, button color, and form background.
  • Harder for Beginners to Find and Resolve Errors: It can be a hard task for you and you need to be an expert to find and resolve errors and mistakes.

How to Easily Create a Job Application Form and Send Emails Without Coding?

If you want to make a job application form for your website without coding, you can use the top online builder platforms that can help you easily create job application forms. I recommend Jotform our readers to easily create one for your website without coding.

Jotform is the most trusted and powerful platform to create any type of form for your website in just a few clicks. It comes with all the solutions to build a professional-looking job application form without coding easily.


You can create a job application form using its pre-made 400+ templates. It just requires you to select a template to quickly start creating your job application form. There are many customization options to easily match the form design with your website brand.

If you want to add more fields to it, you can do this with its easy-to-use drag-and-drop builder. You can also collect applicants’ data via email. It can also collect the submissions in one place where you can easily find the records.

After creating your job application form with JotForm, you can easily add to your website using simple shortcode code, embed code, iFrames, and shortcode with the WordPress plugin. You can also integrate your form with your favorite apps like email marketing platforms, project management boards, cloud storage apps, and more.

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.