ReusableForms v2.0 beta

Bootstrap contact form with file upload

A simple contact form using Bootstrap 4 and has file upload
Tagged: bootstrap 4contact formattachmentfile uploadbootstrap contact form with file upload
A bootstrap contact form can be used to provide a simple way for a user to contact a website owner or administrator. It can also be used to gather feedback from users. There are a few reasons you might want to use a bootstrap contact form with file upload. One reason is if you want to allow users to upload files along with their contact information. This can be useful if you're running a business and you want potential customers to be able to send you their resumes or portfolios. Another reason to use a bootstrap contact form with file upload is if you want to give users the ability to attach files to their contact forms. This can be helpful if you're collecting feedback from users or if you need to allow users to upload supporting documentation.

Code


        <h1>Contact Us</h1>
<form id="myform" name="myform" method="post">
    <div class="form-group">
        <label for="email_addr">Email address</label>
        <input type="email" class="form-control" id="email_addr" name="email" placeholder="name@example.com">
    </div>
    <div class="form-group">
        <label for="name_input">Name</label>
        <input type="name" class="form-control" id="name_input" name="name" placeholder="Name">
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea class="form-control" id="message" name="message" rows="3"></textarea>
    </div>
    <div class="form-group">
        <label for="photo_upload">Upload File</label>
        <input type="file" class="form-control-file" id="file_upload" name="file_upload">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

How to Use

Simply copy the code to your web page HTML.

Back-end processing and record keeping

You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:

Using Ratufa backend

  • Go to ratufa.io
  • Press the "Connect your form" button
  • Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
  • Test your form. Ratufa will display the submissions - to the right side
  • Copy the combined code to your web page
Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.

Similar forms

Bootstrap 5 form template
PHP contact form with captcha
A reusable html5 contact form template
Bootstrap contact form withCaptcha
Tailwind contact form template
Tailwind CSS contact form
Working bootstrap contact form with php
Bootstrap contact form template with validation
jQuery contact form with validation
A reusable contact form using HTML and CSS