Here I will explain to you how to create a Contact Form in Laravel 7|8 and store the contact form data in MySQL database then you are at the right place.<\/p>\n\n\n\n
Contact Us form is a widely used feature required by almost every web or mobile application. In this Laravel contact form example tutorial, we will learn to create a contact form in Laravel using the Bootstrap 4 CSS Framework, validate contact form using Laravel built-in validation, send email to admin using Mailtrap.<\/p>\n\n\n\n
Install a new Laravel project using given below command.<\/p>\n\n\n\n
composer create-project laravel\/laravel --prefer-dist laravel-contact-form<\/pre><\/div>\n\n\n\nMode inside the project folder.<\/p>\n\n\n\n
cd laravel-contact-form<\/pre><\/div>\n\n\n\nMake Database Connection<\/h2>\n\n\n\n
Include your database configuration details in .env file to make the set up the connection between Laravel and MySQL.<\/p>\n\n\n\n
DB_CONNECTION=mysql\nDB_HOST=localhost\nDB_PORT=3306\nDB_DATABASE=laravel_db\nDB_USERNAME=root\nDB_PASSWORD=<\/pre><\/div>\n\n\n\nPL\/SQL<\/p>\n\n\n\n
Create Model and Run Database Migrations<\/h2>\n\n\n\n
Let us create the Model for contact form, in here we define the table Schema, execute the following command. It will create a Model and migration file. We have to create the table structure by specifying the values in the migrations file and also declare those values in the Model file as a Schema.<\/p>\n\n\n\n
php artisan make:model Contact -m<\/pre><\/div>\n\n\n\nBash<\/p>\n\n\n\n
Open database\/migrations\/timestamp_create_contacts_table.php<\/strong> file and add the values for contact us form that we stored in the MySQL database.<\/p>\n\n\n\n
<?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nclass CreateContactsTable extends Migration\n{\n \/**\n * Run the migrations.\n *\n * @return void\n *\/\n public function up()\n {\n Schema::create('contacts', function (Blueprint $table) {\n $table->id();\n $table->string('name');\n $table->string('email');\n $table->string('phone');\n $table->string('subject');\n $table->text('message');\n $table->timestamps();\n });\n }\n\n \/**\n * Reverse the migrations.\n *\n * @return void\n *\/\n public function down()\n {\n Schema::dropIfExists('contacts');\n }\n}<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Add the following code in the app\/Models\/Contact.php<\/strong> file.<\/p>\n\n\n\n
<?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Contact extends Model\n{\n use HasFactory;\n public $fillable = ['name', 'email', 'phone', 'subject', 'message'];\n}<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Next, run the migration using the below command. Once the command is completed, go to the database and check the contacts table created with a name, email, phone, subject, and message values.<\/p>\n\n\n\n
php artisan migrate<\/pre><\/div>\n\n\n\nBash<\/p>\n\n\n\n
Create Contact Form Controller<\/h2>\n\n\n\n
Execute the following command to generate the contact form controller file.<\/p>\n\n\n\n
php artisan make:controller ContactUsFormController<\/pre><\/div>\n\n\n\nBash<\/p>\n\n\n\n
Open app\/Http\/Controller\/ContactUsFormController.php<\/strong> file and add the following code in it.<\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers;\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Contact;\n\n\nclass ContactUsFormController extends Controller {\n\n \/\/ Create Contact Form\n public function createForm(Request $request) {\n return view('contact');\n }\n\n \/\/ Store Contact Form data\n public function ContactUsForm(Request $request) {\n\n \/\/ Form validation\n $this->validate($request, [\n 'name' => 'required',\n 'email' => 'required|email',\n 'phone' => 'required|regex:\/^([0-9\\s\\-\\+\\(\\)]*)$\/|min:10',\n 'subject'=>'required',\n 'message' => 'required'\n ]);\n\n \/\/ Store data in database\n Contact::create($request->all());\n\n \/\/ \n return back()->with('success', 'We have received your message and would like to thank you for writing to us.');\n }\n\n}<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Import the Contact<\/strong> Model from the App folder.<\/p>\n\n\n\n
Create two functions one for rendering contact form in view and to connect controller to form. The ContactUsForm()<\/strong> function is useful for storing user data in the database.<\/p>\n\n\n\n
We need to define a
ContactUsForm()<\/code> function and pass the$request<\/code> parameter to it. To validate the contact us form in Laravel, we will use the request object. This can allow us to use Laravel\u2019s built-in validation.<\/p>\n\n\n\nConfigure Contact Form Routes in Laravel<\/h2>\n\n\n\n
Go to routes\/web.php<\/strong> file and define the two routes.<\/p>\n\n\n\n
The first route is created with the GET method, and it renders the contact form in the view.<\/p>\n\n\n\n
The Second route handles the various tasks such as form validation, storing form data in the database and displaying success message to the user on frontend.<\/p>\n\n\n\n
<?php\n\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Http\\Controllers\\ContactUsFormController;\n\n\/*\n|--------------------------------------------------------------------------\n| Web Routes\n|--------------------------------------------------------------------------\n|\n| Here is where you can register web routes for your application. These\n| routes are loaded by the RouteServiceProvider within a group which\n| contains the "web" middleware group. Now create something great!\n|\n*\/\n\nRoute::get('\/contact', [ContactUsFormController::class, 'createForm']);\n\nRoute::post('\/contact', [ContactUsFormController::class, 'ContactUsForm'])->name('contact.store');<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Add Custom CSS in Laravel<\/h2>\n\n\n\n
In this step, we will learn to add custom CSS in Laravel project. First, create \/css\/style.css<\/strong> file in public<\/strong> folder. Also, place the given CSS code in the newly created CSS file.<\/p>\n\n\n\n
.container {\n max-width: 500px;\n margin: 50px auto;\n text-align: left;\n font-family: sans-serif;\n}\n\nform {\n border: 1px solid #1A33FF;\n background: #ecf5fc;\n padding: 40px 50px 45px;\n}\n\n.form-control:focus {\n border-color: #000;\n box-shadow: none;\n}\n\nlabel {\n font-weight: 600;\n}\n\n.error {\n color: red;\n font-weight: 400;\n display: block;\n padding: 6px 0;\n font-size: 14px;\n}\n\n.form-control.error {\n border-color: red;\n padding: .375rem .75rem;\n}<\/pre><\/div>\n\n\n\nCSS<\/p>\n\n\n\n
Now, you can easily call this CSS file in the Laravel blade template, we need to paste the following code in the view\/contact.blade.php<\/strong> file to add the custom CSS in Laravel.<\/p>\n\n\n\n
<link rel="stylesheet" type="text\/css" href="{{ asset('css\/style.css') }}"><\/pre><\/div>\n\n\n\nMarkup<\/p>\n\n\n\n
Create Laravel 7|8 Contact Form with Bootstrap<\/h2>\n\n\n\n
Go to resources\/views\/<\/strong> folder and create contact.blade.php<\/strong> file inside of it. Then, add the following code in it.<\/p>\n\n\n\n
We created a beautiful contact form using Bootstrap CSS Framework. The
@csrf<\/code> tag protects contact form from CROSS Site Request Forgery.<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">\n\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="width=device-width, initial-scale=1">\n <title>Laravel<\/title>\n <!-- Bootstrap CSS -->\n <link rel="stylesheet" href="https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css">\n <link rel="stylesheet" type="text\/css" href="{{ asset('css\/style.css') }}">\n<\/head>\n\n<body>\n <div class="container mt-5">\n\n <!-- Success message -->\n @if(Session::has('success'))\n <div class="alert alert-success">\n {{Session::get('success')}}\n <\/div>\n @endif\n\n <form action="" method="post" action="{{ route('contact.store') }}">\n\n <!-- CROSS Site Request Forgery Protection -->\n @csrf\n\n <div class="form-group">\n <label>Name<\/label>\n <input type="text" class="form-control" name="name" id="name">\n <\/div>\n\n <div class="form-group">\n <label>Email<\/label>\n <input type="email" class="form-control" name="email" id="email">\n <\/div>\n\n <div class="form-group">\n <label>Phone<\/label>\n <input type="text" class="form-control" name="phone" id="phone">\n <\/div>\n\n <div class="form-group">\n <label>Subject<\/label>\n <input type="text" class="form-control" name="subject" id="subject">\n <\/div>\n\n <div class="form-group">\n <label>Message<\/label>\n <textarea class="form-control" name="message" id="message" rows="4"><\/textarea>\n <\/div>\n\n <input type="submit" name="send" value="Submit" class="btn btn-dark btn-block">\n <\/form>\n <\/div>\n<\/body>\n\n<\/html><\/pre><\/div>\n\n\n\nMarkup<\/p>\n\n\n\n
Laravel Contact Form Validation<\/h2>\n\n\n\n
We are validating a contact form and accessing the errors for each form input field using $errors->has()<\/strong> method.<\/p>\n\n\n\n
<form action="" method="post" action="{{ route('contact.store') }}">\n\n @csrf\n\n <div class="form-group">\n <label>Name<\/label>\n <input type="text" class="form-control {{ $errors->has('name') ? 'error' : '' }}" name="name" id="name">\n\n <!-- Error -->\n @if ($errors->has('name'))\n <div class="error">\n {{ $errors->first('name') }}\n <\/div>\n @endif\n <\/div>\n\n <div class="form-group">\n <label>Email<\/label>\n <input type="email" class="form-control {{ $errors->has('email') ? 'error' : '' }}" name="email" id="email">\n\n @if ($errors->has('email'))\n <div class="error">\n {{ $errors->first('email') }}\n <\/div>\n @endif\n <\/div>\n\n <div class="form-group">\n <label>Phone<\/label>\n <input type="text" class="form-control {{ $errors->has('phone') ? 'error' : '' }}" name="phone" id="phone">\n\n @if ($errors->has('phone'))\n <div class="error">\n {{ $errors->first('phone') }}\n <\/div>\n @endif\n <\/div>\n\n <div class="form-group">\n <label>Subject<\/label>\n <input type="text" class="form-control {{ $errors->has('subject') ? 'error' : '' }}" name="subject"\n id="subject">\n\n @if ($errors->has('subject'))\n <div class="error">\n {{ $errors->first('subject') }}\n <\/div>\n @endif\n <\/div>\n\n <div class="form-group">\n <label>Message<\/label>\n <textarea class="form-control {{ $errors->has('message') ? 'error' : '' }}" name="message" id="message"\n rows="4"><\/textarea>\n\n @if ($errors->has('message'))\n <div class="error">\n {{ $errors->first('message') }}\n <\/div>\n @endif\n <\/div>\n\n <input type="submit" name="send" value="Submit" class="btn btn-dark btn-block">\n<\/form><\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Set Up Laravel Email Template<\/h2>\n\n\n\n
Create resources\/views\/mail.blade.php<\/strong> file and add the given below code in it. We will add the contact form values which is sent by site visitor in this template, and you will see these values in your mailbox.<\/p>\n\n\n\n
<h2>Hello<\/h2> <br><br>\n\nYou have got an email from : {{ $name }} <br><br>\n\nUser details: <br><br>\n\nName: {{ $name }} <br>\nEmail: {{ $email }} <br>\nPhone: {{ $phone }} <br>\nSubject: {{ $subject }} <br>\nMessage: {{ $user_query }} <br><br>\n\nThanks<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Configure Laravel Email Server with Mailtrap<\/h2>\n\n\n\n
There are tons of other methods to set up mail a server in Laravel, but we are going to configure Email server in Laravel using Mailtrap.<\/p>\n\n\n\n
Go to your Mailtrap<\/a> SMTP settings tab, select Laravel from integration drop-down, Laravel provides a clean, simple API over the popular SwiftMailer library. With the default Laravel setup you can configure your mailing configuration by setting these values in the .env<\/strong> file in the root directory of your project.<\/p>\n\n\n\n
MAIL_MAILER=smtp\nMAIL_HOST=smtp.mailtrap.io\nMAIL_PORT=2525\nMAIL_USERNAME=your_mailtrap_username\nMAIL_PASSWORD=your_mailtrap_password\nMAIL_ENCRYPTION=tls<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Sending Email in Laravel<\/h2>\n\n\n\n
Execute the below command to setup the Laravel\u2019s basic email function. Following command will create a new Mailable class with contact.php<\/strong> file inside the app\/Mails\/<\/strong> directory.<\/p>\n\n\n\n
php artisan make:mail contact<\/pre><\/div>\n\n\n\nBash<\/p>\n\n\n\n
Again, go to Http\/Controllers\/ContactUsFormController.php<\/strong> file and replace the entire code with the given below code.<\/p>\n\n\n\n
<?php\n\nnamespace App\\Http\\Controllers;\nuse Illuminate\\Http\\Request;\nuse App\\Models\\Contact;\nuse Mail;\n\nclass ContactUsFormController extends Controller {\n\n \/\/ Create Contact Form\n public function createForm(Request $request) {\n return view('contact');\n }\n\n \/\/ Store Contact Form data\n public function ContactUsForm(Request $request) {\n\n \/\/ Form validation\n $this->validate($request, [\n 'name' => 'required',\n 'email' => 'required|email',\n 'phone' => 'required|regex:\/^([0-9\\s\\-\\+\\(\\)]*)$\/|min:10',\n 'subject'=>'required',\n 'message' => 'required'\n ]);\n\n \/\/ Store data in database\n Contact::create($request->all());\n\n \/\/ Send mail to admin\n \\Mail::send('mail', array(\n 'name' => $request->get('name'),\n 'email' => $request->get('email'),\n 'phone' => $request->get('phone'),\n 'subject' => $request->get('subject'),\n 'user_query' => $request->get('message'),\n ), function($message) use ($request){\n $message->from($request->email);\n $message->to('appfinz@gmail.com', 'Admin')->subject($request->get('subject'));\n });\n\n return back()->with('success', 'We have received your message and would like to thank you for writing to us.');\n }\n\n}<\/pre><\/div>\n\n\n\nPHP<\/p>\n\n\n\n
Your contact form is up and running. You can store the user data in the MySQL database and send email to the provided email address.<\/p>\n\n\n\n
Start the application using the following command.<\/p>\n\n\n\n
php artisan serve<\/pre><\/div>\n\n\n\nBash<\/p>\n\n\n\n
Click on the URL to test the Contact Form application in Laravel:<\/p>\n\n\n\n
Conclusion<\/strong>– With the help of this blog you can successfully create a contact form in laravel 7<\/strong>
We hope by the end of this blog you have successfully created your own Contact Us page. For further information, you may contact Appfinz Technologies<\/strong> – a web development company<\/a><\/strong>, as we are a highly experienced Laravel Development Company. We do provide professional Laravel Development services to our clients so that they get maximum benefit from their project.<\/p>\n\n\n\nIf you want to hire Laravel Developers you may contact our business development executives at info@appfinz.com who will assist you accordingly.<\/p>\n","protected":false},"excerpt":{"rendered":"
contact form in laravel 7 or 8<\/p>\n","protected":false},"author":1,"featured_media":755,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1],"tags":[115],"class_list":["post-754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php","tag-contact-form-in-laravel-7-or-8"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=754"}],"version-history":[{"count":3,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/754\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/754\/revisions\/882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/755"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}