Enhancing Contact Forms: Sending Data to WhatsApp
Introduction
In the digital age, communication and connectivity are key components of successful interaction. Contact forms on websites serve as essential gateways for users to connect with businesses or individuals. Integrating instant messaging platforms like WhatsApp with these forms can significantly streamline communication and provide a more direct and immediate channel for engagement.
Understanding the Need for WhatsApp Integration
WhatsApp, being a widely used messaging platform, offers a convenient way for users to communicate. Integrating it with your website's contact form can empower both businesses and users in several ways:
Here I am going to show you how the you can share the data on the whatsapp after sending the data through contact form on the email
Step 1: Create a contact form in your blade
<form action="{{ route('contact.send') }}" method="POST">
@csrf
<div class="row">
<div class="col-md-6">
<label for="f-name">Full Name</label>
<input type="text" value="{{ old('name') }}" id="f-name" name="name"
class="form-control @error('name') is-invalid @enderror"
placeholder="What's your name?">
@error('name')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="col-md-6 mt-20 mt-md-0">
<label for="email-address">Email</label>
<input type="email" value="{{ old('email') }}" id='email-address' name="email"
class="form-control @error('email') is-invalid @enderror"
placeholder="[email protected]">
@error('email')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="col-md-12 mt-20">
<label for="form-sub">Phone</label>
<input type="tel" value="{{ old('phone') }}" id="form-sub" name="phone"
class="form-control @error('phone') is-invalid @enderror"
placeholder="Your phone number">
@error('phone')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="col-md-12 mt-20">
<label for="form-text">Messages</label>
<textarea cols="30" rows="5" name="message" id="form-text" class="form-control pt-15"
placeholder="Your message......">{{ old('message') }}</textarea>
</div>
<div class="col-12 mt-35">
<button type="submit" class="theme-btn theme-btn-lg w-100">Submit Now</button>
</div>
</div>
</form>
Here I have created the contact form and i am expecting that you know how to send contact form data on the email
Step 2: Create one more blade thanks page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thanks</title>
</head>
<body>
<!-- need more help start -->
<section class="pt-125 pb-140 bg_disable">
<div class="container">
<div class="row ">
<div class="col-md-8 mx-auto">
<div class="section-title">
<h2 class="wow fadeInUp mb-1">Thanks for being awesome</h2>
<p class="wow fadeInUp" data-wow-delay="0.3s"> We get your requirement soon someone from our team
will contact you with latest price of the cars</p>
<div class="pt-3">
<button class="btn btn-success" onclick="sendWhatsAppMessage()"><i class="fab fa-whatsapp"></i> Send Details on Whatsapp</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- need more help end -->
</body>
</html>
After submitting the form we are going to redirect the user to this page
Step: 3 Now write the logic to send form data on email
public function contactsend(Request $request)
{
$data = $request->validate([
'name' => 'required|string|max:75',
'phone' => 'required|string|max:15',
'email' => 'required|string|max:50',
'message' => 'nullable|string|max:300',
]);
$ip = $request->ip();
$url = url()->previous();
// $data['data'] =
$data['data'] = ([
'ip' => $ip,
'previous_url' => $url
]);
$em = Setting::where('id','1')->first();
$myEmail = $em->email;
Mail::to($myEmail)->send( new LatestPriceMail($data));
$request->session()->put('contactData', $data);
return redirect()->route('contact.thanks');
}
Here we have first validated the date come from the contact form then using mail we have send it on the email and after sending it on the email we have passed the request data in the session and through session we passed on the thanks blade .
Step: 4 Now create the function to send data on whatsapp
public function thanks(Request $request)
{
$contactData = $request->session()->get('contactData');
return view('frontend.thanks',compact('contactData'));
}
Here in thanks function I have retrived all the data from the session and passed it on the thanks blade through the variable contactData.
Step: 5 Create the js code to send the data on the whatsapp
function sendWhatsAppMessage() {
const phonenum = "{{ str_replace(array(' ','+'),'',$setting->whatsapp) }}";
const phone = "{{ $contactData['phone'] }}"; // Phone number
const message = "Hello, \nI I am {{ $contactData['name'] }}.\n" +
"Phone Number: {{ $contactData['phone'] }}\n" +
"Email: {{ $contactData['email'] }}\n" +
"Message: {{ $contactData['Message'] }}\n" +
const encodedMessage = encodeURIComponent(message);
const url = `https://api.whatsapp.com/send?phone=${phonenum}&text=${encodedMessage}`;
window.open(url);
}
Here we have simply create a javascript and where we have passed all the required detail you can customize the detail and words according to your need. Finally add this js code to the thanks blade.
You should also check Streamline Email Notifications with Laravel's Queue
Share :
