I'm stuck here. I want a button (in this case; the Send-email button) to trigger mailto without opening an email client, I want it to automatically send (in JS, smtp) . I don't know if I asked too much and if this is even possible.. This is my form:
<form id="form">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
<input id="username" type="text" class="form-control blender-pro-book form-text" placeholder="Username" aria-describedby="basic-addon1">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-user-secret fa-lg"></i></span>
<input id="message" type="text" class="form-control blender-pro-book form-text" placeholder="Message" aria-describedby="basic-addon1">
</div>
<p class="error-holder"><span id="error" class="error blender-pro-book"><i class="fa fa-exclamation-triangle"></i>Try again please!</span></p>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3 col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3">
<button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>
</div>
</div>
</form>
I've tried putting in several codes but they all result in opening an email client. Then, I discovered SmtpJS.com. I have put the script code in my index file, but I have no clue where to put this code:
Email.send("from#you.com",
"to#them.com",
"This is a subject",
"this is the body",
"mx1.hostinger.nl", */ That's my hosting SMTP /*
"username",
"password");
I just want this button to send an email:
<button id="start" type="button" class="btn btn-default btn-lg btn-block btn-custom blender-pro-book">Send e-mail <i class="fa fa-hand-o-right blue-text-color"></i></button>
Can you please tell me where to put it in my form?
Thank you a lot!
#Ty Q.'s answer is the best approach, but after reviewing SmtpJS, this is how you'd use it:
<html>
<head>
</head>
<body>
<form id="form">
<!--form goes here-->
<input type="submit" value="Submit" />
</form>
<script src="http://smtpjs.com/smtp.js"></script>
<script>
function sendMail(e){
event.preventDefault();
console.log('This will send the mail through SmtpJS');
Email.send("from#you.com",
"to#them.com",
"This is a subject",
"this is the body",
"smtp.yourisp.com",
"username",
"password");
}
function init(){
document.getElementById('form').onsubmit = sendMail;
}
window.onload = init;
</script>
</body>
</html>
Why use some JavaScript Emailing service? Just use PHP.
PHP is a server-sided language. Using commands like $To = $_POST['to']; and $From = $_POST['from'];, you can acquire data sent from a form element.
I recommend you read the PHP manual on the Mail function in order to learn how to send an e-mail using PHP. PHP Mail function It's quite simple actually. If you don't know much of PHP, just go to W3Schools.com's PHP tutorials.
<form method="POST" action="mymail.php">
<input name="to" type="text" placeholder="To:" value="" />
<input name="from" type="text" placeholder="From:" value="" />
<input name="cc" type="text" placeholder="CC:" value="" />
<!-- Blah Blah Blah, your code goes here, I'm not very good at this site -->
<input type="submit" value="Submit" />
</form>
In the above code, it uses a form element with the attributes method and action. Method tells the client that it's going to run in POST, or the more secure version of GET. GET can be seen in a URL like this: https://mywebsite.co/index.php?input=Hi
Unlike GET, POST cannot be seen in the URL, thus it is harder to interfere with. In other words, POST is safer to use. Action represents the file the data is going to be sent to. The server will process the data and it will interpret it into the code (if provided). INPUT tags must have a "name" in order for them to be receivable by the server. The "type" represents whether the INPUT will be just regular "text", a "password", or a "submit". Submit is a button which'll tell the form to send the data when clicked. Placeholder is an input attribute for TEXT and PASSWORD which will show the specified input when the value is null. Value is the attribute which basically contains the parts you want the server to receive. Except for the button, SUBMIT. The value for the SUBMIT button is just the text the button will show. You do not gather data from the button itself.
Related
I have two html pages. First one contains a form with a submit button that navigates to the second page.
The second page basically displays the details entered. How can I display the details entered on the previous page without connecting it to a database?
Page 1 HTML:
<main class="form-signin">
<form method="get" action="confirmation.html">
<div class="card">
<h1>Enter details to book your room</h1>
<label for="inputName">Enter your full name</label>
<input type="text" id="inputName" class="form-control" placeholder="Full Name" required autofocus>
<label for="inputEmail">Enter your email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email Id" required>
<button class="btn btn-lg btn-primary" type="submit">Book Now</button>
</div>
</form>
</main>
Page 2 HTML :
<div class="card">
<h1>Your stay has been successfully booked!</h1>
<div class="details">
<h5>Booking Details</h5>
<h3>Name : <span class="name">name</span> </h3>
<h3>Email Address : <span class="email">email</span></h3>
</div>
<button class="btn btn-lg btn-primary" type="submit">Back to home</button>
</div>
I intend to change the span text on Page 2 with details from Page 1 using javascript
You either store what you need to store in localStorage and read them in the second page, or pass the params as pathParams and decode the URL in the second page.
No need to use cookies, since those will be sent with each one of your requests and it will consume bandwidth you can avoid.
Please refer to this answer about local storage:
Storing Objects in HTML5 localStorage
We have a custom registration form on our wordpress website. we are using google recaptcha and input Human question field to stop spam registrations but still the spam registrations won't stop.
Could anyone suggest what exactly needs to be done?
The Registration form code is as follows.
The JS code has 2 functions one for Recaptcha and another for Validate the "Question field".
The register submit button is by default disabled and gets enabled only when the recaptcha call backs the function.
function recaptchaCallback() {
$('#submitBtn').removeAttr('disabled');
}
function validateForm() {
var a = document.forms["registerform"]["question"].value;
var b = document.forms["registerform"]["user_login"].value;
var c = document.forms["registerform"]["user_email"].value;
if (a == null || a != "5") {
alert("Bitte fülle alle Felder richtig aus");
return false;
}
}
<script src="https://www.google.com/recaptcha/api.js"></script>
<form name="registerform" onsubmit="return validateForm()" method="post">
<div class="form-group">
<label style="font-size:18px;">Register</label>
</div>
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="user_login" class=" form-control" placeholder="Username">
</div>
<br>
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input type="email" name="user_email" class="form-control" placeholder="E-Mail">
</div>
<br>
<input type="hidden" name="redirect_to" value="Redirect_URL">
<div class="input-group input-group-md">
<span class="input-group-addon"><span class="glyphicon glyphicon-question-sign"></span></span>
<input type="number" name="question" class="form-control" placeholder="2+3 = ?">
</div>
<br>
<div id="captcha" class="form-group">
<div class="g-recaptcha" data-sitekey="6LdOGg4TAAAAAJsTt_ZGoK67cyF277uIYwWRxJPW" data-callback="recaptchaCallback"></div>
</div>
<div id="pass-info" class="clearfix"></div>
<button class="btn_full" id="submitBtn" disabled>Register</button>
</form>
The whole thing works fine, Recaptcha and Human question field. When we manually test registerform, we can't register without accepting the Recaptcha and inserting exactly the value to process the form.
But this is not preventing automatic spam bots which registers on our site.
Is there any other way through which these spam bots are registering ?
Also we disabled "MEMBERS CAN REGISTER" in the admin dashboard.
Are we doing anything wrong?
Thanks in advance for the feedback and suggestions.
you need to do validate it in the backend, in the front end, validation can be bypassed.
store the ip address for each registration.dont allow registeration from the same ip within some period of time, but user can use some proxy tool which changes the ip address every second.
validate the email, foreach email send the validation email to registered email address, and if the user click on the activation click, activate the account, otherwise no.
You probably forgot the server-side part of recaptcha.
A robot should not be able to pass it multiple times,
See this complete tutorial from google : https://developers.google.com/recaptcha/intro
You must configure a key on the server, as explained, that is secret, and which google will send to you if the captcha is valid.
I'm using Formspree - https://formspree.io/ to redirect my forms to my email as I'm hosting my website on a static page.
I'm also using an external library Toastr (http://codeseven.github.io/toastr/) to make a small notification appear once the user clicks the 'Submit' button for the form.
The problem is that I cannot get Formspree and Toastr to run at the same time. When I implement both of them, none of the features work.
Code: (Please say if I need to add more for the problem to be clearer).
<form action="http://formspree.io/emailhere" method="POST">
<div>
<div class="row">
<div class="6u 12u(mobile)">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="6u 12u(mobile)">
<input type="email" name="_replyto" id="email" placeholder="Your Email" />
</div>
</div>
<div class="row">
<div class="12u">
<input type="text" name="subject" id="subject" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="12u">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
</div>
<div class="row 200%">
<div class="12u">
<ul class="actions"> //Pressing submit redirects to a 'thank you' page
<li> <input name="submit" type="submit" value="Send" id="submit"/> </li>
<li> <input type="reset" value="Clear Form" class="alt" /> </li>
</ul>
</div>
</div>
</div>
</form>
Now when you press the submit button it redirects you to a Formspring thank you page. When I add the Javascript for the toast notification it does not even do this meaning the JavaScript 'disrupts' the submit button functionality somehow.
$(document).on('click', '#submit', function(evt){
evt.preventDefault();
toastr.success('Thanks for the email, will be in touch promptly.');
});
Thanks for looking.
Edit: So I want it so both of them work together. This is the code for HTML were you can choose the redirect page after you press the submit button:
<input type="hidden" name="_next" value="//site.io/thanks.html" />
I want it so it does not redirect anywhere but does do my JS function notification.
You're preventing the default behavior (to redirect to the form URL) in your click handler. Simply remove
evt.preventDefault();
And it should work (although obviously, since your page is being redirected, the Toastr popup won't be visible).
If you want it to open in a new tab, you should prevent the default behavior (as you do currently) and then open the URL manually.
The best way to get around this is to use a button element instead of the submit input element. This would require you to submit the information to an endpoint of some sort using ajax and then notifying the browser of the submission using your javascript function. All of this is to avoid the redirect that happens when you use the default browser behavior to submit the form. If you don't use ajax, you have to redirect due to default browser behavior.
I need to create a form that will allow users to update a simple text file and then be able to save it in the same location on the server. I can't use PHP (company policy). Is there any way to do this with client-side scripting? My server side scripting is severely restricted. To clarify I just need the contents of an "alert.txt" file to be updated by a user form.
<form>
<div class="form-group">
<label for="alert">Post an Alert</label>
<input type="text" class="form-control" id="alert" placeholder="Enter alert here">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
This is my html code for my little form. The way my 'submit button is styled it can only be an <a>. Can I still submit this form to an email? How can I make this send to the email assigned to it? jQuery or Javascript?
For example can I use this:
<a class="btn send" href="#send">Send</a>
versus input type="submit"?
<form action="mailto:me#myemail.com">
<input name="name" type="text" value="" placeholder="Name" required/><br>
<input name="email" type="email" value="" placeholder="you#yourmail.com" required/><br>
<textarea class="message" maxlength="200" placeholder="We can answer your questions." required><?php echo $_POST[message]; ?></textarea><br>
<a class="btn send" href="#send"><img src="img/send.png" /></a>
</form>
You can use JavaScript to dynamically submit the form:
$(".btn.send").click(function() {
$(this).closest("form").submit();
return false;
});
Or since you use image, how about simple <input type="image">:
<input type="image" src="img/send.png">
You can use
<button type=submit>Submit Me!</button>
Also "image" buttons submit forms.
Now, that said, you cannot directly initiate an email transaction from an HTML form. The best you can do is cause the user's mailer to be shown, but you have precious little control over how/if that works.
Even better...
$('#AnyElement').click(function() {
$('#formID').submit();
});