{"id":331,"date":"2020-10-31T22:00:00","date_gmt":"2020-10-31T22:00:00","guid":{"rendered":"https:\/\/rishikantsri.in\/blog\/?p=331"},"modified":"2024-04-30T10:16:10","modified_gmt":"2024-04-30T10:16:10","slug":"laravel-contact-us-using-ajax","status":"publish","type":"post","link":"https:\/\/rishikantsri.in\/blog\/laravel-contact-us-using-ajax\/","title":{"rendered":"Laravel : Contact Us using Ajax"},"content":{"rendered":"\n

This example focuses on the contact form functionality within a Laravel application(Updated).<\/p>\n\n\n\n

Step 1: Create a Laravel Project<\/p>\n\n\n\n

Step 2: Create a Database and Configure .env<\/code><\/p>\n\n\n\n

Step 3: Create a Database Table<\/p>\n\n\n\n

Step 4: Create a Controller<\/p>\n\n\n\n

Step 5: Define Routes<\/p>\n\n\n\n

Step 6: Create Blade Views<\/p>\n\n\n\n

Step 7: Add JavaScript Ajax<\/p>\n\n\n\n

Step 8: Create Mail Notifications<\/p>\n\n\n\n

Step 9: Configure Mail Settings<\/p>\n\n\n\n

Step 10: Styling and Additional Features<\/p>\n\n\n\n

Step 1: Create a Laravel Project<\/h3>\n\n\n\n

Assuming you have Laravel installed, you can create a new Laravel project using the following command:<\/p>\n\n\n\n

PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
laravel <\/span>new<\/span> <\/span>ContactUsBlog<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Replace ContactUsAjax<\/code> with your preferred project name.<\/p>\n\n\n\n
Or By Laragoan <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Step 2: Create a Database and Configure .env<\/code><\/h3>\n\n\n\n
Create a database for your project and configure the database connection settings in the .env<\/code> file, including the DB_DATABASE<\/code>, DB_USERNAME<\/code>, and DB_PASSWORD<\/code> values.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 3: Create a Database Table<\/h3>\n\n\n\n
Create a migration and model for the contacts<\/code> table using Artisan commands:<\/p>\n\n\n\n
PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
php artisan make:model Contact <\/span>-<\/span>m<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
This will generate a model in the app<\/code>\/Models directory and a migration file in the database\/migrations<\/code> directory. You can update the migration file to define the table structure as shown in your original migration code:<\/p>\n\n\n\n
PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
\/\/ In the generated migration file<\/span><\/span>\n<?<\/span>php<\/span><\/span>\n<\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Database<\/span>\\<\/span>Migrations<\/span>\\<\/span>Migration<\/span>;<\/span><\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Database<\/span>\\<\/span>Schema<\/span>\\<\/span>Blueprint<\/span>;<\/span><\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Support<\/span>\\<\/span>Facades<\/span>\\<\/span>Schema<\/span>;<\/span><\/span>\n<\/span>\nreturn<\/span> <\/span>new<\/span> <\/span>class<\/span> <\/span>extends<\/span> Migration<\/span><\/span>\n{<\/span><\/span>\n    <\/span>\/**<\/span><\/span>\n     * Run the migrations.<\/span><\/span>\n     *<\/span><\/span>\n     * <\/span>@return<\/span> <\/span>void<\/span><\/span>\n     *\/<\/span><\/span>\n    <\/span>public<\/span> <\/span>function<\/span> up()<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>Schema<\/span>::<\/span>create<\/span>(<\/span>'contacts'<\/span>,<\/span> <\/span>function<\/span> (<\/span>Blueprint<\/span> $table) {<\/span><\/span>\n            $table<\/span>-><\/span>id<\/span>()<\/span>;<\/span><\/span>\n            $table<\/span>-><\/span>string<\/span>(<\/span>'name'<\/span>)<\/span>;<\/span><\/span>\n            $table<\/span>-><\/span>string<\/span>(<\/span>'email'<\/span>)<\/span>;<\/span><\/span>\n            $table<\/span>-><\/span>string<\/span>(<\/span>'phone'<\/span>)<\/span>;<\/span><\/span>\n            $table<\/span>-><\/span>string<\/span>(<\/span>'subject'<\/span>)<\/span>;<\/span><\/span>\n            $table<\/span>-><\/span>text<\/span>(<\/span>'message'<\/span>)<\/span>;<\/span><\/span>\n            $table<\/span>-><\/span>timestamps<\/span>()<\/span>;<\/span><\/span>\n        }<\/span>)<\/span>;<\/span><\/span>\n    }<\/span><\/span>\n<\/span>\n    <\/span>\/**<\/span><\/span>\n     * Reverse the migrations.<\/span><\/span>\n     *<\/span><\/span>\n     * <\/span>@return<\/span> <\/span>void<\/span><\/span>\n     *\/<\/span><\/span>\n    <\/span>public<\/span> <\/span>function<\/span> down()<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>Schema<\/span>::<\/span>dropIfExists<\/span>(<\/span>'contacts'<\/span>)<\/span>;<\/span><\/span>\n    }<\/span><\/span>\n};<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Update Contact Model<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
<?<\/span>php<\/span><\/span>\n<\/span>\nnamespace<\/span> App<\/span>\\<\/span>Models;<\/span><\/span>\n<\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Database<\/span>\\<\/span>Eloquent<\/span>\\<\/span>Factories<\/span>\\<\/span>HasFactory<\/span>;<\/span><\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Database<\/span>\\<\/span>Eloquent<\/span>\\<\/span>Model<\/span>;<\/span><\/span>\n<\/span>\nclass<\/span> Contact <\/span>extends<\/span> Model<\/span><\/span>\n{<\/span><\/span>\n    <\/span>use<\/span> <\/span>HasFactory<\/span>;<\/span><\/span>\n    <\/span>public<\/span> $fillable <\/span>=<\/span> [<\/span><\/span>\n        <\/span>'name'<\/span>,<\/span> <\/span>'email'<\/span>,<\/span> <\/span>'phone'<\/span>,<\/span> <\/span>'subject'<\/span>,<\/span> <\/span>'message'<\/span><\/span>\n    ];<\/span><\/span>\n<\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Then, run the migration to create the table:<\/p>\n\n\n\n
PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
php artisan migrate<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 4: Create a Controller<\/h3>\n\n\n\n
Create a controller to handle the contact form functionality:<\/p>\n\n\n\n
php artisan make:controller Frontend\/HomeController<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In the generated HomeController.php<\/code> file, add the contactForm<\/code> and storeContactForm<\/code> methods <\/p>\n\n\n\n
PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
<?<\/span>php<\/span><\/span>\n<\/span>\nnamespace<\/span> App<\/span>\\<\/span>Http<\/span>\\<\/span>Controllers<\/span>\\<\/span>Frontend;<\/span><\/span>\n<\/span>\nuse<\/span> <\/span>App<\/span>\\<\/span>Http<\/span>\\<\/span>Controllers<\/span>\\<\/span>Controller<\/span>;<\/span><\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Http<\/span>\\<\/span>Request<\/span>;<\/span><\/span>\nuse<\/span> <\/span>App<\/span>\\<\/span>Models<\/span>\\<\/span>Contact<\/span>;<\/span><\/span>\nuse<\/span> <\/span>Illuminate<\/span>\\<\/span>Support<\/span>\\<\/span>Facades<\/span>\\<\/span>Validator<\/span>;<\/span><\/span>\n<\/span>\nclass<\/span> HomeController <\/span>extends<\/span> Controller<\/span><\/span>\n{<\/span><\/span>\n    <\/span>public<\/span> <\/span>function<\/span> contactForm()   <\/span>\/\/ no use in spa<\/span><\/span>\n    {<\/span><\/span>\n        <\/span>return<\/span> view<\/span>(<\/span>'contactForm'<\/span>)<\/span>;  <\/span>\/\/ not implemented<\/span><\/span>\n    }<\/span><\/span>\n<\/span>\n    <\/span>public<\/span> <\/span>function<\/span> storeContactForm(<\/span>Request<\/span> $request)<\/span><\/span>\n    {<\/span><\/span>\n<\/span>\n        $validator <\/span>=<\/span> <\/span>Validator<\/span>::<\/span>make<\/span>(<\/span>$request<\/span>-><\/span>all<\/span>(),<\/span> [<\/span><\/span>\n            <\/span>'name'<\/span> <\/span>=><\/span> <\/span>'required'<\/span>,<\/span><\/span>\n            <\/span>'email'<\/span> <\/span>=><\/span> <\/span>'required|email'<\/span>,<\/span><\/span>\n            <\/span>'phone'<\/span> <\/span>=><\/span> <\/span>'required|digits:10'<\/span>,<\/span><\/span>\n            <\/span>'subject'<\/span> <\/span>=><\/span> <\/span>'required'<\/span>,<\/span><\/span>\n            <\/span>'message'<\/span> <\/span>=><\/span> <\/span>'required'<\/span>,<\/span><\/span>\n        ]<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n        <\/span>if<\/span> (<\/span>!<\/span>$validator<\/span>-><\/span>passes<\/span>()<\/span>) {<\/span><\/span>\n<\/span>\n            <\/span>return<\/span> response<\/span>()<\/span>-><\/span>json<\/span>(<\/span>[<\/span>'error'<\/span> <\/span>=><\/span> $validator<\/span>-><\/span>errors<\/span>()<\/span>-><\/span>all<\/span>()<\/span>]<\/span>)<\/span>;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        <\/span>try<\/span> {<\/span><\/span>\n            $contact <\/span>=<\/span> <\/span>new<\/span> <\/span>Contact<\/span>;<\/span><\/span>\n            $contact<\/span>-><\/span>name <\/span>=<\/span> $request<\/span>-><\/span>name;<\/span><\/span>\n            $contact<\/span>-><\/span>email <\/span>=<\/span> $request<\/span>-><\/span>email;<\/span><\/span>\n            $contact<\/span>-><\/span>phone <\/span>=<\/span> $request<\/span>-><\/span>phone;<\/span><\/span>\n            $contact<\/span>-><\/span>subject <\/span>=<\/span> $request<\/span>-><\/span>subject;<\/span><\/span>\n            $contact<\/span>-><\/span>message <\/span>=<\/span> $request<\/span>-><\/span>message;<\/span><\/span>\n            $contact<\/span>-><\/span>save<\/span>()<\/span>;<\/span><\/span>\n<\/span>\n            $data <\/span>=<\/span> array(<\/span><\/span>\n                <\/span>'name'<\/span> <\/span>=><\/span> $request<\/span>-><\/span>name<\/span>,<\/span><\/span>\n                <\/span>'email'<\/span> <\/span>=><\/span> $request<\/span>-><\/span>email<\/span>,<\/span><\/span>\n                <\/span>'phone'<\/span> <\/span>=><\/span> $request<\/span>-><\/span>phone<\/span>,<\/span><\/span>\n                <\/span>'subject'<\/span> <\/span>=><\/span> $request<\/span>-><\/span>subject<\/span>,<\/span><\/span>\n                <\/span>'message'<\/span> <\/span>=><\/span> $request<\/span>-><\/span>message<\/span>,<\/span><\/span>\n                <\/span>'attachement'<\/span> <\/span>=><\/span> $input[<\/span>'attachement'<\/span>] <\/span>??<\/span> <\/span>'default.jpeg'<\/span>,<\/span><\/span>\n            );<\/span><\/span>\n              <\/span>return<\/span> response<\/span>()<\/span>-><\/span>json<\/span>(<\/span>[<\/span>'success'<\/span> <\/span>=><\/span> <\/span>'Your message has been sent. Thank you!'<\/span>]<\/span>)<\/span>;<\/span><\/span>\n        } <\/span>catch<\/span> (<\/span>\\<\/span>Exception<\/span> $e) {<\/span><\/span>\n            <\/span>return<\/span> response<\/span>()<\/span>-><\/span>json<\/span>(<\/span>[<\/span>'success'<\/span> <\/span>=><\/span> <\/span>'Try after sometime. Thank you!'<\/span>]<\/span>)<\/span>;<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Step 5: Define Routes<\/h3>\n\n\n\n
Define the routes in the routes\/web.php<\/code> file:<\/p>\n\n\n\n
PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
use<\/span> <\/span>App<\/span>\\<\/span>Http<\/span>\\<\/span>Controllers<\/span>\\<\/span>Frontend<\/span>\\<\/span>HomeController<\/span>;<\/span><\/span>\n<\/span>\nRoute<\/span>::<\/span>get<\/span>(<\/span>'\/contact-form'<\/span>,<\/span> [<\/span>HomeController<\/span>::class<\/span>,<\/span> <\/span>'contactForm'<\/span>]<\/span>)<\/span>-><\/span>name<\/span>(<\/span>'contact-form'<\/span>)<\/span>;<\/span><\/span>\nRoute<\/span>::<\/span>post<\/span>(<\/span>'\/contact-form'<\/span>,<\/span> [<\/span>HomeController<\/span>::class<\/span>,<\/span> <\/span>'storeContactForm'<\/span>]<\/span>)<\/span>-><\/span>name<\/span>(<\/span>'contact-form.store'<\/span>)<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n
These routes include a home page and the contact form routes.<\/p>\n\n\n\n
Step 6: Create Blade Views<\/h3>\n\n\n\n
Create Blade views for the home page and contact form. You can place these views in the resources\/views<\/code> directory:<\/p>\n\n\n\n
    \n
  • resources\/views\/contact-form.blade.php<\/code> (for the contact form)<\/li>\n<\/ul>\n\n\n\n
    In the contact form view, include the form HTML.<\/p>\n\n\n\n
    PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
    <<\/span>main<\/span>><\/span><\/span>\n<<\/span>section id<\/span>=<\/span>"contact"<\/span> <\/span>class=<\/span>"contact"<\/span>><\/span><\/span>\n<\/span>\n<<\/span>div <\/span>class=<\/span>"container"<\/span> data<\/span>-<\/span>aos<\/span>=<\/span>"fade-up"<\/span>><\/span><\/span>\n    <\/span><<\/span>div <\/span>class=<\/span>"section-title"<\/span>><\/span><\/span>\n        <\/span><<\/span>h2<\/span>><\/span>CONTACT US<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n        <\/span><<\/span>p<\/span>><\/span>Connect with us to build an inclusive <\/span>and<\/span> progressive organizational environment<\/span>.<\/span><\/span>\n        <\/span><\/<\/span>p<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span><<\/span>div <\/span>class=<\/span>"row"<\/span>><\/span><\/span>\n        <\/span><<\/span>div <\/span>class=<\/span>"col-lg-6"<\/span>><\/span><\/span>\n            <\/span><<\/span>div <\/span>class=<\/span>"alert alert-danger print-error-msg"<\/span> style<\/span>=<\/span>"display:none"<\/span>><\/span><\/span>\n                <\/span><<\/span>ul<\/span>><\/<\/span>ul<\/span>><\/span><\/span>\n            <\/span><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><<\/span>form id<\/span>=<\/span>"contactus"<\/span>><\/span><\/span>\n                {{ csrf_field<\/span>()<\/span> }}<\/span><\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"form-group"<\/span>><\/span><\/span>\n                    <\/span><<\/span>input placeholder<\/span>=<\/span>"Your Name"<\/span> type<\/span>=<\/span>"text"<\/span> name<\/span>=<\/span>"name"<\/span> <\/span>class=<\/span>"form-control"<\/span> id<\/span>=<\/span>"name"<\/span> <\/span><\/span>\n                    value<\/span>=<\/span>"{{ old('name') }}"<\/span> autocomplete<\/span>=<\/span>"off"<\/span> required<\/span><\/span>\n                    <\/span>><\/span><\/span>\n                    <\/span><<\/span>small<\/span>><\/<\/span>small<\/span>><\/span><\/span>\n                    <\/span>@if<\/span> ($errors<\/span>-><\/span>has<\/span>(<\/span>'name'<\/span>)<\/span>)<\/span><\/span>\n                    <\/span><<\/span>span <\/span>class=<\/span>"text-danger"<\/span>><\/span>{{ $errors<\/span>-><\/span>first<\/span>(<\/span>'name'<\/span>)<\/span> }}<\/span><\/<\/span>span<\/span>><\/span><\/span>\n                    <\/span>@endif<\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"form-group mt-3"<\/span>><\/span><\/span>\n                    <\/span><<\/span>input placeholder<\/span>=<\/span>"Your Email"<\/span> type<\/span>=<\/span>"email"<\/span> <\/span>class=<\/span>"form-control"<\/span> name<\/span>=<\/span>"email"<\/span> id<\/span>=<\/span>"email"<\/span> <\/span><\/span>\n                    value<\/span>=<\/span>"{{ old('email') }}"<\/span> autocomplete<\/span>=<\/span>"off"<\/span> required<\/span><\/span>\n                    <\/span>><\/span><\/span>\n                    <\/span><<\/span>small<\/span>><\/<\/span>small<\/span>><\/span><\/span>\n                    <\/span>@if<\/span> ($errors<\/span>-><\/span>has<\/span>(<\/span>'email'<\/span>)<\/span>)<\/span><\/span>\n                    <\/span><<\/span>span <\/span>class=<\/span>"text-danger"<\/span>><\/span>{{ $errors<\/span>-><\/span>first<\/span>(<\/span>'email'<\/span>)<\/span> }}<\/span><\/<\/span>span<\/span>><\/span><\/span>\n                    <\/span>@endif<\/span><\/span>\n<\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"form-group mt-3"<\/span>><\/span><\/span>\n                    <\/span><<\/span>input type<\/span>=<\/span>"text"<\/span> pattern<\/span>=<\/span>"[1-9]{1}[0-9]{9}"<\/span> maxlength<\/span>=<\/span>"10"<\/span> name<\/span>=<\/span>"phone"<\/span> id<\/span>=<\/span>"phone"<\/span> <\/span><\/span>\n                    <\/span>class=<\/span>"form-control"<\/span> placeholder<\/span>=<\/span>"10 digits"<\/span> autocomplete<\/span>=<\/span>"off"<\/span> <\/span><\/span>\n                    value<\/span>=<\/span>"{{ old('phone') }}"<\/span> required<\/span><\/span>\n                    <\/span>><\/span><\/span>\n                    <\/span><<\/span>small<\/span>><\/<\/span>small<\/span>><\/span><\/span>\n                    <\/span>@if<\/span> ($errors<\/span>-><\/span>has<\/span>(<\/span>'phone'<\/span>)<\/span>)<\/span><\/span>\n                    <\/span><<\/span>span <\/span>class=<\/span>"text-danger"<\/span>><\/span>{{ $errors<\/span>-><\/span>first<\/span>(<\/span>'phone'<\/span>)<\/span> }}<\/span><\/<\/span>span<\/span>><\/span><\/span>\n                    <\/span>@endif<\/span><\/span>\n<\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"form-group mt-3"<\/span>><\/span><\/span>\n                    <\/span><<\/span>input type<\/span>=<\/span>"text"<\/span> name<\/span>=<\/span>"subject"<\/span> id<\/span>=<\/span>"subject"<\/span> <\/span>class=<\/span>"form-control"<\/span> placeholder<\/span>=<\/span>"Subject"<\/span> <\/span><\/span>\n                    value<\/span>=<\/span>"{{ old('subject') }}"<\/span><\/span>\n                    <\/span>><\/span><\/span>\n                    <\/span><<\/span>small<\/span>><\/<\/span>small<\/span>><\/span><\/span>\n                    <\/span>@if<\/span> ($errors<\/span>-><\/span>has<\/span>(<\/span>'subject'<\/span>)<\/span>)<\/span><\/span>\n                    <\/span><<\/span>span <\/span>class=<\/span>"text-danger"<\/span>><\/span>{{ $errors<\/span>-><\/span>first<\/span>(<\/span>'subject'<\/span>)<\/span> }}<\/span><\/<\/span>span<\/span>><\/span><\/span>\n                    <\/span>@endif<\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"form-group mt-3"<\/span>><\/span><\/span>\n                    <\/span><<\/span>textarea placeholder<\/span>=<\/span>"Message"<\/span> name<\/span>=<\/span>"message"<\/span> id<\/span>=<\/span>"message"<\/span> rows<\/span>=<\/span>"3"<\/span> <\/span><\/span>\n                    <\/span>class=<\/span>"form-control"<\/span>><\/span>{{ old<\/span>(<\/span>'message'<\/span>)<\/span> }}<\/span><\/span>\n                    <\/span><\/<\/span>textarea<\/span><\/span>\n                    <\/span>><\/span><\/span>\n                    <\/span><<\/span>small<\/span>><\/<\/span>small<\/span>><\/span><\/span>\n                    <\/span>@if<\/span> ($errors<\/span>-><\/span>has<\/span>(<\/span>'message'<\/span>)<\/span>)<\/span><\/span>\n                    <\/span><<\/span>span <\/span>class=<\/span>"text-danger"<\/span>><\/span>{{ $errors<\/span>-><\/span>first<\/span>(<\/span>'message'<\/span>)<\/span> }}<\/span><\/<\/span>span<\/span>><\/span><\/span>\n                    <\/span>@endif<\/span><\/span>\n<\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"my-3"<\/span>><\/span><\/span>\n                    <\/span><<\/span>div <\/span>class=<\/span>"alert alert-success print-sending-msg"<\/span> style<\/span>=<\/span>"display:none"<\/span>><\/span><\/span>\n                        <\/span><<\/span>ul<\/span>><\/<\/span>ul<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"my-3"<\/span>><\/span><\/span>\n                    <\/span><<\/span>div <\/span>class=<\/span>"alert alert-success print-success-msg"<\/span> style<\/span>=<\/span>"display:none"<\/span>><\/span><\/span>\n                        <\/span><<\/span>ul<\/span>><\/<\/span>ul<\/span>><\/span><\/span>\n                    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><\/<\/span>div<\/span>><\/span><\/span>\n                <\/span><<\/span>div <\/span>class=<\/span>"text-center"<\/span>><<\/span>button type<\/span>=<\/span>"submit"<\/span> <\/span>class=<\/span>"btn btn-success btn-submit"<\/span>><\/span>Send Message<\/span><\/<\/span>button<\/span>><\/<\/span>div<\/span>><\/span><\/span>\n            <\/span><\/<\/span>form<\/span>><\/span><\/span>\n        <\/span><\/<\/span>div<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>div<\/span>><\/span><\/span>\n<\/<\/span>section<\/span>><\/span><\/span>\n<<\/span>main<\/span>><\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
     <\/p>\n\n\n\n
    Step 7: Add JavaScript<\/h3>\n\n\n\n
    In your contact form view (contact-form.blade.php<\/code>), include the JavaScript code  to handle form submission via AJAX.<\/p>\n\n\n\n
    PHP<\/span><\/span><\/path><\/path><\/svg><\/span>
    <<\/span>script src<\/span>=<\/span>"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js"<\/span> integrity<\/span>=<\/span>"sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn\/+\/3e7Jo4EaG7TubfWGUrMQ=="<\/span> crossorigin<\/span>=<\/span>"anonymous"<\/span> referrerpolicy<\/span>=<\/span>"no-referrer"<\/span>><\/<\/span>script<\/span>><\/span><\/span>\n<<\/span>script type<\/span>=<\/span>"text\/javascript"<\/span>><\/span><\/span>\n    $(document)<\/span>.<\/span>ready<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n        $(<\/span>".btn-submit"<\/span>)<\/span>.<\/span>click<\/span>(<\/span>function<\/span>(e) {<\/span><\/span>\n            e<\/span>.<\/span>preventDefault<\/span>()<\/span>;<\/span><\/span>\n          <\/span><\/span>\n            <\/span>var<\/span> _token <\/span>=<\/span> $(<\/span>"input[name='_token']"<\/span>)<\/span>.<\/span>val<\/span>()<\/span>;<\/span><\/span>\n            <\/span>var<\/span> name <\/span>=<\/span> $(<\/span>"input[name='name']"<\/span>)<\/span>.<\/span>val<\/span>()<\/span>;<\/span><\/span>\n            <\/span>var<\/span> email <\/span>=<\/span> $(<\/span>"input[name='email']"<\/span>)<\/span>.<\/span>val<\/span>()<\/span>;<\/span><\/span>\n            <\/span>var<\/span> phone <\/span>=<\/span> $(<\/span>"input[name='phone']"<\/span>)<\/span>.<\/span>val<\/span>()<\/span>;<\/span><\/span>\n            <\/span>var<\/span> subject <\/span>=<\/span> $(<\/span>"input[name='subject']"<\/span>)<\/span>.<\/span>val<\/span>()<\/span>;<\/span><\/span>\n            <\/span>var<\/span> message <\/span>=<\/span> $(<\/span>"textarea[name='message']"<\/span>)<\/span>.<\/span>val<\/span>()<\/span>;<\/span><\/span>\n<\/span>\n            <\/span><\/span>\n            printSendingMsg<\/span>(<\/span>'Sending Message...'<\/span>)<\/span><\/span>\n            $<\/span>.<\/span>ajax<\/span>(<\/span>{<\/span><\/span>\n                url: <\/span>"{{ route('contact-form.store') }}"<\/span>,<\/span><\/span>\n                type: <\/span>'POST'<\/span>,<\/span><\/span>\n                data: {<\/span><\/span>\n                    _token: _token<\/span>,<\/span><\/span>\n                    name: name<\/span>,<\/span><\/span>\n                    email: email<\/span>,<\/span><\/span>\n                    phone: phone<\/span>,<\/span><\/span>\n                    subject: subject<\/span>,<\/span><\/span>\n                    message: message<\/span><\/span>\n                }<\/span>,<\/span><\/span>\n<\/span>\n                success: <\/span>function<\/span>(data) {<\/span><\/span>\n                    <\/span>if<\/span> ($<\/span>.<\/span>isEmptyObject<\/span>(<\/span>data<\/span>.<\/span>error<\/span>)<\/span>) {<\/span><\/span>\n                        <\/span>\/\/ alert(data.success);<\/span><\/span>\n                       <\/span><\/span>\n                        printSuccessMsg<\/span>(<\/span>data<\/span>.<\/span>success<\/span>,<\/span>3000<\/span>)<\/span>;<\/span><\/span>\n                    } <\/span>else<\/span> {<\/span><\/span>\n                     <\/span><\/span>\n                        printErrorMsg<\/span>(<\/span>data<\/span>.<\/span>error<\/span>)<\/span>;<\/span><\/span>\n                    }<\/span><\/span>\n                }<\/span><\/span>\n            }<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n        }<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n        <\/span>function<\/span> printErrorMsg(msg) {<\/span><\/span>\n            $(<\/span>".print-error-msg"<\/span>)<\/span>.<\/span>find<\/span>(<\/span>"ul"<\/span>)<\/span>.<\/span>html<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n           <\/span><\/span>\n            $(<\/span>".print-success-msg"<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'none'<\/span>)<\/span>;<\/span><\/span>\n            $<\/span>.<\/span>each<\/span>(<\/span>msg<\/span>,<\/span> <\/span>function<\/span>(key<\/span>,<\/span> value) {<\/span><\/span>\n                $(<\/span>".print-error-msg"<\/span>)<\/span>.<\/span>find<\/span>(<\/span>"ul"<\/span>)<\/span>.<\/span>append<\/span>(<\/span>'<li>'<\/span> <\/span>+<\/span> value <\/span>+<\/span> <\/span>'<\/li>'<\/span>)<\/span>;<\/span><\/span>\n            }<\/span>)<\/span>;<\/span><\/span>\n<\/span>\n            setTimeout<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n                    $(<\/span>'.print-sending-msg'<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'none'<\/span>)<\/span>;<\/span><\/span>\n                    $(<\/span>".print-error-msg"<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'block'<\/span>)<\/span>;<\/span><\/span>\n                }<\/span>,<\/span> <\/span>2000<\/span>)<\/span>;<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        <\/span>function<\/span> printSendingMsg(msg) {<\/span><\/span>\n         <\/span><\/span>\n            $(<\/span>".print-sending-msg"<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'block'<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>".print-sending-msg"<\/span>)<\/span>.<\/span>find<\/span>(<\/span>"ul"<\/span>)<\/span>.<\/span>html<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>".print-sending-msg"<\/span>)<\/span>.<\/span>find<\/span>(<\/span>"ul"<\/span>)<\/span>.<\/span>append<\/span>(<\/span>'<li>'<\/span> <\/span>+<\/span> msg <\/span>+<\/span> <\/span>'<\/li>'<\/span>)<\/span>;<\/span><\/span>\n            document<\/span>.<\/span>querySelectorAll<\/span>(<\/span>'.form-group'<\/span>)<\/span>.<\/span>forEach<\/span>(<\/span>function<\/span> (elem) {<\/span><\/span>\n\t            elem<\/span>.<\/span>classList<\/span>.<\/span>remove<\/span>(<\/span>'success'<\/span>)<\/span>;<\/span><\/span>\n            }<\/span>)<\/span>;<\/span><\/span>\n         <\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        <\/span>function<\/span> printSuccessMsg(msg<\/span>,<\/span> time) {<\/span><\/span>\n            <\/span><\/span>\n            $(<\/span>".print-success-msg"<\/span>)<\/span>.<\/span>find<\/span>(<\/span>"ul"<\/span>)<\/span>.<\/span>html<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>".print-error-msg"<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'none'<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>".print-sending-msg"<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'none'<\/span>)<\/span>;<\/span><\/span>\n        <\/span><\/span>\n            <\/span>\/\/ $.each( msg, function( key, value ) {<\/span><\/span>\n            $(<\/span>".print-success-msg"<\/span>)<\/span>.<\/span>find<\/span>(<\/span>"ul"<\/span>)<\/span>.<\/span>append<\/span>(<\/span>'<li>'<\/span> <\/span>+<\/span> msg <\/span>+<\/span> <\/span>'<\/li>'<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>".print-success-msg"<\/span>)<\/span>.<\/span>css<\/span>(<\/span>'display'<\/span>,<\/span> <\/span>'block'<\/span>)<\/span>;<\/span><\/span>\n            <\/span><\/span>\n            setTimeout<\/span>(<\/span>function<\/span>() {<\/span><\/span>\n                    $(<\/span>'.print-success-msg'<\/span>)<\/span>.<\/span>fadeOut<\/span>(<\/span>'fast'<\/span>)<\/span>;<\/span><\/span>\n                }<\/span>,<\/span> <\/span>4000<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>"input[name='name']"<\/span>)<\/span>.<\/span>val<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>"input[name='email']"<\/span>)<\/span>.<\/span>val<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>"input[name='phone']"<\/span>)<\/span>.<\/span>val<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>"input[name='subject']"<\/span>)<\/span>.<\/span>val<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            $(<\/span>"textarea[name='message']"<\/span>)<\/span>.<\/span>val<\/span>(<\/span>''<\/span>)<\/span>;<\/span><\/span>\n            <\/span>\/\/ });<\/span><\/span>\n        }<\/span><\/span>\n        <\/span><\/span>\n    }<\/span>)<\/span>;<\/span><\/span>\n<\/<\/span>script<\/span>><\/span> <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
    Front end view <\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Step 8: Create Mail Notifications<\/h3>\n\n\n\n
    Create mail notifications for sending email notifications when a contact form is submitted. You can use the php artisan make:mail<\/code> command to generate mail classes.<\/p>\n\n\n\n
    Step 9: Configure Mail Settings<\/h3>\n\n\n\n
    Configure your email settings in the .env<\/code> file, specifying the mail driver, host, username, password, etc.<\/p>\n\n\n\n
    Step 10: Styling and Additional Features<\/h3>\n\n\n\n
    To make your blog more complete, you can add styling, authentication, user registration, and additional features as needed.<\/p>\n\n\n\n
    Remember that this is a simplified example. In a real-world scenario, you might want to use Laravel’s authentication scaffolding, create separate views for listing and displaying blog posts, and implement user management features.<\/p>\n\n\n\n
    Once you’ve completed these steps, you should have a basic blog with a contact form that allows users to submit messages, which are saved to the database, and email notifications are sent to specified recipients.<\/p>\n\n\n\n
    Please note that developing a full-fledged blog with all the features and best practices can be a substantial project, and this example is intended as a starting point.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This example focuses on the contact form functionality within a Laravel application(Updated). Step 1: Create a Laravel Project Step 2: Create a Database and Configure .env Step 3: Create a Database Table Step 4: Create a Controller Step 5: Define Routes Step 6: Create Blade Views Step 7: Add JavaScript Ajax Step 8: Create Mail […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[3],"_links":{"self":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/331"}],"collection":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/comments?post=331"}],"version-history":[{"count":14,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/331\/revisions"}],"predecessor-version":[{"id":370,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/331\/revisions\/370"}],"wp:attachment":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/media?parent=331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/categories?post=331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/tags?post=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}