I am working for a company, and I need to create a Wordpress contact form to call an AWS Api Gateway with a POST Request, but the API function needs to get some parameters:
Domain; SecurityKey (each user needs this key); ContentID (The contentID of the page, it's from different articles, so each article have an ID); UserID (the logged user ID); FormEmail (the email that the user will fill in the contact form); UserSession; FormFullName; FormUserMessage; UserPageURL; I am struggling to find any answers on how to get these parameters from a WP contact form.
We are using Wordpress, AWS Lambada Api Gateway, and Simple Email Service to send the email to the sponsor of the Article. I need a way to get the UserId, UserSession, SecurityKey params when the user is logged in our platform.
Until now, I am able to send the Form Data (Name, Email, Message), but I do not want the user to type the Session, ID, SecurityKey. I tested creating these form fields own my own and submitting the form, and it does work, but I want it to get these values automatically when the user logs in.
This is the code I have now:
<head>
<script>
function submitToAPI(e) {
e.preventDefault();
var URL = ";;
var Namere = /[A-Za-z]{1}[A-Za-z]/;
if (!Namere.test(jQuery("#FormFullName").val())) {
alert ("Name can not less than 2 char");
return;
}
if (jQuery("#FormEmail").val()=="") {
alert ("Please enter your email id");
return;
}
var reeamil = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
if (!reeamil.test(jQuery("#FormEmail").val())) {
alert ("Please enter valid email address");
return;
}
var FormFullName = jQuery("#FormFullName").val();
var FormEmail = jQuery("#FormEmail").val();
var UserMessage = jQuery("#UserMessage").val();
var data = {
FormFullName : FormFullName,
FormEmail : FormEmail,
UserMessage : UserMessage
};
jQuery.ajax({
type: "POST",
url : ";,
dataType: "json",
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function () {
// clear form and show a success message
alert("Thank you for your review. It will be posted shortly.");
document.getElementById("contact-form").reset();
location.reload();
},
error: function () {
// show an error message
alert("Error.");
}});
}
</script>
</head>
<form id="contact-form" method="post">
<h4>Name:</h4>
<input type="text" style="height:35px;" id="FormFullName" placeholder="Enter name here…" class="form-control" /><br/>
<h4>Email:</h4>
<input type="email" style="height:35px;" id="FormEmail" placeholder="Enter email here…" class="form-control"/><br/>
<h4>How can we help you?</h4>
<textarea id="UserMessage" rows="3" placeholder="Enter your message…" class="form-control" style="width:100%;"></textarea><br/>
<button type="button" onClick="submitToAPI(event)" class="btn btn-lg" style="margin-top:20px;">Submit</button>
</form>
Edit: I don't know how it works, but I don't want people to be able to inspect element on the form and see these hidden fields.
PS: we are not using a serverless website yet, we are changing to it in a near future.
Thanks!