html button to send email - html

How do I send an email with specified initial values for the headers subject and message from a button in html, such as this
<form method="post" action="mailto:email.com?subject=subject&message=message">
where subject and message are values fetched from a form?

You can use mailto, here is the HTML code:
<a href="mailto:EMAILADDRESS">
Replace EMAILADDRESS with your email.

This method doesn't seem to work in my browser, and looking around indicates that the whole subject of specifying headers to a mailto link/action is sparsely supported, but maybe this can help...
HTML:
<form id="fr1">
<input type="text" id="tb1" />
<input type="text" id="tb2" />
<input type="button" id="bt1" value="click" />
</form>
JavaScript (with jQuery):
$(document).ready(function() {
$('#bt1').click(function() {
$('#fr1').attr('action',
'mailto:test#test.com?subject=' +
$('#tb1').val() + '&body=' + $('#tb2').val());
$('#fr1').submit();
});
});
Notice what I'm doing here. The form itself has no action associated with it. And the submit button isn't really a submit type, it's just a button type. Using JavaScript, I'm binding to that button's click event, setting the form's action attribute, and then submitting the form.
It's working in so much as it submits the form to a mailto action (my default mail program pops up and opens a new message to the specified address), but for me (Safari, Mail.app) it's not actually specifying the Subject or Body in the resulting message.
HTML isn't really a very good medium for doing this, as I'm sure others are pointing out while I type this. It's possible that this may work in some browsers and/or some mail clients. However, it's really not even a safe assumption anymore that users will have a fat mail client these days. I can't remember the last time I opened mine. HTML's mailto is a bit of legacy functionality and, these days, it's really just as well that you perform the mail action on the server-side if possible.

As David notes, his suggestion does not actually fulfill the OP's request, which was an email with subject and message. It doesn't work because most, maybe all, combinations of browsers plus e-mail clients do not accept the subject and body attributes of the mailto: URI when supplied as a <form>'s action.
But here's a working example:
HTML (with Bootstrap styles):
<p><input id="subject" type="text" placeholder="type your subject here"
class="form-control"></p>
<p><input id="message" type="text" placeholder="type your message here"
class="form-control"></p>
<p><a id="mail-link" class="btn btn-primary">Create email</a></p>
JavaScript (with jQuery):
<script type="text/javascript">
function loadEvents() {
var mailString;
function updateMailString() {
mailString = '?subject=' + encodeURIComponent($('#subject').val())
+ '&body=' + encodeURIComponent($('#message').val());
$('#mail-link').attr('href', 'mailto:person#email.com' + mailString);
}
$( "#subject" ).focusout(function() { updateMailString(); });
$( "#message" ).focusout(function() { updateMailString(); });
updateMailString();
}
</script>
Notes:
The <form> element with associated action attribute is not used.
The <input> element of type button is also not used.
<a> styled as a button (here using Bootstrap) replaces <input type="button">
focusout() with updateMailString() is necessary because the <a> tag's href attribute does not automatically update when the input fields' values change.
updateMailString() is also called when document is loaded in case the input fields are prepopulated.
Also encodeURIComponent() is used to get characters such as the quotation mark (") across to Outlook.
In this approach, the mailto: URI is supplied (with subject and body attributes) in an a element's href tag. This works in all combinations of browsers and e-mail clients I have tested, which are recent (2015) versions of:
Browsers: Firefox/Win&OSX, Chrome/Win&OSX, IE/Win, Safari/OSX&iOS, Opera/OSX
E-mail clients: Outlook/Win, Mail.app/OSX&iOS, Sparrow/OSX
Bonus tip: In my use cases, I add some contextual text to the e-mail body. More often than not, I want that text to contain line breaks. %0D%0A (carriage return and linefeed) works in my tests.

I couldn't ever find an answer that really satisfied the original question, so I put together a simple free service (PostMail) that allows you to make a standard HTTP POST request to send an email. When you sign up, it provides you with code that you can copy & paste into your website. In this case, you can simply use a form post:
HTML:
<form action="https://postmail.invotes.com/send"
method="post" id="email_form">
<input type="text" name="subject" placeholder="Subject" />
<textarea name="text" placeholder="Message"></textarea>
<!-- replace value with your access token -->
<input type="hidden" name="access_token" value="{your access token}" />
<input type="hidden" name="success_url"
value=".?message=Email+Successfully+Sent%21&isError=0" />
<input type="hidden" name="error_url"
value=".?message=Email+could+not+be+sent.&isError=1" />
<input id="submit_form" type="submit" value="Send" />
</form>
Again, in full disclosure, I created this service because I could not find a suitable answer.

You can not directly send an email with a HTML form. You can however send the form to your web server and then generate the email with a server side program written in e.g. PHP.
The other solution is to create a link as you did with the "mailto:". This will open the local email program from the user. And he/she can then send the pre-populated email.
When you decided how you wanted to do it you can ask another (more specific) question on this site. (Or you can search for a solution somewhere on the internet.)

#user544079
Even though it is very old and irrelevant now, I am replying to help people like me!
it should be like this:
<form method="post" action="mailto:$emailID?subject=$MySubject &message= $MyMessageText">
Here
$emailID,
$MySubject,
$MyMessageText are variables which you assign from a FORM or a DATABASE Table or just you can assign values in your code itself. Alternatively you can put the code like this (normally it is not used):
<form method="post" action="mailto:admin#website.com?subject=New Registration Alert &message= New Registration requires your approval">

You can use an anchor to attempt to open the user's default mail client, prepopulated, with mailto:, but you cannot send the actual email. *Apparently it is possible to do this with a form action as well, but browser support is varied and unreliable, so I do not suggest it.
HTML cannot send mail, you need to use a server side language like php, which is another topic. There are plently of good resources on how to do this here on SO or elsewhere on the internet.
If you are using php, I see SwiftMailer suggested quite a bit.

<form action="mailto:someone#example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">

Related

I can't get my submit button to send an email, Ive tried several formats

I am using a form id= contact-form with a form loader. I have tried getting my email to submit with form action and html href however nothing has working this is what I am currently trying to get to work. any suggestions?
<form method="post" action="mailto:m_galvin1005#email.campbell.edu" >
<input type="submit" value="Send Email" />
</form>
I placed this form method inside of a form id. Not sure if thats where I am getting held up at
Unfortunately, browsers don't actually know how to send emails. The web browser only really knows how to render HTML, JS and CSS code into a visual experience.
PHP is a language that runs server-side, which you can use to tell a web server to send an email to whatever address you input.
Here's a good article on PHP Emailing: https://css-tricks.com/snippets/php/send-email/
It is important to note that this code REQUIRES a web-space or server to compile.
It will be a very basic email form, having said this I think you are missingpost argument in your form tag. The following should work
<form action="mailto:m_galvin1005#email.campbell.edu" method="post" enctype="text/plain" >
Name:<input type="text" name="Name">
Email:<input type="text" name="Email">
<input type="submit" name="submit" value="Submit">
</form>

How to send information submitted in html to email

I am making a website and I want one of the pages to have a form where they write their contact information and then have it sent to me when they press the submit button. I tried doing it in HTML by using this code
<form action="MAILTO:XXXXX#XXX.com" method="post" enctype="text/plain">
And then I have the form entries and a submit button. I enter some random details but it never sends me an email.
Here's my form entries if it means anything
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>
As others stated in comments above, you're mixing up 2 things. You have 2 options going forward.
Option 1 is using a server-side language like PHP to send the e-mail. This is a bit harder to do, but it allows you to have a form on your page like you describe in your question. In this case, you'd have to change the action attribute of the <form> to the path to the (PHP) page/file that will process the POST request. Here's a tutorial on how to send e-mail in PHP.
Option 2 is to get rid of the form and replace it with a link that will boot the user to his e-mail program with the To: field already filled out. Obviously, this will only work if the user has a local e-mail program set up. It's usually not compatible with webmail (like Gmail, Outlook.com...). However, it can be implemented in a single line of code:
Should you opt for option 2, you can just replace the <form> element with the following code snippet, which will produce the link:
your-address#example.com
Note that in the snippet above, I repeated the e-mail address as the text of the <a> tag. This ensures that people who use webmail can copy-paste the e-mail address in the web app.

Html Form to send email. How to delete '+' character for 'space'

I am using the following workaround to let a user send a mail to my client:
<form action="mailto:mail#domain.tld" method="get" enctype="text/plain">
<input name="subject" type="hidden" value="Request to offer #5" />
<input type="submit" value="Email me" />
</form>
But on Ubuntu 14.04 (my workspace) it opens Thunderbird and the subject is 'Request+to+offer+#5'. I tried different enctypes (none and multipart/form-data) and methods(post and get) and pre-encoding the subject with '+' and '%20'. But with the post-method Thunderbird puts the post-string 'subject=Request+to+offer+#5' in the body and the other ways leave the subject as I put it into my form or even empty.
How do I fix this?
Requirements:
Button that looks on every system as the system's button.
Predefined subject
Works with every email client
That you get the plusses is a bug (bug 1055950).
To make it work you can, however, create a button like
<button onclick="window.location='mailto:mail#domain.tld?subject=request%20to%20offer'">Email me</button>

prevent links in html form fields

Is there a way to prevent a form from being submitted if it contains links.
I would like to prevent links from being added to input: question and message field.
Can anyone point in the right direction for info?
thanks
<div class="form">
<form id="sbwd_contact" method="post" action="http://whatanswered.com/forms/ask/ask.php">
<em class="error"></em>
<input type='hidden' name='sfm_form_submitted' value='yes'/>
<label for="Email">E-Mail: </label>
<input type="text" id="Email" name="Email" size="30" class="required email" />
<label for="question">Question: </label>
<input type="text" id="question" name="question" size="30" class="required" />
<label for="Message">Additional Info: </label>
<textarea name="Message" cols="30" rows="6" id="Message" class="required"></textarea>
<br />
<p><span>I Agree to the Terms and Conditions
<input type="checkbox" name="Terms_and_conditions" value="I agree" class="required"/></span></p>
<input name="Submit" type="submit" id="Submit" value="Send" />
<br /><br />
<p>View our Terms and Conditions</p>
</form>
Add this before insertion in database
if(preg_match("/\b(?:(?:https?|ftp|http):\/\/|www\.)[-a-z0-9+&##\/%?=~_|!:,.;]*[-a-z0-9+&##\/%=~_|]/i",$_POST['question'])){
// prevent form from saving code goes here
echo "<script>alert('Please remove URLs');</script>";
}
else{
// Insertion in Db
}
To prevent the form from actually being submitted you would need to use JavaScript to suppress the bubbling of the submit event. Specifically I would recommend using jQuery, something like this:
$(document).ready($(document).on('submit', function()
{ if ($("#question:contains('href=')").length > 0) return false; });
I might be wrong, but it looks like you are trying to achieve some sort of simple protection against spam or cross-site-scripting (XSS). If so, this is probably not the best technique, since, like all client-side security, it can easily be bypassed. Better would be to use a regular expression to strip out such links on the server-side after the post. Or for spam prevention, use a proper Bayesian/keyword filter, such as implemented by many WordPress plugins. Remember, a spammer can still market his product without a hyperlink. I think you will find that trying to prevent spam by stopping posts with hyperlinks will not be sufficient for a semi-popular blog or talkback section. All sorts of other types of spam, e.g. stock market three-letter-code pump-and-dump, brand dropping, or brand FUD, can be effective without hyperlinks.
Also keep in mind that there are many different ways for the user to inject potentially harmful HTML/JS/SQL code into the posts. The best technique is to strengthen your handling of user input, rather than restricting input altogether. For example, on Stack Overflow, users can post HTML/JS code samples. SO doesn't want to prevent that input, so they make sure to escape it whenever it's sent back to the browser, rendering it totally harmless. See this article for more info: https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet.
Sure you can check if your input field contains one or more substrings like 'HTTP://' and if so end the script with an error.
Use http://php.net/manual/en/function.substr-count.php
First of all, you are posting an HTML script, and you'r asking about PHP, so you are not showing any effort. Having said, that..
If I had wanted to prevent links from being submitted into a form, I could use strip_tags() function of PHP to strip all <a > from what the user is entering, and thus changing the link to just raw text. Alternatively from PHP side, you could use filter_var($url, FILTER_VALIDATE_URL) to validate if URL has been submitted:
$url = "http://www.mywebsite.com";
if(!filter_var($url, FILTER_VALIDATE_URL)){
echo "No URL detected";
}else{
echo "URL is found";
}
And work your way up from there.

Hotmail and Outlook issues with radio buttons

Recently I implemented a system where customers could give feedback about customer service in an email. The email sent to them included two radio buttons, a comment text entry box, and a submit button. The solution was tested in Gmail and worked perfectly, however we have been getting reports that there are issues with Hotmail, Outlook, and for all we know others too.
After testing in Hotmail we found the radio buttons could not be selected, and the submit button did not do anything, whereas in Outlook the entire thing displayed as text.
The email is sent from the Salesforce platform and the HTML is as follows:
<p>Hi {!recipient.name},</p>
<p>An issue you raised with us has been marked for closure. We would
appreciate if you could take a few seconds to just let us know whether
you were satisfied with the resolution.</p>
<p>Your case is number: {!relatedTo.CaseNumber}. The subject for your case is: {!relatedTo.Subject}.</p>
<form method="post" action="www.oursite.com/feedback.php" onsubmit="Disable()">
<input type="radio" name="yesno" value="This issue was resolved." checked="true">This issue was resolved.</input><br></br>
<input type="radio" name="yesno" value="This issue was not resolved">This issue was not resolved.</input>
<p>Anything else we should know? <input type="text" name="comments"></input></p>
<input type="hidden" name="cust" value="{!recipient.name}"></input>
<input type="hidden" name="caseendid" value="{!relatedTo.CaseNumber}"></input>
<input type="hidden" name="caselink" value="https://eu1.salesforce.com/{!relatedTo.Id}"></input>
<input type="submit" name="submit" value="Submit"></input>
</form>
<script>
function Disable()
{
var button;
button = document.getElementByName('submit');
button.enabled = false;
}
</script>
Anything enclosed in {!some.value} is replaced by text by salesforce before being sent.
Can anyone shed any light on why we're having issues in Hotmail or Outlook as there doesn't really seem to be much on MSDN or here already regarding this?
<form>s and HTML formatted email mix very, very poorly.
Send people a feedback link instead and use an identifying token in it to pre-populate (with any identifying data you like) a form in a regular web page hosted on a regular http(s) website.
(You can give them a plain form and a link without an identifying token if you don't have any data you want to pre-populate it with).