Home Bootstrap 4 Reactjs Laravel 8 User Contact Form with Send Email Functionality

Reactjs Laravel 8 User Contact Form with Send Email Functionality

by therichpost
0 comment
Reactjs Laravel 8 User Contact Form with Send Email Functionality

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Laravel 8 User Contact Form with Send Email Functionality.

Reactjs Laravel

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Reactjs Laravel 8 User Contact Form with Send Email Functionality and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

npx create-react-app reactlaravel

cd reactlaravel

npm start // run the project


2. Now we need to run below commands to get bootstrap(for good layout), sweetalert and axios(to post data request to laravel)  modules into our react js app:

npm install sweetalert2-react

npm install bootstrap --save

npm install axios --save

npm start


3. Now friends we need to add below code into our src/App.js file to get final output on web browser:

import React from 'react';
import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';

//Include Sweetalert
import Swal from 'sweetalert2'

//axios for api request
import axios from 'axios';

class AddUser extends React.Component {
      this.addFormData = this.addFormData.bind(this);
  // Mail Form Submission
      const fd = new FormData();
      fd.append('myUsername', this.refs.myUsername.value);
      fd.append('myEmail', this.refs.myEmail.value);
      fd.append('textquery', this.refs.textquery.value);
      axios.post('http://localhost/laravel8/public/api/send/email', fd
    //Success Message in Sweetalert modal
      title: 'Hurray!!',
      text: "Mail has been send successfully.",
      type: 'success',
  render() {
    return (
      <div className="maincontainer">
        <div className="container mb-5 mt-5 text-left">
        <form ref={(el) => this.myFormRef = el}>
        <div className="form-group">
        <input type="email" className="form-control" id="Email" aria-describedby="emailHelp" placeholder="Enter email" ref="myEmail" />
        <div className="form-group">
        <input type="text" className="form-control" id="Username" placeholder="Enter Username" ref="myUsername" />

        <div className="form-group">
        <textarea className="form-control" id="textquery" placeholder="Enter Query" ref="textquery"></textarea>
        <button type="submit" className="btn btn-primary" onClick={this.addFormData}>Send Mail</button>



export default AddUser;


Laravel Section Start


a) Now friends we need to create `email` folder inside `resources/view folder

b) Now create new name.blade.php file inside resources/views/email folder

c) Now add below code into resources/views/ email/name.blade.php file

Name  : {{ $data1["Name"] }}<br>
Email : {{ $data1["Email"] }}<br>
Query : {{ $data1["Query"] }}

2. Now friends, we need to add below code into our laravel 8 project routes/api.php file:

//Email Route which we used in angular http service
Route::post('send/email', [App\Http\Controllers\HomeController::class, 'mail'])->name('email');

3. Now friends, we need to add below code into our laravel 8 project app/Http/Controllers/HomeController.php file:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Mail;

class HomeController extends Controller

    public function mail(Request $request)
        $data = [
                'Name'  => $request->input('myUsername'),
                'Email' => $request->input('myEmail'),
                'Query' => $request->input('textquery')
        //Mail Function
        Mail::send('email.name', ['data1' => $data], function ($m) {
            $m->to('therichposts@gmail.com')->subject('Contact Form Mail!');

        //Json Response For Angular frontend
        return response()->json(["message" => "Email sent successfully."]);

6. Finally but not the last, we need to set mailgun credentials into our Laravel 8 project .env file:


Now we are done friends and don’t forget to start your Laravel 8 project server also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Guys in this post, I am sending email from my reactjs front-end via Laravel 8 backend with the help of mailgun.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.