I recently created a simple site for a friend's business using an HTML 5 template. It contained some cutesy Javascript elements too. The website URL is www.michianamemories.com
One of the elements is a Contact Form at the bottom of the page. It looks like the "Send Message" button is coded to do absolutely nothing. How simple is it to have this form forward the user-entered values (ie: their name, e-mail, and their message) to a dedicated e-mail inbox?
If it's not that simple, what other options are available to make the form functional but also integrated with the site's general theme?
I'm assuming the answer is very simple, but I'm a novice at HTML 5 and am totally clueless about Javascript. Your help is appreciated in advance.
HTML doesn't allow you to submit a form to an email.
You could use mailto but it's not the friendliest piece of functionality. It will open up Outlook and dump the form data into the email content. Has a lot of issues though.
More info on mailto
My recommendation is to use a "form mail script". This is only done on server side though so you'll need to have a web server. You'll need to google and read up on them.
Reference about form submit options
It's not possible in pure Javascript. Sending email requires server-side processing.
There are several websites that will let you generate simple email forms, check out: http://www.google.com/search?hl=en&safe=off&q=email+form+generator&aq=5&aqi=g10&aql=&oq=email+form
In my opinion the best thing you can do is to create a simple Back-End App in PHP.
Create file mail.php in your root directory.
In your HTML form tag you need to add the action attribute with the path to mail.php file and the method attribute, so that the form knows which HTTP Request Method use to send the data <form action="mail.php" method ="post">. This will add the action to trigger for the 'Send Message' button, that you said is not working.
This happens because now the button knows what to do if you click it. It takes all of your data from the form input fields and send them to the mail.php file. This file needs to fetch them and validate them. (You should at least create the validation for the required fields in your form, to check if they're not null. You can make some extra validations in your build-in html attributes or with some help of the JavaScript)
The most important thing now, is to create the Mail function in your mail.php. Here is all the documentation you need to do this: PHP Mail Documentation.
Here is the code (your site is not working so I'm just improvising with the input fields):
HTML:
<form action="mail.php" method="post">
<label for="name-field">Name:</label>
<input id="name-field" name="name" type="text" required>
<label for="surname-field">Surname:</label>
<input id="surname-field" name="surname" type="text" required>
<label for="message-field">Message:</label>
<textarea id="message-field" name="message" required></textarea>
<label for="mail-field">Your e-mail:</label>
<input id="mail-field" name="mail" type="mail" required>
<button type="submit">Send Message</button>
</form>
PHP:
// Validating if everything is filled
if(isset($_POST['name']) && isset($_POST['surname']) && isset($_POST['message']) && isset($_POST['mail'])
{
$to = "example#mysite.com";
$subject = "Automatically generated messege from" . $_POST['name'] . ' ' . $_POST['surname'];
$body = $_POST['message'];
$headers = 'To: ' . $to . "\r\n";
$headers .= 'From: ' . $_POST['mail'];
// Send mail function
if(mail($to, $subject, $body, $headers))
{
echo 'Mail sent successfuly!';
} else {
echo 'Error occurred while sending the message';
}
}
As mentioned in the other answers, you can't use HTML5 to send e-mail. This needs to be done on your server.
One easy and free solution is to use Google Apps Script though. You can publish your Apps Script as a Web App and have a doPost method like this:
function doPost(e){
var email = e.parameter.email;
var subject = 'E-mail from website';
var message = e.parameter.message;
MailApp.sendEmail(emailAddress, subject, message);
return ContentService.createTextOutput('E-mail sent!');
}
And in your HTML, you would have a form like this:
<form action="url to your deployed app script" method="post">
<input type="email" name="email"></input>
<textarea name="message"></textarea>
<input type="submit" value="Submit"></input>
</form>
The URL to put in the action attribute will be shown when you deploy your Apps Script as a Web App:
Related
This is my first question on StackOverflow - thanks in advance for your help!
I have an html form that emails me upon submission. The form submits successfully but I want it to display a submission confirmation message via pop up alert box before reloading the page. Any help is appreciated - though, I'll say now that I don't intend to use AJAX since I am not at all familiar yet. Thanks!
HTML:
<form method="post" action="php/contactForm.php">
<p class="formBox" id="nameBox">Name:</br><input type="text" id="contactName" name="contactName"></p>
<p class="formBox" id="emailBox">Email:</br><input type="email" id="contactEmail" name="contactEmail"></p>
<p>Message:</br><textarea id="contactMessage" name="contactMessage"></textarea></p>
<p><input type="submit" name="submit"></p>
</form>
PHP in "contactForm.php":
<?php
$name = $_POST['contactName'];
$email = $_POST['contactEmail'];
$message = $_POST['contactMessage'];
$body = $name . "\n" . $email . "\n\n" . wordwrap($message);
$alert = "<script>alert('Thank you for reaching out! Someone will be in touch soon.')</script>";
echo $alert;
mail('email#notmyactualemail.com', 'New Message from Website Contact Form!', $body);
header("Location: ../connect.html");
?>
p.s. If it helps to know, I am hosting on GoDaddy.
AJAX works to run code without having to refresh your page. The PHP code you have now will run after the page reloads. Therefore, there is no way without AJAX to send a genuine confirmation message before the page reloads.
You can, however, use the javascript onsubmit property to make a confirmation alert once the form is submitted, but that will not guarantee that the form was indeed submitted without error. Here's an example:
document.getElementById("myForm").onsubmit = function(){
window.alert("This is the confirmation message!\n\nThank you for submitting");
}
<form action="www.example.com" id="myForm" method="POST">
<input type="text">
<input type="submit">
</form>
I`ll try to explain the best that I can.
I don't know anything about PHP, and very little about js, so, forgive me if this question is stupid.
I'm trying to load a PHP function inside an echo.
this is the function i want to call
function SuccessDialog(){
if(isset($_POST['mailsent']))
{
$to = 'mymail#hotmail.it';
$subject = 'test2';
$message = 'hello';
$headers = 'From: webmaster#example.com' . "\r\n" .
'Reply-To: webmaster#example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
}
}
I need to call this when an upload is successfull and an "echo" opens a dialog, in which there should be a "send email button" (at the moment I don't care about the mail is working or not, since it is).
The script for said button is this
<form action="" method="post">
<input type="submit" value="Send email" />
<input type="hidden" name="mailsent" value="1" />
</form>
(actually I can't understand why it should be inside a form, but it's working)
And so, the first part of the question. Since this code is working if used with a button outside the echo, how can I manage to make it work with this particular button?
And here for the second question.
Since the email address should be an input from the user, I should be able to modify the "$to" in runtime, still being inside the echo. Can I do that, or since php is server side I'm stuck or I got it wrong from the beginning?
Thanks
Well, if I got it right, you have to add
<input type="text" name="to">
to the form, and you wold be able to get the value in $_POST['to'] in php. Remember to sanitize user input!
edit
To make user unable to submit the form without adding an email address add required attribute to the field.
You can use type="email" to make browser (a new one) validate the input.
I've got a working PHP form that I've built and it contains 5 fields which are pre-populated by a URL query string.
The query string URL is on a hyperlink on an HTML email asking the recipient to click here to make a booking. I've got their details already because I've sent them the email, hence why the form get pre-populated.
How can I get the form to instantly submit on page load and redirect to the thank you page?
Here's how my form looks at the moment:-
<form name="frm" id="frm" method="POST">
<input name="firstname" id="firstname" type="text" value="<?php echo ((isset($_GET["firstname"]))?htmlspecialchars($_GET["firstname"]):""); ?>" />
<input name="lastname" id="lastname" type="text" value="<?php echo ((isset($_GET["lastname"]))?htmlspecialchars($_GET["lastname"]):""); ?>" />
<input name="email" id="email" type="text" value="<?php echo ((isset($_GET["email"]))?htmlspecialchars($_GET["email"]):""); ?>" />
<input name="company" id="company" type="text" value="<?php echo ((isset($_GET["company"]))?htmlspecialchars($_GET["company"]):""); ?>" />
<input name="contactid" id="contactid" type="text" value="<?php echo ((isset($_GET["contactid"]))?htmlspecialchars($_GET["contactid"]):""); ?>" />
<input type="submit" name="Submit" value="submit" />
</form>
And here's the JavaScript I've tried (but didn't work):-
window.onload = function() {
setInterval(function(){
document.getElementById("frm").Submit();
},5000);
}
Here's a pastebin of the whole page: http://pastie.org/private/lgpealjya8xrwqi78gropw
Thanks
Alright so basicaly you have been trying to get information through url, insert them in a form and then submit the form so you can send an email. This is all quite nice although you're just making things harder than they are.
You you need to do is wipe off the form (we don't need this really) and instead of processing all those $_POST information you wanted to get off the form, you gonna do that with the $_GET array you already got off the url, at the end of the day it's exactly the same since the informations you're inserting in the form are only the ones you're getting off the url.
So if you change this the following way, youe script will work just fine :
//Get the submitted data
$firstname = cleanText($_GET['firstname']);
$lastname = cleanText($_GET['lastname']);
$email = cleanText($_GET['email']);
$company = cleanText($_GET['company']);
$contactid = cleanText($_POST['contactid']);
So here is what's gonna happen : the user is going to clic on a link, your script is going to get the $_GET array, process it, send the email based on this array, and this send the user to the thankyou.php page. Note that you could get your script to be more efficient and save the user some time if you insert your script in the thankyou.php.
Last but not least I would like to point out to you that it's not very good practice to get an email sent on url submission... you could end up having a bot send massive amounts of emails through this url and get you email blacklisted. If I were you I'd either control the ip and make sure only 1 mail is sent every 10 minutes or whatever time suits your needs best, or i'd add a captcha to the page so the user would need to show he's a human being who actualy wants to waste some time sending email.
try using: document.getElementById('frm').submit(); instead of document.getElementById('frm1').submit();
and also make it execute once the page has been loaded:
window.onload=function(){
document.getElementById('frm').submit();
}
I have a form which includes the input field and submit button.
<form class="subscribe">
<div class="">
<input type="text" placeholder="Your e-mail adresss">
<span>
<button type="button">Subscribe</button>
</span>
</div>
</form>
What is the easiest way to make this functional using front-end only so that when new email is entered I will receive an email with the new signup info. Is this possible with JS/Jquery only?
Yes this is possible now! You dont even need javascript/jquery to implement this.
There is a good API Endpoint that you can use to send an email such
as this one: https://formsubmit.co
You can read through the documentation for more information. But here is
a little snippet that you can use:
<!--
*Provide your email address on action attribute
*The email you provide on action attribute will be the one to receive an email.
-->
<form action="'https://formsubmit.co/yourEmail#email.com" method="POST">
<input name="email" type="email" required>
<!-- You can add more input/fields, this message input is just to notify you about the subscribers-->
<input hidden name="message" value="Hey! I want to subscribe on your news letter." type="text">
<button type="submit">Subscribe</button>
</form>
That's not possible in the front end. You have to do this server side.
The only thing possible with pure javascript is bringing up the users default email client with a predefined message. But the user will still have to send it.
function sendMail() {
var link = "mailto:me#example.com"
+ "?cc=myCCaddress#example.com"
+ "&subject=" + escape("This is my subject")
+ "&body=" + escape(document.getElementById('myText').value)
;
window.location.href = link;
}
If you want to sent any mail you have to use server side function, But javascript/jquery is client side script.
you can do this make a ajax request and send all data then send mail with your need.
javascript or jquery cant provide that facility because it will be loaded and executed in client side browser. To send a mail you need protocal(SMTP) and server help.
Solution:
1.Use AJAX and serialize your form elements and post it to server file
2.Create your server side file and in that get the posted value and send a mail.ex: php(server side)
mail("youremailaddress#gmail.com", "subject" .$email, $message);
Need more stuff see this ..
I want to send my data form that user type to a specific email. Example:
<form>
<input type="text" placeholder="Your name"/>
<input type="email" placeholder="Your email"/>
<textarea name="content"></textarea>
<input type="button" onclick="sendmail()"/>
</form>
When user clicks the button, an email will be sent to a specific address like admin#admin.com with email's content is what user type in the form. Can we reach that result with only JavaScript or jQuery?
You can't do it without additional modules :
This is a good tutorial , you could create a dedicated address reported#yoursite.com and have it email your admin address when a user registers
<a id="emailLnk" >send mail</a>
<script type="text/javascript">
$(document).ready(function() {
$("#emailLnk").click(function(){
document.location.href = "mailto:xyz#something.com";
});
});
</script>
No, unless someone took the time to rewrite a SMTP client or sendmail in JavaScript, which is not the case. Moreover, that would mean giving away the SMTP password (which is bad) or not using a SMTP at all, meaning that almost all free/commercial providers will reject your e-mail.
You should set up a minimal PHP script to receive a POST request and forward the body as e-mail to your designed account. You should be able to do it in a handful of lines.