Laravel Contact Form with File Upload: Sending Emails with Attachment Using Gmail

hello everyone welcome back to our laral coding example series I'm om Rana and you are watching programming [Music] fields in the previous video we had implemented a functionality to send email using Gmail in larl in which we had created a basic email template and rendered that as a content and we passed few data over there from the controller itself today we will be extending that to more advanced level by adding some essential feature so we will be sending email with an attachment using Gmail in larl and so for that we will create a basic contact form in which we will have option to fill the form with the attachment to send email emails are crucial for user engagement and communication in web applications so let's see how we can easily integrate this functionality into our laral projects so I have navigated to the vs code editor and already opened that project that I had created in the previous video so in the very first step I will design a basic contact form in which we will have input fil like name email subject message and a file upload option so that we can attach any file with email so as of now I have one controller one mail class and one mail template so let's design a contact form here so I will create a new blade file I will give name as contact form. blade. PHP and here I will use bootp 5 so I will type bs5 and hit enter so I have this bootst five skeleton here let me remove this header and footer things so I will remove these all and uh this title will be send email with attachment in larel using Gmail all right and inside this body let's design a form so I will create one container class and inside this I will create on row and column okay we can add one card and inside this I will Design One card header card body and a card footer okay and before this card I will create one form element and we will provide action and we will have this form closing tag and inside this I will pass method as post and we will have ENC type as multiart form data and also we will required a csrf token so we will add this csrf directive now inside this card header I will add one H4 tag and we pass card title class and inside this I will add contact form with attachment in Lal inside this card body I will use form group so I will pass form group class and we will have this label for uh first field I will add name and we will have this suspend class text danger inside this I will pass AIS Mark and then we will have this label closing and after this I will create one input type equals text name will be name and I will pass ID as name also we will pass pass class as form control and then we will Define placeholder as your name and we will have this input closing now let's copy this home group and paste it multiple times now we will change this to email okay placeholder will be email and this we will be subject subject okay and after that we will create one text area for message and we will close this text area message and we required one input type file for attachment so we will add attachment and this will be input type file name equals attachment ID will be attachment and we don't require this place folder and this text area okay and in the card footer we will add one button type submit we will have class as BTN BTN primary and this text will be submit okay so the basic form is ready now let's run this form so in order to run this form we required a route so let's switch back to web.php file and I will create one route here route colon colon get and inside this I will pass endpoint as contact and we have this email controller colum colum class and function will be contact form okay now let's copy this function come back to email controller and here we will create one function as public function contact form and inside this I will return view so we will pass this contact form view all right this is done now let's come to the browser and let's navigate to this Endo the contact okay yes so the contact form is ready we can add some space from top so inside this contact form blade I will add adding y of four okay now we have to handle this submit functionality for this contact form so we will create one more function inside this email controller so let's switch to email controller and let's define one more function as public function send contact mail okay and we will capture this form request and at the very first step we will add validation for the form so we will write dollar this validate and inside this I will pass this request object and in the second argument we have to Define this array and here we will pass attribute as name because we have name so I need this as required and minimum will be five okay and we can Define Max as 100 after that I will create email and also this is required and we required email okay next we have subject so subject is required Max it will be 100 we can add mean as well mean will be five thereafter we requir message so we will write message as required and minimum will be 10 characters and Max will be 255 okay at last we have attachment so we will write attachment so this is required and we will add mes as PDF doc docs and uh we we can add exls and Xcel X and uh we can add CSV as well okay and uh Max will be 2 MB so we will add 2048 KV this is done and after this form validation I will add this TR catch block so we will write exception dollar e and uh we will dump this log if there will be any exception so we will write log error okay and inside this we will write message as unable to send email due to some exception and we will print this message we will write exception get message okay now let's define one more endpoint inside this web.php so we will write route colon colon post and here we will Define contact as endpoint and this will trigger this email controller colon colon class and then send contact mail function okay now let's copy this endo and come back to this contact form blade now inside this form action let's pass this route endpoint as contact and then we will have to pass named attribute inside this route so let's switch back to web.php again and here I will pass named route so I will pass name contact okay this is done now again switch back to contact form blade and here we will have to capture the validation error messages let me dock this window so let's define p class text danger and here we will write error block if error has name then we will capture this error message so we will write dollar message okay let's add for others so let's copy and add it here email same for subject so we will add subject and we have this message so we will write for message and also for this file so we will write attachment okay so we have to repopulate the form after the validation so let's do that first we will have to add value attribute to old email same thing for others name subject and same thing let's add for message so let's add it here and let's change this to message okay yes this is done form is aligned now now let's come back to the browser let's refresh this now let's try to submit this form yes so the validation errors are triggered here now in the next step we will create the functionality to upload this file as an attachment so let's write that functionality so let's switch back to controller and here inside this Tri block I will check if request has file and we have this attachment okay then I will generate time St file name so I will write file name dollar request file attachment and then I will use this extension function okay and before this file name I will append this time stamp okay this is done now here we will get this time stamp file name for the uploaded attachment now let's upload this file so we will write request file attachment and we will use this move function so basically this will move this file inside the public folder okay so currently we don't have any folders inside this public folder so let's create one folder as attachment and here we will pass this file name this is done and uh let's add dump and die to display the file name now let's switch back to browser and let's refresh this page and let's try to fill up this form again hey this is a tast email from larel let's upload this file let's click on submit yes so the file is uploaded and it returned the file name now let's check this uploaded file so inside this public it generated this attachment and we have this uploaded attachment okay this is done so we have the file now let's move to the email functionality so that we can send email with this attachment so in order to send this attachment with the email we will pick that attachment from this folder itself that's why we have uploaded the file inside this public folder and then we will pick this uploaded file for the email attachment okay now let's copy the this line because we already added this mail class to send email and let's add it here and uh this two email will be basically recipient email this will be a kind of admin email so let's define admin mail okay and I will copy this email address let's change this variable to admin email and regarding this message and subject so basically what I will do I will pass this request all and the file name okay let's say remove this dump and die and here I will capture this response in a variable as response and thereafter I will return it to view so I will write if dollar response return back with success let's add message thank you for contacting us let's copy and add for L spot so we'll change the success to error and we'll change this message as unable to sub submit contact form please try again all right now let's come to this welcome email class so currently we are receiving message and subject inside this Constructor so we'll change this message to request and uh this will be request request request and instead of subject we are receiving file name so we'll change this variable to file name file name all right now if you scroll down for this subject we were passing Dynamic subject but now in this case we will pass a static subject because this email is going to trigger to admin so we'll change this subject to contact form admin programming Fields all right you can add your subject tagline as per your need and we scroll down then we have the content option so this content is basically our template so we already created this template in the last video so I will use the same email template for this now in the bottom we have the attachments so from here we will pass the attachment so firstly I will Define one variable as dollar attachments array and I will check we have the file name so I will check if dollar this file name okay then I will pass the attachment file path inside this attachments array and here we will call attachment function and this will be basically imported through this eliminate male Mel class and then we will call this form path because we have to pass the file attachment path here and we have the uploaded attachment inside the public folder so if we'll check out to the public folder then we have the public attachments folder so I will use this public path function and then attachment and then here I will append the dollar this file name then I will return this attachments in the form of array so this is all about this mail class now we have to capture the message inside the email template so that we will have one message body to the admin so let's switch back to this welcome mail blade So currently we were receiving this subject and mail message now we will add one message body as hello admin you have received inquiry from from the below details and here we will add name let me change these things let me copy and paste it we will have email subject message okay and here we will uh display request name because we are receiving this request data in the form of array same thing for email and next we have the subject okay and lastly we have the message so we'll write dollar request message okay this is all about the email message okay okay this is done and uh let's change this subject to request subject and before this subject I will append message as contact form admin just like this this is done now save and let's come back to the browser refresh this now let's try to submit this form so I will add laral user and uh I will add email as test email test.com subject is test email from Lille hey this is a test email from Lille using Gmail with attachment all right and let's upload one file as an attachment okay so I'm attaching one PDF file now let's try to submit so the email is processing and uh it returns something success but message has not populated so firstly let's check out the Gmail mailbox and yes we have received this mail with attachment and uh we have the following details as we have added the mail template and we have this attachment all right now let's correct this message issue so let's switch back to vs code editor and uh inside this contact form blade we already captured this session success okay so here we will have to write session get success and session get error okay now we should receive the message so let's refresh this form and let's try to submit welcome user welcome mail the.com subject tagline with attachment hey this is attached email to you and I'm attaching attachment okay let's upload some file again let's click on submit yes this is processing yes so we received the message today we have learned how to use lar to send emails with attachment through Gmail email is super important for communication in web applications and now we know how to make it work smoothly using larel we have covered a lot of steps like setting up Gmail creating email templates adding attachments and testing everything out these skills are not just for emails they show just how powerful larl can be for Building all sort of Web projects by using what we have learned you'll be able to make your web applications more engaging and userfriendly and remember if you get stuck or have questions the larel community is always there to help a big thanks to everyone for joining in today's lesson your interest and dedication to learning are what make our community awesome and of course hise thanks to the larel community for sharing their knowledge and making larable such as incredible tool for developers like us if you enjoyed this video please give it a thumbs up share it with your friends and don't forget to subscribe for more helpful tutorials if you have any questions or ideas for future videos feel free to drop them in the comments below your feedback helps us to create content that's just right for you until next time happy coding and may your lar project sign with awesome email [Music] features

Channel: Programming Fields

Views: 553

Keywords: Programming Fields, programmingfields, laravel, laravel tutorial, Email attachments, Contact form, Web development, Gmail integration, File uploads, Laravel tutorial, Email sending, SMTP configuration, Attachment handling, Laravel development, Laravel tips, Laravel projects, email with attachment, laravel email with attachment, send email with attachment, laravel send email with attachment, laravel gmail with attachment, laravel contact form, laravel contact form with email

Id: rh2OtuAtgtw

Length: 18min 18sec (1098 seconds)

Published: Sat Mar 09 2024