Laravel 8: Contact form using AJAX without any page refresh

hello everyone i'm wisdom a backend developer in this tutorial i'm going to walk you through how to develop a simple contact form using laravel 8 ajax jquery and bootstrap i will like to say this this tutorial isn't for absolute beginners i assume that anybody that is watching this or came across this video know the basic of laravel jquery ajax and bootstrap notwithstanding as i said this is a simple contact form just follow the tutorial and code along and get your contact form working without any page refresh this tutorial will teach you how to validate your form display errors create markdown for your mail class and send emails to your preferred email address without any page refresh that sounds cool right if you find this tutorial helpful and informative please like and subscribe to my channel and share it with your friends let's get started first we're going to create a fresh laravel project let's run composer create project laravel laravel contact underscore form let's hold on for some seconds for composer to create our project our project is ready let's launch our project using php artisan serve next is to open our project in a code editor i'm using sublime text for this tutorial you can use any code editor of your choice next is to open our project in a browser let's open our code editor again and create the form markup we're going to use the welcome blade file as we're going to delete everything inside it and create our own markup next is to get the bootstrap cdn both the css and js file let's get the bootstrap markup for our form and style our form using the bootstrap classes let's view it again in a browser and see how it looks doesn't look good enough guess it will look better inside a bootstrap card let's add the form inside a bootstrap card let's add the form fields we will need for this tutorial we are going to collect the user's name email and his or her message let's view the form again in the browser it looks better now let's clean up our code and make it look better now we have set up our form markup with its styling let's create the controller that we will use to view the form and submit it after creating the controller let's set up our route after setting up the route let's go to the controller and render the contact form from the index method let's check our browser again and see if everything is okay now we are going to use the contact form route we created now our contact form looks okay let's get jquery cdn as we are going to use jquery for the ajax requests after getting the jquery cdn let's type our jquery code that will submit the form first let's alert ok to see if the jquery is working perfectly well yeah everything is working fine let's give our form an id let's add the root that we will be submitting the form next is to add jquery event listener that will submit the form using an ajax request after that we will use javascript preventdefault function to prevent the page from refreshing on form submit next is to get the url we will be submitting the form using jquery attribute method to get the value of the form action attribute let's alert the url to see if it is actually getting the value we need cool we got the value we need let's get back to our code editor and navigate back to the contact controller inside the store method of the controller first we are going to validate the user's request making sure that every field in the contact form is filled we are going to use the validator facade to validate the request this will help us catch the validation errors and return them to the user let's use the if statement to check if there is an error laravel validation returns an array of errors containing the error message of each field if it happens to be any but in this case we are going to get the first error for each request and return it to the user we will return the error message in json format with its error code don't forget to import the validator facade class before using it let's go back to the blade file every post request in laravel is usually sent with a token to protect the form from cross-platform attack we are going to add a hidden field that will hold the token that will be sent to our backend without the token you won't be able to submit the form let's submit the form to the back end for processing using the jquery post method after submitting the form we are going to get a response from the backend first let's console the response to know what the response looks like next let's add a div tag that will display the response message to the user this tag will display both the error and success message to the user next we are going to use the if statement to check the error code we got from the back end in order to determine which message to display to the user let's go back to the browser to check if everything is working fine nice everything is working perfectly well we are going to create a variable that will hold the response we are going to get from the backend this variable will hold a span tag that has a bootstrap alert class that will make the response look nice to the user let's go back to the browser and see how it looks let's test the validations and see if it's working perfectly well now the validations are working perfectly well next let's create our mail class alongside the markdown that we will use to receive the mail let's open the mail class and create a message property that will be passed to the markdown this message property will hold the message alongside the user email a name that will be sent to our mail lastly let's write the code that will send the message to our email using laravel male facade after submitting the form we will return a success message to the user don't forget to import the mail facade class and contact mailclass for this tutorial we are going to use mailtrap for the smtp settings mailtrap is a mail service that allows us to test our project mail functionalities before pushing them to production mailtrap doesn't actually send to our email rather it forwards the mail to your maytrap demo inbox you can create a mailtrap account if you don't have any it's totally free and easy to create after creating a mailtrap account get the smtp configuration settings from your dashboard and put them in your.nvlaravel file let's add another condition that checks when the form is submitted successfully and returns a success message to the user congrats we have successfully created a contact form that enables us to receive a message from our contact form without any page refresh if you find this tutorial very helpful and informative please like and subscribe to my channel for more laravel tutorials thanks for watching see you next time

Channel: Wisdom Diala

Views: 4,806

Keywords: contact form 7, contact form tutorial, laravel, laravel8, ajax, jquery, laravel tutorial, mailtrap, mailtrap laravel, mailtrap tutorial, css, bootstrap, bootstrap tutorial, javascript, javascript tutorial, php, web development, website, web design, smtp, programming, ajax request, ajax request php, ajax request javascript, ajax request jquery

Id: Qj9CHRy-aqE

Length: 25min 16sec (1516 seconds)

Published: Mon May 03 2021