I am working on a new project and decided to do a lot of the coding myself, I am by no means a web developer but here we are :)
So....
I am coming towards the end of coding and just linking a few things up, I have WHMCS running on a vhost based external link and I need my domain search form to direct people from my main website to the vhost external link.
Here is the code I have so far...
<form method="post" action="https://bill.spacesrv.com/cart.php?a=add&domain=register&" target="_blank" class="uk-form idz-search-domain-form">
<fieldset>
<input type="text" class="uk-form-large uk-width-1-1" name="query" value="" placeholder="find your perfect domain name">
<button type="submit" class="uk-button-large idz-button blue uppercase">Find Domain</button>
</fieldset>
</form>
I have the domain in the action tag, I need that to stay the same and what the customer will search in the search box needs to go on the end of the domain.
This is what the final link should look like...
https://bill.spacesrv.com/cart.php?a=add&domain=register&query=domain.com
But currently when I hit the search button it is going to this link...
https://bill.spacesrv.com/cart.php?a=add&domain=register&
It is not adding the query={searched domain} to the end of the link.
It is a WHMCS link which is open for the world to see anyway, its not a link that needs to be hidden.
Nothwithstanding the fact that you need to take care of security ( dont open the target page for forms coming from anywhere ), you just need to specify the GET method for the form :
<form method="get" action="https://my.page.com?a=add" target="_blank" class="uk-form idz-search-domain-form">
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 :(
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
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).
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">