Job Application Form Template

Streamline your hiring process with this professional and comprehensive job application form.

This template includes all the essential fields an applicant needs, from personal details to a cover letter, and features a user-friendly file upload for submitting a resume or CV.

Screenshot of a comprehensive job application form with a file upload field for a resume.

Get Source Code → Preview →

About this Job Application Form

This form template provides a structured layout for collecting job applications online. It is logically organized into sections using fieldset elements for "Personal Information" and the application itself. The form includes standard text inputs, a textarea for a cover letter, and a file upload field.

The file upload demonstrates a common, user-friendly technique. The default input type="file" is notoriously difficult to style consistently. This template visually hides the default input but uses its associated label, styled to look like a button, to trigger it. A small amount of JavaScript is used to display the name of the chosen file next to the button, giving the user clear feedback that their file has been selected.

Features

Well-Structured: Uses fieldsets to group related information, making the form easy to follow.
Styled File Upload: Provides a custom-styled, user-friendly button for resume/CV uploads.
File Name Display: JavaScript provides immediate feedback by displaying the name of the selected file.

Dependencies

Uses HTML and CSS, with a small, self-contained JavaScript block for the file upload display.

Note: To handle the form submission and file upload, you will need a server-side script (e.g., using ColdFusion, PHP, Node.js, etc.). This template provides the front-end user interface only.

Code

Here's the full code for the job application form:

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group textarea { height: 150px; resize: vertical; }

/* -- File Upload Styling -- */
.file-upload-group { display: flex; align-items: center; gap: 10px; }
/* This hides the default file input button */
.file-upload-group input[type="file"] { display: none; }
/* Style the label to look like a button */
.file-upload-group .file-upload-label {
    padding: 10px 15px;
    background-color: #555;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.file-upload-group .file-upload-label:hover { background-color: #333; }
/* For displaying the chosen file name */
.file-name { font-style: italic; color: #666; font-size: 0.9rem; }
/* -- End File Upload Styling -- */

.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
}
</style>

<div class="job-app-container">
    <h2>Job Application: Front-End Developer</h2>
    <form action="#" method="post" enctype="multipart/form-data">
        <fieldset>
            <legend>Personal Information</legend>
            <div class="form-group">
                <label for="full-name">Full Name</label>
                <input type="text" id="full-name" name="full_name" required>
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
             <div class="form-group">
                <label for="phone">Phone</label>
                <input type="tel" id="phone" name="phone" required>
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Application</legend>
            <div class="form-group">
                <label for="cover-letter">Cover Letter</label>
                <textarea id="cover-letter" name="cover_letter" placeholder="Why are you a great fit for this role?"></textarea>
            </div>
            <div class="form-group">
                <label for="resume-upload">Upload Resume/CV</label>
                <div class="file-upload-group">
                    
                    <input type="file" id="resume-upload" name="resume" accept=".pdf,.doc,.docx" required>
                    
                    <label for="resume-upload" class="file-upload-label">Choose File</label>
                    
                    <span class="file-name" id="file-name-display">No file chosen</span>
                </div>
            </div>
        </fieldset>

<button type="submit" class="submit-btn">Submit Application</button>
    </form>
</div>

if(fileInput) {
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            // Display the name of the first file selected
            fileNameDisplay.textContent = fileInput.files[0].name;
        } else {
            fileNameDisplay.textContent = 'No file chosen';
        }
    });
}
</script>

View Output