I am trying to figure out if there is a way to use GMAIL in an HTML contact form without a backend, like formspree ie. Does GMAIL give an API key for this purpose?
I made a little Heroku app for doing this, it requires no login and completely free without any asterisks. Best for static sites!
Requirements:
All inputs must have a name property,
The action property must be "http://form-delivr.herokuapp.com/handler/yourEmailAddress",
The method property must be post,
If anyone submits the form, the data will be mailed back to the email address you provided in the action property!
Example:
<form action="http://form-delivr.herokuapp.com/handler/tony#mail.com" method="post">
<h4>Username:</h4>
<input name="username">
<h4>Email:</h4>
<input type="email", name="email">
<button type="submit">Submit</button>
</form>
Note: I will be changing on this so stay tuned or your form may stop working suddenly if you use this :(
I need to debug missing data in some from POSTed to the server and after reading lots of tutorials and following other examples about that aspect, I still can't find my problem. The use case is pretty simple in theory: Have one form with two submit buttons to trigger different implementation on the server side.
According to lots of tutorials and examples, the submit-buttons should send their name if they have a name-attribute, while values should not be sent at all. The naming thing seems to differ according server side programming languages, sometimes it's some_name and sometimes some_name[], but that doesn't make any difference for me currently.
My problem is that whatever HTML I create, inputs of type submit are never part of the POSTed data. OTOH, pretty much the same HTML as button works as expected: If the button is used to submit the form, its name and even value are part of the POSTed data. When other inputs are clicked to submit, no names of any submit-input are available in the data.
So, with the exact same form, reaching the exact same endpoint, using same browser etc., the following DOES NOT provide any hint to the clicked button in the POSTed data:
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
While the following OTOH does:
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
So, should the input work the same way like the button does in theory? Or is the HTML wrong and I'm not able to spot the error? Sending the form itself works in both cases, though. So the browser obviously knows about the submit-input and its purpose.
Or have something changed the last years in modern browsers and submit-inputs are not part of POSTed data at all anymore for some reason? I can't remember the need to have multiple submits on a form for years.
How does a minimal example using a submit-input sending its name look like and tested to work for you? And in which browser? I tested an up-to-date Chromium based Opera and IE 11 and neither did include submit names.
Thanks!
OPINION: I would personally NEVER use more than one word in the name of a submit button
FACT: If that word is "submit" or you have id="submit" then you will not be able to programmatically submit the form using .submit()
FACT if you have script that disables the form element, it will not be sent to the server
Conclusion
In my experience and according to documentation - If you have the following
<form>
...................
<button type="submit"
name="whatever you want here but I would only use one name and NOT submit">Whatever</button>
</form>
OR
<form>
...................
<input type="submit"
name="whatever you want here but I would only use one name and NOT submit" value"Whatever">
</form>
your server will receive the button as name=value in the POST array if method = post and in the GET if nothing or method=get AND in the REQUEST array in either case (assuming PHP)
TEST PAGE
<form method="post" action="testsubmit.php">
Did not work according to OP<br/>
But it actually DOES work if not disabled from elsewhere <br/>
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
<hr/>
<input type="text" name="sentField" value="This WILL be sent to the server" style="width:300px"/>
<hr/>
<input type="text" name="disField" disabled value="This will NOT be sent to the server" style="width:300px"/>
<hr/>
Does work
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
</form>
I'm trying to make a form for a web design class. The form action HAS to be a mailto. The form also needs a hidden field that pops up after I hit the submit button. Everything looks nice so far, but after I upload my file to the school server, nothing happens after I click the submit button. I'm not to sure what's causing the problem. Here's my code:
<form action="mailto:email#example.com" method="GET" enctype="text/plain">
<fieldset>
<legend><strong>Vote Your Favorite Month(s)!</strong></legend> <br/>
<input type="checkbox" name="votemonth" value="Jan"> January |
<input type="checkbox" name="votemonth" value="Feb"> February |
<input type="checkbox" name="votemonth" value="Mar"> March <br/><br/>
<input type="hidden" name="success-link" value="thankyou.html">
<p><input type="submit" value="Submit"> <input type="reset" value="Restart"></p>
</fieldset>
</form>
I have the thankyou.html file in the same location of this file. I've tried changing up email addresses, using POST, taking out the enctype, changing the location of the hidden input type, but none of that changed anything.
Hidden fields work just like any other field.
The basic problem is that mailto: as a form action does not work well enough to use on the WWW. It only works if the visitor has an unlikely combination of compatible browser and default email client.
If you have that combination of software, then the data in the field will be included in the generated email.
Submitting a mailto: form will not cause the browser to load a new HTML document.
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>
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">