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 :(
Related
i'm adding a login system to my website i've figured out how to change pages but even if my login fields are empty when i click on my login button it changes page like i'm logged in while i'm not. Before adding the a href='index.html' when i was clicking the login button the site told me that i needed to fill the login field but now when i click even if the field are empty there's no error message and it changes page.
sorry if my explanations are a bit messy if you need more infos tell me ! :)
here's my code :
<form>
<input type="email" class="input-box" placeholder="Email" required>
<input type="password" class="input-box" placeholder="Password" required>
<button type="submit" class="submit-btn">Login</button>
<input type="checkbox"><span>remember me</span>
</form>
You can use several options to fix your problem.
As some others already suggested you can use JavaScript to validate the content of your input field. This is only on the client and wil leave your server still vulnerable to attacks. You should do a server validation too, with PHP for example and to be 100% safe a constraint validation for the database.
You could simple set constraint inside the HTML Tags:
(min-length, max-length, pattern(RegEx))
and so on.
Check the W3Schools site for more detailed information.
I would still use the aditional option from 1) to be safe!
Sometimes I see a form that is wrapped in a form tag
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
And sometimes there is no form tag, but just a div
<div class="view">
<input class="toggle" type="checkbox">
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
How come sometimes the form tag is present and other times its not for forms?
Prior to submitting information via AJAX, HTML forms were the standard in sending information to a server from a web page. They include the destination and method in the form attributes. More recently, this can be handled without assigning these attributes in form and sent via Javascript; typically using AJAX. This means the form element isn't necessary but is a good idea to include where possible to be syntactically correct HTML.
The <form> tag is not used specially when developers decide not to submit data in a conventional manner. The <form> tag has the main purpose of wrapping all the inputs that will be submitted to the next page specified on the action attribute of the <form> tag, and these data is sent using either POST or GET method indicated with the method attribute.
<form action="nextpage.php" method="post">
When the inputs are not wrapped by a <form>tag it means that the data is never submitted to another page or it submitted in a different way through javascript.
JavaScript is able to read the values of all the inputs and submit this data to a next page simulating a form or simply send it to the server without changing the page, when the page never changes but the data is sent to the server is when we say it was submitted using AJAX.
Forms input types are not always used to send values, they could be use as controllers, like date difference purposes, ranges or sliders to control alpha chanel, or rotate and image, making calculators, showing or hiding stuff on the page, lots of purposes other than just submitting to other pages
Check this code for a calculator on one of posts couple hours ago, lots of buttons, but not submitting anything
<INPUT TYPE="button" ID="button-cos" VALUE="cos">
Another example using button and input type="text" online image editor tutorial
I have a form:
<form method="GET">
<input type="text" value="hello" name="myname" />
</form>
If this form is submitted, I will end up at:
example.com/?myname=hello
What I would prefer is that when this gets submitted, I end up at:
example.com/hello
Is this possible?
No, you cannot change the way form submission works in HTML. (Using JavaScript, you can do transactions in a different way, without using HTML form submission.) When using method="GET", the URL gets constructed in a specific way; when using method="POST", the URL does not contain submitted data at all (it is sent outside the URL).
There is a trick that changes form submission in one way, but not quite the way you want. If the name of a control is isindex, then the control name and the equals sign are omitted; but the question mark is still there. That is, <input type="text" value="hello" name="isindex" /> would result in http://www.example.com/?hello. And Chrome has broken this when they removed the remainders of support to the isindex element.
If, for some special reason, you really need to make a form create requests like http://example.com/hello, then the simplest way is to set up a very simple server-side script that accepts normal requests that result from HTML forms and just passes them forward after modifying the URL in a simple way.
I have a working PayPal button on my website. It's not hosted by PayPal, I just wrote the code myself. It looks like this:
<form action='https://www.paypal.com/cgi-bin/webscr' method='post'>
<INPUT TYPE='hidden' name='cmd' value='_donations'>
<INPUT TYPE='hidden' name='business' value='myemail#myhost.com'>
<INPUT TYPE='hidden' name='item_name' value='$item'>
<INPUT TYPE='hidden' name='item_number' value='$number'>
<INPUT TYPE='hidden' name='amount' value='$payment'>
<input type='image' src='http://www.switchonthree.com/imgs/buynow.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!'>
<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1'>
</form>
Works great. When I take the same code and embed it in an html email, the button is there and it looks fine, but the link just goes to the PayPal homepage. It appears that none of the hidden inputs are working. Can you have hidden inputs in an email? Is there a workaround? Thanks.
It could be a security feature from Palpal. It could be that submitting the form in email does not result in a referer address that palpay reads. This is, it is blank.
So I think Paypal does not trust the form post and is redirecting you to their front page.
In general, posting a form via email seems strange and insecure to me.
The workaround is to direct users to a website to complete the purchase of which they would submit the form you have above from that website.
It seems that most modern email clients won't allow/support forms as they see it as a security risk, so its practice is not recommended.
I think the problem you are having is that you are doing a POST instead of a GET so changing it to the following may do the trick
<form action='https://www.paypal.com/cgi-bin/webscr' method='get'>
see this article
Read this article "Do forms work in HTML emails?" from CampaignMonitor for more info
In this article from MailChimp, they make a good suggestion to have an online version of your form which can be linked to from the email.
Don't use forms in email. Ever.
You could use https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business=xxxx&amount=xxxx&item_name=xxxx but really, why not go for a PayPal 'hosted button'? That way you at least won't be exposing the amount to the public, leaving it open to manipulation.
Simply set up the hosted button (tick 'Host button with PayPal' in Step 2 of the button creation tool), and at the end of it you'll be shown the code along with an 'E-mail' tab with a shortened email link for your button which you can use in emails.
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">