Free Application Form Template — HTML Code for Job & Program Applications

Whether you’re hiring talent, recruiting for a program, or accepting applications for scholarships and memberships, a professional application form is essential. This free HTML template provides a complete, ready-to-use application form that collects all the information you need—contact details, experience level, education, portfolio links, and cover letter. The form includes modern styling and works perfectly on all devices.

Complete Application Form Template

Here’s the full, production-ready application form. Copy all the code and save it as an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .container {
            max-width: 700px;
            margin: 0 auto;
            background: white;
            padding: 45px;
            border-radius: 12px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
        }

        h1 {
            color: #1a1a1a;
            margin-bottom: 10px;
            font-size: 32px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 32px;
            font-size: 15px;
            line-height: 1.6;
        }

        .form-group {
            margin-bottom: 24px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="url"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        input[type="url"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #f5576c;
            box-shadow: 0 0 0 3px rgba(245, 87, 108, 0.1);
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        @media (max-width: 600px) {
            .form-row {
                grid-template-columns: 1fr;
            }

            .container {
                padding: 30px 20px;
            }

            h1 {
                font-size: 26px;
            }
        }

        .required {
            color: #e74c3c;
        }

        .optional {
            color: #999;
            font-size: 13px;
            font-weight: 400;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-top: 32px;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f5f5f5;
        }

        button {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            box-shadow: 0 4px 15px rgba(245, 87, 108, 0.4);
            transform: translateY(-2px);
        }

        button:active {
            transform: scale(0.98);
        }

        .success-message {
            display: none;
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Submit Your Application</h1>
        <p class="subtitle">We're excited to learn more about you. Please fill out the form completely to apply.</p>

        <div class="success-message" id="successMessage">
            Thank you for your application! We'll review it and be in touch soon.
        </div>

        <form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="section-title">Personal Information</div>

            <div class="form-row">
                <div class="form-group">
                    <label for="fullName">Full Name <span class="required">*</span></label>
                    <input type="text" id="fullName" name="fullName" required>
                </div>
                <div class="form-group">
                    <label for="email">Email Address <span class="required">*</span></label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone Number <span class="required">*</span></label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="position">Position Applied For <span class="required">*</span></label>
                    <input type="text" id="position" name="position" required>
                </div>
            </div>

            <div class="section-title">Experience & Education</div>

            <div class="form-row">
                <div class="form-group">
                    <label for="experience">Years of Experience <span class="required">*</span></label>
                    <select id="experience" name="experience" required>
                        <option value="">Select experience level</option>
                        <option value="0-1 years">0-1 years</option>
                        <option value="1-3 years">1-3 years</option>
                        <option value="3-5 years">3-5 years</option>
                        <option value="5-10 years">5-10 years</option>
                        <option value="10+ years">10+ years</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="education">Education Level <span class="required">*</span></label>
                    <select id="education" name="education" required>
                        <option value="">Select education level</option>
                        <option value="High School">High School</option>
                        <option value="Associate Degree">Associate Degree</option>
                        <option value="Bachelor's Degree">Bachelor's Degree</option>
                        <option value="Master's Degree">Master's Degree</option>
                        <option value="PhD">PhD</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
            </div>

            <div class="section-title">Links & Portfolio</div>

            <div class="form-group">
                <label for="linkedin">LinkedIn Profile <span class="optional">(Optional)</span></label>
                <input type="url" id="linkedin" name="linkedin" placeholder="https://linkedin.com/in/yourprofile">
            </div>

            <div class="form-group">
                <label for="portfolio">Portfolio/Website <span class="optional">(Optional)</span></label>
                <input type="url" id="portfolio" name="portfolio" placeholder="https://yourportfolio.com">
            </div>

            <div class="section-title">Cover Letter</div>

            <div class="form-group">
                <label for="coverLetter">Tell us why you're a great fit for this role <span class="required">*</span></label>
                <textarea id="coverLetter" name="coverLetter" required placeholder="Share your motivation, relevant skills, and what attracts you to this opportunity..."></textarea>
            </div>

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

    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch(this.action, {
                method: this.method,
                body: formData
            }).then(response => {
                if (response.ok) {
                    document.getElementById('successMessage').style.display = 'block';
                    this.reset();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            }).catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

How to Use This Template

Getting your application form live is simple and takes just three steps:

Step 1: Copy the Code Select and copy all the HTML code above. Paste it into a new text file and save it with a .html extension (for example, application-form.html). Open it in your browser to see how it looks.

Step 2: Create a FormBackend Account Go to FormBackend.com and sign up for free. FormBackend automatically collects all application submissions and sends them to your email. You’ll receive a unique form ID once you create your form.

Step 3: Update Your Form Action Replace YOUR_FORM_ID in the code with your actual FormBackend ID. The action URL should look like https://www.formbackend.com/f/abc123xyz789. Save the file and test it by submitting a test application.

Template Variations

Simple Job Application

Minimal fields for quick applications:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="name">Full Name <span class="required">*</span></label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="form-group">
        <label for="email">Email <span class="required">*</span></label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="phone">Phone <span class="required">*</span></label>
        <input type="tel" id="phone" name="phone" required>
    </div>

    <div class="form-group">
        <label for="position">Position Applied For <span class="required">*</span></label>
        <input type="text" id="position" name="position" required>
    </div>

    <div class="form-group">
        <label for="message">Why are you interested in this position? <span class="required">*</span></label>
        <textarea id="message" name="message" required></textarea>
    </div>

    <button type="submit">Apply Now</button>
</form>

Scholarship Application

For scholarship and financial aid programs:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="name">Full Name <span class="required">*</span></label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="form-group">
        <label for="email">Email <span class="required">*</span></label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="gpa">Current GPA <span class="required">*</span></label>
        <input type="number" id="gpa" name="gpa" min="0" max="4" step="0.01" placeholder="e.g., 3.75" required>
    </div>

    <div class="form-group">
        <label for="major">Major/Field of Study <span class="required">*</span></label>
        <input type="text" id="major" name="major" required>
    </div>

    <div class="form-group">
        <label for="university">University/Institution <span class="required">*</span></label>
        <input type="text" id="university" name="university" required>
    </div>

    <div class="form-group">
        <label for="essay">Essay: Why do you deserve this scholarship? <span class="required">*</span></label>
        <textarea id="essay" name="essay" required placeholder="Write your essay here (minimum 500 words)..."></textarea>
    </div>

    <button type="submit">Submit Application</button>
</form>

Volunteer Application

For volunteer and community programs:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <div class="form-group">
        <label for="name">Full Name <span class="required">*</span></label>
        <input type="text" id="name" name="name" required>
    </div>

    <div class="form-group">
        <label for="email">Email <span class="required">*</span></label>
        <input type="email" id="email" name="email" required>
    </div>

    <div class="form-group">
        <label for="phone">Phone <span class="required">*</span></label>
        <input type="tel" id="phone" name="phone" required>
    </div>

    <div class="form-group">
        <label for="availability">Availability <span class="required">*</span></label>
        <select id="availability" name="availability" required>
            <option value="">Select availability</option>
            <option value="Weekdays">Weekdays (Monday-Friday)</option>
            <option value="Weekends">Weekends (Saturday-Sunday)</option>
            <option value="Both">Both weekdays and weekends</option>
            <option value="Flexible">Flexible</option>
        </select>
    </div>

    <div class="form-group">
        <label for="interests">Areas of Interest <span class="required">*</span></label>
        <select id="interests" name="interests" required>
            <option value="">Select area</option>
            <option value="Community Outreach">Community Outreach</option>
            <option value="Event Planning">Event Planning</option>
            <option value="Administrative Support">Administrative Support</option>
            <option value="Mentoring">Mentoring</option>
            <option value="Other">Other</option>
        </select>
    </div>

    <div class="form-group">
        <label for="motivation">Why do you want to volunteer with us? <span class="required">*</span></label>
        <textarea id="motivation" name="motivation" required placeholder="Tell us about your motivation and what you hope to contribute..."></textarea>
    </div>

    <button type="submit">Submit Volunteer Application</button>
</form>

How to Customize This Template

Update Position and Field Names Change the “Position Applied For” field to match your specific role titles. Modify the position dropdown to show your actual open positions.

Add or Remove Sections Each section starts with <div class="section-title">. You can add new sections by duplicating this div and creating new form groups below it. Remove sections you don’t need.

Customize Education and Experience Options The dropdowns for education and experience levels are fully editable. Replace the <option> values with options that fit your application requirements.

Add File Upload (Advanced) To let applicants upload resumes or portfolios, add this field: <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">. Note: FormBackend’s free tier doesn’t support file uploads; upgrade for this feature.

Adjust Color Scheme The template uses pink and red colors. Replace #f5576c and #f093fb with your brand colors throughout the CSS to match your organization’s branding.

FAQ

Is this application form template free? Yes, the HTML template is completely free. FormBackend, which receives the submissions, offers a free tier with up to 50 form submissions per month. Paid plans support more submissions and advanced features.

Can applicants upload a resume or portfolio? This basic template doesn’t include file uploads, but you can add URL fields for portfolio links (which are already included). For actual resume uploads, you’ll need a FormBackend paid plan or a third-party service like Dropzone.js integrated with your form.

How do I get notified of new applications? FormBackend automatically sends you an email for each submission. You can also log into your FormBackend dashboard to view all applications in one place, export them to CSV, and set up email notifications for multiple team members.

Can I customize the fields? Absolutely. Every field can be customized by editing the HTML. You can add, remove, or change any field, label, or required status. Just maintain the form structure and make sure each field has a unique name attribute.

Next Steps

Customize this template with your organization’s colors and application requirements, then deploy it on your careers page or application portal. For advanced features like applicant tracking and custom notifications, check our guides or explore FormBackend’s documentation.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Registration Form Template — Event, workshop, and conference signups
Contact Form Template — Collect name, email, and messages from website visitors
Survey Form Template — Multiple choice, rating scales, and open-ended questions
Feedback Form Template — Customer feedback with star ratings and comments
Order Form Template — Accept product orders with quantities and shipping details

Need a custom form? Use our HTML form generator to build one visually.