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/
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.
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/
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
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.
felisane
Wroteits a very nice script, can you make one that really works with database ?
admin
Replied to felisaneHello,
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
WroteHello,
Very nice script, btw how to create the upload file using separate input fields?
Thanks,
admin
Replied to ZeeHello Zee,
I don’t think I got your point, do you want to add multiple Dropzone instances?
Joe Miller
WroteJUST 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 MillerHi 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 Millerhttps://drive.google.com/file/d/16kA1h92Y6EljjS-sym5NlxoT601XKOLS/
Joe
Replied to adminWow! 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 MillerYou’re welcome.
Just don’t forget to change the site key, secret key, mail smtp settings and target email
Joe Miller
Replied to adminPerfect. Perfect! Thanks again man!
Nathan L
WroteI 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 LAs 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
WroteHi 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 PiedrahitaHello 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
WroteHi 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 uysalerHello Bulent,
It should be done easily with CSS, sorry I don’t have the time to implement it now ๐ข