Basic code for form with email verification - javascript

I want a basic form on my website, with e-mail notification.
Now I have the following code, but this doesn't send an email notification automatically.
Does anyone know how to add an automatic email notification?
<!DOCTYPE html>
<html>
<body>
<font face="verdana">
<h2>Title</h2>
<form action="MAILTO:(emailadress)" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value=""><br>
E-mail:<br>
<input type="text" name="mail" value=""><br>
Country:<br>
<input type="text" name="country" value=""><br>
<br>
<br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</font>
</body>
</html>

Using a mailto link as a form action (if done correctly) only populates the user's default mail sending program, it does not send an email automatically. See this answer for details. If you want your form to send an email directly and automatically, you will need to have it connect to a 3rd party email service's API to send it.
One example of a free service that turns an API call into a sent email is FormSpree, but you can also use a generic email sending API like Mailgun, Sendgrid, or similar.

Related

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/

Form Validation - Required attribute not coming when HTML content sent as email to Gmail

I am sending the following form as email in Gmail from c# (SmtpClient) to get the users comment.
<form id='RejectFeedbackForm' method='get' action="http://localhost:49309/Controller/Action">
Reason for rejection<br />
<input type='text' name='comment' id='comment' required/><br />
<input type='submit' value='Submit'>
</form>
But Gmail omits the required attribute. I get it like this as email.
<form id="m_-8883071243854624425RejectFeedbackForm" method="get" action="http://localhost:49309/Controller/Action"
target="_blank">
Reason for rejection<br>
<input type="text" name="comment" id="m_-8883071243854624425comment"><br>
<input type="submit" value="Submit">
</form>
Any idea how to achieve the required validation? I can't use Javascript because Gmail omits that too.

How to access information in a javascript file that was send from a form?

I have this following code:
<form action="main.js">
<input type="text" required="required" pattern="[a-zA-Z]+" />
<input type="submit" value="Submit" />
</form>
When i click the submit button, the information that was in the input should be sent to my file "main.js". But there is nothing in "main.js". I want that "main.js" file would contain that passed information as a string, is there a way or method to do this?
Seems like you've understood form action incorrectly.
Action defines which code will handle your form values, and not which page will the results be pasted into.
you'll want main.js to receive the form results and handle them in a way to be pasted into a results.txt file for example. But allowing a user of your website to create or edit files on your server is insecure.
The only option i think of, unless you have access to server side coding, like php or asp, is sending the submitted form information to your email using mailto:
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
can you run asp or php?
Following could be the part of your javascript file.. If you are not going to include any JS file then you can use it directly.
function checkAge() {
var x = document.forms["Form1"]["Age"].value;
if (x == null || x == "") {
alert("Age is empty");
return false;
}
else
alert(x);
}
Then your form should looks like
<form name="Form1" action="abc.jsp" onsubmit="return checkAge()" method="post">
Age: <input type="text" name="Age">
<input type="submit" value="Submit">
</form>
Cross check with your form and see what went wrong..

Email Submission not working

I am working with a Newsletter subscription popup, it has Email address and Submit button. The intention is
1. When new customer enter his/her email id and click SUBMIT button, two actions need to happen.
The email has be sent to current database and
Redirect customer to thank you page.
I have the thank you page webpage. I have the database information. But this in a ecommerce website, I have limited access. I already have similar subscription in one of the webpage, I am trying to replicate that as popup. I am attaching the codes that I have.
My HTML body tag:
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28">
<br>
<onclick="javascript:location.href='https://www.thankyou.html'">
<input type="submit" value="SUBMIT" width="260px">
</form>
Code from my existing webpage for database:
When I click SUBMIT, it redirects me to https://www.mywebsite.com/v/Config_FullStoreURLMailingList_subscribe.asp
Instead it should be redirecting customer to "Thankyou.html"
Thanks
I think you must have confused with onclick event. Try using it like this,
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28">
<br>
<input type="submit" onclick="javascript:location.href='https://www.mysite.com/thankyou.html'" value="SUBMIT" width="260px">
</form>

How to redirect opt-in form to thank you page?

I'm trying to figure out how to redirect my opt-in form to a specific page (http://www.example.com/thanks)
Here's the code for my form:
<form action="http://mailer334.insty.me/subscribe" method="POST" accept-charset="utf-8">
<label for="name">Name</label><br/>
<input type="text" name="name" id="name"/>
<br/>
<label for="email">Email</label><br/>
<input type="text" name="email" id="email"/>
<br/>
<input type="hidden" name="list" value="efwefwefwefwefwef"/>
<input type="submit" name="submit" id="submit"/>
</form>
Right now it's just taking people to the default page for Insty.me (http://mailer359911.insty.me/subscribe) which isn't what I want it to do - it need to post information to that page to add people to my email list, but redirect to a different page thanking them and giving further instructions.
Create a wrapper php script on your domain that receives the form info and then post to the
third party via CURL. Then do the redirect using
header("Location: http://www.mysite.com/thanks");
You might be thinking on submitting the form using ajax and then redirect, but that will
be impossible because the SAME ORIGIN POLICY enforced by the browsers as a security rule.
You cannot run ajax request against a different domain. On a phonegap application you might
override this behavior , but on a standard web app that is intended to be open on regular browsers is not possible.
<?php
if(!isset($_POST['submit'])) {
?>
<form action="http://mailer334.insty.me/subscribe" method="POST" accept-charset="utf-8">
<label for="name">Name</label><br/>
<input type="text" name="name" id="name"/>
<br/>
<label for="email">Email</label><br/>
<input type="text" name="email" id="email"/>
<br/>
<input type="hidden" name="list" value="efwefwefwefwefwef"/>
<input type="submit" name="submit" id="submit"/>
</form>
<?php
} else {
include 'thanks.php';
} ?>

Categories

Resources