ReusableForms v2.0 beta

PHP email form with file attachment support

A PHP Email form with file attachment
Tagged: phpphp email form with file attachmentfile uploadfile attachmentphoto uploadphp formbootstrap 5
A form that can accept a file attachment has many uses. Some examples include allowing users to submit resumes on a job site, allowing customers to submit support requests with screenshots or logs, or allowing users to submit recipes on a food site. PHP is a popular scripting language that is often used for form submission processing. PHP is easy to learn and use, and it can be used to process form data quickly and easily. Moreover PHP is supported by default on most shared hosting services. However, configuring a PHP script to process form submission requires some programming expertise.

Code


        <h1>Contact Us</h1>
<form id="myform" name="myform" method="post">
    <div class="mb-5">
        <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="mb-5">
        <label for="name_input">Name</label>
        <input type="name" class="form-control" id="name_input" name="name" placeholder="Name">
    </div>
    <div class="mb-5">
        <label for="message">Message</label>
        <textarea class="form-control" id="message" name="message" rows="3"></textarea>
    </div>
    <div class="mb-5">
        <label for="file_upload">Upload File</label>
        <input type="file" class="form-control-file" id="file_upload">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Integrating the Code with Your Web Page

To seamlessly integrate the form code from ReusableForms.com into your web page, follow these simple steps:

  • The form code is plain HTML. Click the copy button located above the code and paste it into your web page's source code.
  • If the form uses a CSS framework like Bootstrap or TailwindCSS, ensure that your web page or website project has the necessary libraries linked. Consult the respective library documentation for guidance.

Setting up Back-end Processing and Record Keeping

The form code provided above is for the client side only. To fully benefit from the form's features, you'll need a back-end form processor. Ratufa is one such service, and integrating with it is straightforward. Watch the video demo for a step-by-step example.

To receive email notifications upon form submissions, store submission records, and search through them later, you'll need a back-end processor. Here's how to set one up:

Using Ratufa Backend

  1. Go to Ratufa.io.
  2. Click the "Connect your form" button.
  3. Copy the provided code and paste it at the bottom of the HTML form code above
  4. You can test the form within ReusableForms before copying it to your website. Ratufa.io will show submissions on the right side.
  5. Copy the combined code to your web page.
  6. Ratufa will store your form submissions, and you can configure email notifications. You can search and download records whenever needed.

Setting up a Self-hosted PHP Backend (Advanced)

This method is recommended only for those familiar with server settings and customizing PHP code. Simfatic\FormHandler is a generic form handling script that can handle most form processing tasks.
  1. Clone the project to a local folder using git.
  2. Run composer update.
  3. Find sample form handler scripts in the "examples" folder in the repository. Customize handler.php according to your needs (e.g., add email addresses, update SMTP settings).
  4. Customize handler.js in the "examples" folder to point to the correct URL.
  5. Upload the updated formHandler folder to your website (upload the entire folder).
  6. Copy the HTML form code to your web page and add the handler.js file to your HTML code.
  7. Test your form.

Similar forms

Bootstrap 5 form template
HTML5 popup contact form
PHP contact form with captcha
Free feedback form HTML code for websites
Working bootstrap contact form with php
Bootstrap contact form template with validation
jQuery contact form with validation
Contact form in bootstrap
Bootstrap 5 popup email form
Bootstrap contact form with file upload