How to pass the reCaptcha token in the g-recaptcha-response property - javascript

I am using Emailjs to handle my email deliveribility but I have an issue when it comes to recatcha verification.
The HTML form works well without the verification but once I activate the recaptcha in emailjs, I will no more get the notification in my email when the form is filled. Emailjs doc says:
To add CAPTCHA support:
Create reCaptcha(opens new window) account or login to the existing account.
Register a new site and add your site domain to the list of domains. If you want to test the template in JSFiddle, please also add
jsfiddle.net to the list.
Follow the "client-side integration" instructions as specified in the reCaptcha dashboard. If you are using the send method, please pass
the reCaptcha token in the g-recaptcha-response property.
Open your template in the EmailJS template editor, go to Settings tab, and check Enable reCAPTCHA V2 verification checkbox.
Specify the secret key obtained from reCaptcha dashboard.
After the above steps have been completed it won’t be possible to send out an email based on this template without solving a CAPTCHA test first. No additional changes are required – we will automatically send the solved CAPTCHA result along with the send email request."
The issue is, I am just a beginner in javascript and I don't seem to understand how to pass the recaptcha token.
Here is my code:
The form
<head>
<script src="https://www.google.com/recaptcha/api.js"></script>
<!--recaptcha-->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#emailjs/browser#3/dist/email.min.js">
</script>
<!--emailjs-->
<script type="text/javascript">
(function(){
emailjs.init("EMAILJS_KEY");
})();
</script>
</head>
<div class="form-container">
<h2>Contact Me</h2>
<p>Feel free to contact me and I will get back to you as soon as possible.</p>
<div class="row">
<div class="col-lg-6">
<form method="POST" id="shev-form">
<input type="text" name="name" id="name_id" placeholder="Name" required>
<input type="email" name="email" id="email_id" placeholder="Email" required>
<input type="text" name="subject" id="subject_id" placeholder="Subject" required>
<textarea name="message" cols="30" rows="5" id="message_id" placeholder="Message" required></textarea>
<div class="g-recaptcha" data-sitekey="MY_SITE_KEY"></div>
<input type="submit" value="Submit" id="submit_id" onclick="sendMail()">
</form>
</div>
The javascript:
function sendMail() {
var params = {
name: document.getElementById("name_id").value,
email: document.getElementById("email_id").value,
subject: document.getElementById("subject_id").value,
message: document.getElementById("message_id").value,
};
const serviceID = "service_ID";
const templateID = "template_ID";
emailjs.send(serviceID, templateID, params)
.then(res=>{
document.getElementById("name_id").value = "";
document.getElementById("email_id").value = "";
document.getElementById("subject_id").value = "";
document.getElementById("message_id").value = "";
console.log(res);
alert("Your message sent successfully!!")
})
.catch(err=>console.log(err));
}
If the recaptcha is not sending a valid response to emailjs, the email will not be submitted.
Kindly help.
Thanks.

Related

Execute Javascript Fetch() Request After PHP Code Executes Successfully

I have a form for resetting a user email which currently consists of a password input element, and a 'Change email address' email input.
<form method="post">
<div id="form-row-password" class="form-row">
<label for="password">Enter Password</label>
<input class="input-gateway" type="password" name="password" id="password">
</div>
<div id="form-row-email" class="form-row">
<label for="email">Change Email Address</label>
<input type="email" name="email" id="email">
</div>
<div class="form-row form-row-submit">
<input type="submit" name="update-email" id="button" value="SEND ACTIVATION LINK">
</div>
</form>
With this current form you enter your password and the email address, and then you get emailed a link to confirm your new/change of email address and it all works as desired.
The current PHP process is as follows:
Santisation and validations of inputs
PDO Prepared Statments that update the mysql database
What I Wish To Achieve
What I want to do is have it so this process is split over two stages using AJAX/fetch() in javascript.
The first step would be the user entering their password, and when verified with the database this input disappears and is replaced with the 'new email address' input element.
I've set up some test javascript that fetches this second input element using a 'test' button.
What I want to do is have this fetch() javascript code trigger when then first stage is successful in the PHP code. But I cannot work out how to do this?
The PHP that processes the inputs I will included in the HTML partials that get added and removed by the fetch() javascript so I'm not concerned about that side of things.
Will I use a 'submit' event listener or an 'onchange' event listener and how will the javascript know that the password submission has been successful when this is done in PHP?
// PSEUDO JAVASCRIPT
let button = document.getElementById('button'),
formRowPassword = document.getElementById('form-row-password'),
formRowEmail = document.getElementById('form-row-email');
var filePath = "modals/email-reset-modal.php";
// what type of event listener is best to use ??
button.addEventListener('click', function(){
fetch(filePath)
.then((response) => {
return response.text();
})
.then((data)=>{
formRowPassword = '';
formRowEmail.textContent = data;
})
.catch((error => {console.log(error)}))
})
Is there a built-in PHP function that can effectively talk to javascript so it executes once the password input (1st stage) has been successful?
Any help would be amazing.
Anna

How to use a SMTP in an html contact form?

I have the following contact form:
<div class="container red_layer_footer">
<form action="/var/www/cgi-bin/FormMail.pl" method="POST">
<input type=hidden name="recipient" value="mymail#gmail.com">
<input type=hidden name="subject" value="Nuova mail">
<input type=hidden name="redirect" value="http://www.evogale.it/grazie.html">
<h2>CONTATTI</h2>
<div class="name">
<label for="name"></label>
<input type="text" placeholder="Nome" name="name" id="name_input" required>
</div>
<div class="email">
<label for="email"></label>
<input type="email" placeholder="Mail" name="email" id="email_input" required>
</div>
<div class="message">
<label for="message"></label>
<textarea name="message" placeholder="Messaggio" id="message_input" cols="30" rows="5" required></textarea>
</div>
<div class="submit">
<input type="submit" value="Invia Messaggio" id="form_button">
</div>
<input type=hidden name="required" value="email,name,message">
</form> <!-- // End form -->
</div> <!-- End #container -->
In an html file, and I want it to send email via an SMTP. How should i modify the code to make that happen? Looking around on the web I've seen that I might add some jQuery code?
To be able to send emails, you need to provide the correct SMTP server when you set up your email client. Most of the internet systems use SMTP as a method to transfer mail from one user to another. It is a push protocol. In order to use SMTP you need to configure your Gmail. You need to change two settings of your gmail account from which you are sending the mail i.e.
1. Revoke 2-step verification
2. Enabling less secure apps to access Gmail. You can easily do this by clicking on the link Enable
After this just create a html file and include SMTP in your tag :
<script src="https://smtpjs.com/v3/smtp.js"></script>
Below is the html code which you will need to run in order to send the mail.
<script src=
"https://smtpjs.com/v3/smtp.js">
</script>
<script type="text/javascript">
function sendEmail() {
Email.send({
Host: "smtp.gmail.com",
Username: "sender#email_address.com",
Password: "Enter your password",
To: 'receiver#email_address.com',
From: "sender#email_address.com",
Subject: "Sending Email using javascript",
Body: "Well that was easy!!",
})
.then(function (message) {
alert("mail sent successfully")
});
}
</script>
<body>
<form method="post">
<input type="button" value="Send Email"
onclick="sendEmail()" />
</form>
</body>
NOTE : Best and Secure way to use above method with SecureToken as above method is for understanding purpose, above approach is highly insecure as it exposes credentials to the users , for how to enable Security you can check this https://smtpjs.com/

How to pass value to web page form after using window.open

I am trying to login to an auction website, with the ultimate goal of placing bids at a specific time without being physically in front of the computer.
How to I pass values to the webpage form, and login to the site?
The login page loads after hitting submit, but the input from exampleInputEmail1 and exampleInputPassword1 is not passed to the webpage.
I thought this might have to do with onload, but no luck so far.
<!DOCTYPE html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function openGoodWill() {
var newWindow;
newWindow = window.open('https://www.shopgoodwill.com/SignIn');
newWindow.onload = function(){
window.document.getElementById('Username').value = 'exampleInputEmail1';
window.document.getElementById('Password').value = 'exampleInputPassword1';
window.document.getElementById('login-submit').dispatchEvent(new MouseEvent("click"));
}
}
</script>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<button onclick="openGoodWill()" type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
The login page loads after hitting submit, but the input from exampleInputEmail1 and exampleInputPassword1 is not passed to the webpage.
To pass from javascript using window.open,
For Non-Sensitive Info
GET
you can transfer data with URL using GETmethod.
window.open('your_site?data1='+data1+'&data2='+data2,'_SELF');
Cookies
You can save data in cookie, Then after redirect, Again you can read from cookies.
Local Storage
Like cookie, You can store data in Local Storage using Javascript. Then you can read from re-directed site.
Example :
Write
localStorage.setItem('userId','10036656');
Read
var userId = localStorage.getItem('userId');
But In Your Case
To handle sensitive information like Login-In details. Please handle with server directly.
You can use Form Submit
OR
Please use AJAX Request using Javascript.
AJAX Tutorial

Replace html5 bubble messages with message under fields

I have the below code and I would like instead of bubbles showing messages underneath the error fields. What addition should I make to my code?
<script type="text/javascript">
$(document).ready(function() {
$('#emailform').submit(function(event) {
event.preventDefault();
$.ajax({
backedn validation
}
});
});
});
</script>
<body>
<form id="emailform" class="laform" method="post" action="*.php">
<label>Email*: </label>
<input type="email" name="email" id="email" class="input" required oninvalid="this.setCustomValidity('The email address you entered is not valid')" oninput="this.setCustomValidity('')" onchange="try{setCustomValidity('')}catch(e){}">
<label class="col-md-12 labelcom">MSG</label>
<textarea class="input2" name="comment" id="comment" required oninvalid="this.setCustomValidity('This field is mandatory')" oninput="this.setCustomValidity('')" placeholder="Enter your comments / suggestions..."></textarea>
<button type="submit" class="btn" name="submit" value="submit">SUBMIT</button>
</form>
</body>
Overriding the HTML required message is not possible. More Information.
Just use Javascript and create your own validation checking and append messages under the elements if the validation fails.
Edit: After doing more research I found another SO post that contained more insightful information.
Apparently, it is possible. But you will have to use Javascript.
This code changes the message of the validation box the HTML required provides. You should probably look up browser support.
document.getElementById("input").setCustomValidity("Message");

HTML Javascript Form

I have a simple form on my website where it ask the user for their email and the city they're located in like this:
I'm using EmailJS (emailjs.com) and MailJet (mailjet.com) services and while EmailJS and MailJet are doing their jobs, I'm ultimately not able to view the actual form data such as the email and city that was enter anywhere on MailJet, EmailJS or emails that are sent to me. I'm new to web development.
Here's my html code:
<form class="form-inline" type="text" onsubmit="emailjs.sendForm('mailjet', 'myTempNameFromEmailJS', this); return true;" method="get">
<div class="form-group">
<input type="email" class="contactUsEmail" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="contactUsEmail" placeholder="City">
</div>
<button type="submit" class="btn btn-primary contactUsButton">Signup</button>
</form>
What in the world am I doing wrong? I've essentially been working on this since yesterday and can't figure out what I'm doing wrong.
According to the emailjs docs at https://www.emailjs.com/docs/api-reference/emailjs-sendform/ the third parameter of the sendForm method should be "form_id", the id of the form used to collect the parameters. Currently you're sending "this", but that's the variable which (in that particular context) holds the JavaScript representation of the whole form element.
I think you should change it to this.id:
emailjs.sendForm('mailjet', 'myTempNameFromEmailJS', this.id);
Im not familiar with mail jet, however, usually to gain the values out of your forms you need to add the name attribute, for example
<input type="email" class="contactUsEmail" placeholder="Enter email" name="contactUsEmail"/>
name="contactUsEmail"/>

Categories

Resources