Example Form with File Upload

An example job application form demonstrating how to use the file upload control. Styled using Bootstrap.

Lines 14 and 15 of the HTML are the key here, in particular the enclosure type attribute enctype="multipart/form-data" which enables the file <input> element(s) to upload file data.

Static Forms

Apply for this Job


<div id="applyForJob" class="container space-2">
    <div class="card shadow-sm py-10 px-7">
        <!-- Title -->
        <div class="text-center mb-7">
            <span class="btn btn-xs btn-soft-primary btn-pill mb-2 text-primary">Static
                <span class="font-weight-semi-bold">Forms</span>
            </span>
            <h2 class="h3">Apply for this Job</h2>
        </div>
        <!-- End Title -->

        <!-- Apply Form -->
        <form action="https://api.staticforms.co/submit?form=NETN" method="POST"
            enctype="multipart/form-data" id="contact-form">
            <div class="row">
                <div class="col-md-6 mb-5">
                    <!-- Input -->
                    <label class="form-label" for="firstNameLabel">First name <span
                            class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="firstName" id="firstNameLabel"
                            placeholder="First Name" aria-label="First Name" required
                            data-msg="Please enter your first name." data-error-class="u-has-error"
                            data-success-class="u-has-success">
                    </div>
                    <!-- End Input -->
                </div>

                <div class="col-md-6 mb-5">
                    <!-- Input -->
                    <label class="form-label" for="lastNameLabel">Last name <span
                            class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="lastName" id="lastNameLabel"
                            placeholder="Last Name" aria-label="Last Name" required
                            data-msg="Please enter your last name." data-error-class="u-has-error"
                            data-success-class="u-has-success">
                    </div>
                    <!-- End Input -->
                </div>

                <div class="col-md-6 mb-5">
                    <!-- Input -->
                    <label class="form-label" for="emailAddressLabel">Email <span
                            class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="email" class="form-control" name="emailAddress"
                            id="emailAddressLabel" placeholder="Email" aria-label="Email" required
                            data-msg="Please enter a valid email address."
                            data-error-class="u-has-error" data-success-class="u-has-success">
                    </div>
                    <!-- End Input -->
                </div>

                <div class="col-md-6 mb-5">
                    <!-- Input -->
                    <label class="form-label" for="urlLabel">URL</label>
                    <div class="input-group">
                        <input type="url" class="form-control" name="URL" id="urlLabel"
                            placeholder="Linkedin" aria-label="Linkedin">
                    </div>
                    <!-- End Input -->
                </div>

                <div class="col-md-6 mb-5">
                    <!-- Input -->
                    <label class="form-label">Resume/CV</label>
                    <div class="input-group">
                        <input type="file" id="resumeLabel" name="resume">
                    </div>
                    <!-- End Input -->
                </div>

                <div class="col-md-6 mb-5">
                    <!-- Input -->
                    <label class="form-label">Cover letter</label>
                    <div class="input-group">
                        <input type="file" id="coverLetterLabel" name="coverLetter">
                    </div>
                    <!-- End Input -->
                </div>

                <div class="col-md-12 mb-5">
                    <!-- Input -->
                    <label class="form-label">In a few words... <span
                            class="text-danger">*</span></label>
                    <div class="input-group">
                        <textarea class="form-control" rows="6" name="answer"
                            placeholder="How'd you hear about StaticForms?"
                            aria-label="How'd you hear about StaticForms?" required
                            data-msg="Please enter an answer." data-error-class="u-has-error"
                            data-success-class="u-has-success"></textarea>
                    </div>
                    <!-- End Input -->
                </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-primary transition-3d-hover">Submit
                    Application</button>
            </div>
        </form>
        <!-- End Apply Form -->
    </div>
</div>