Form example send emails with attachments using Dropzone.js and PHPMailer

Obada Qawwas
in Javascript - PHP

Fully initialized web form example that sends emails with attachments using Dropzone.js and PHPMailer

In this snippet, I’m sharing with you a project request form (Project Planner) with custom styled checkboxes buttons and file upload using Dropzone.js and sends emails using PHPMailer with a thank you message, fully configured and ready to use.

For those who didn’t hear about DropzoneJS, it’s an open-source library that provides dragโ€™nโ€™drop file uploads with image previews.
Itโ€™s lightweight, doesnโ€™t depend on any other library (like jQuery) and is highly customizable.
You can read it’s docs on their website http://www.dropzonejs.com/

Features:

Dropzone.js fully configured, with deleting file function.
Custom preview for uploaded files.
Upload files to the server directly with PHP and delete them when gets removed in Dropzone.js.
Fully configured PHPMailer code to send emails and attach uploaded files to emails.
Custom radio buttons.
Well organized Javascript code.
Ready to use.

The JavaScript

I encourage you to read the scripts.js file to understand how everything is done, I couldn’t put it here because it’s too long and I can’t explain it all, I wrote comments everywhere in the .js file, you won’t be lost.

For more options for Dropzone.js, you can read the docs on http://www.dropzonejs.com/

What you need to change in the PHP code files ๐Ÿค“

In the file-upload.php file you can set your upload folder (don’t forget to give it the right permission).


$targetPath = dirname( __FILE__ ) . '/uploads/';

In the send_form.php file, you’ve to set your email configuration setting, you can get it from your mail provider, e.g. if your email provider is Yandex, you can get the configuration settings from this link https://yandex.com/support/mail/mail-clients.html


$mail->Host     = 'SMTP_HOST';     // Specify main and backup SMTP servers
$mail->Username = 'YOUR_EMAIL';    // SMTP username
$mail->Password = 'YOUR_PASSWORD'; // SMTP password

Also, you need to set the recipients settings in the same PHP file.
From email means the email that the code will use to send emails from it, it’s the same email you set before in here ($mail->Username = ‘YOUR_EMAIL’;).
Target email, should be the email you want to receive the messages in.


$mail->setFrom('YOUR_EMAIL', 'YOUR_NAME'); // From email and Name
$mail->addAddress('TARGET_EMAIL');         // Add a recipient
Screenshot:
Form example send emails with attachments using Dropzone.js and PHPMailer
Finally

Download the working example or view demo from the buttons at the beginning of this post.
Please don’t hesitate to write to me if something went wrong with you ๐Ÿ™‚ I’m always glad to help.

References and Credits:

Font Awesome
Open Sans font
jQuery
Dropzone.js
PHPMailer

Comments (16)
  • felisane
    Wrote
    September 1, 2019 at 8:55 pm

    its a very nice script, can you make one that really works with database ?

    • admin
      Replied to felisane
      September 2, 2019 at 6:45 am

      Hello,
      I’m glad you liked my post. It depends on the platform you are using if your site is built with WordPress it won’t take much time but think of it this way, you have to save the requests in somewhere and you should make a small panel/dashboard to view/edit these requests… unfortunately, it’s not that easy ๐Ÿ˜ถ

  • Zee
    Wrote
    January 6, 2020 at 10:25 am

    Hello,

    Very nice script, btw how to create the upload file using separate input fields?

    Thanks,

    • admin
      Replied to Zee
      January 13, 2020 at 1:59 pm

      Hello Zee,
      I don’t think I got your point, do you want to add multiple Dropzone instances?

  • Joe Miller
    Wrote
    April 3, 2020 at 9:40 am

    JUST freakin’ BEAUTIFUL! Works with no issue! Thank you so much! I want to use this, but unfortunately can’t because form must have reCAPTCHA and I can’t figure out how/where to integrate the snippet in your invisible reCAPTCHA tutorial into this send_form.php or the js file and keep the form functioning properly. Tried so many ways in different places and screws it up. So confused. Not really a developer beyond FE HTML/CSS and copy/paste for jQuery and such :(. After I launch, happy to chat about possible dev work opportunities that come my way later in the year if available. I’ll be looking for GOOD devs worldwide. Keep safe from Rona, you and everyone and God bless. Salam ๐Ÿ™‚ !

    • admin
      Replied to Joe Miller
      April 3, 2020 at 11:51 am

      Hi Joe,
      Thank you for your kind words.
      I’ll make a version of this post which supports invisible reCaptcha and send it to you ๐Ÿ™‚
      Have a nice day

    • admin
      Replied to Joe Miller
      April 3, 2020 at 12:28 pm
    • Joe
      Replied to admin
      April 3, 2020 at 1:29 pm

      Wow! So fast! Thank you so much!! Honestly would have contacted you days ago but thought it a long shot. Will check it out in just a bit. Really appreciate it, Obada. And well earned. Best form I have found… just this one thing and perhaps adapt the colors to target my audience (easy enough in the CSS). Will be in touch once organized. Thanks again and God bless. ๐Ÿ˜€

    • admin
      Replied to Joe Miller
      April 3, 2020 at 2:43 pm

      You’re welcome.
      Just don’t forget to change the site key, secret key, mail smtp settings and target email

    • Joe Miller
      Replied to admin
      April 5, 2020 at 10:56 am

      Perfect. Perfect! Thanks again man!

  • Nathan L
    Wrote
    September 16, 2020 at 3:54 pm

    I have been trying to get a bit of JQuery to show/hide boxes when the option boxes are selected, but haven’t been able to. I have been trying to use either an onClick/click event on the boxes themselves, a change event on the div, and a change event on the hidden ‘planner_project_type’ field to no avail.

    I am still rather new to Jquery, so any help would be much appreciated

    • admin
      Replied to Nathan L
      September 16, 2020 at 5:38 pm

      As I understand, you want to show/hide something when selecting options…
      You can’t use onClick because there is one already used for selection boxes, you have to modify the previous one.
      If you can send me a link to your project I could help more.

  • Alejandro Piedrahita
    Wrote
    April 14, 2021 at 12:47 am

    Hi Obada. This is a really great tutorial on how to use Dropzone js with PHP. Your comments were great. Very helpful and clear.
    I would like to duplicate the form on the same page with different styles, they are already duplicated with different designs but only the first one works for me.
    Would you be able to steer me in the right direction on how to do that by modifying your script?

    • admin
      Replied to Alejandro Piedrahita
      May 14, 2021 at 4:42 pm

      Hello Alejandro,
      Sorry for the late reply I’ve been busy lately, have you managed to solve the problem or do you still need help?

  • bulent uysaler
    Wrote
    June 6, 2021 at 10:01 pm

    Hi Obada. This is a really great tutorial on how to use Dropzone js with PHP. If you change “maxFiles: 20” the list of uploaded file is bit long. Is it possible to make that list with in scroll bar to a frame. Thanks

    • admin
      Replied to bulent uysaler
      July 13, 2022 at 8:47 pm

      Hello Bulent,
      It should be done easily with CSS, sorry I don’t have the time to implement it now ๐Ÿ˜ข

Please enable Javascript in order to post comments.