So I've been playing around with HTML forms and I am kind of new you all of this so any help would go a long way! But anyway... This is my form coding for emailing.
So when I submit that form with the correct areas filled, it then opens
in Outlook (2010 If that matters) were it then converts the spaces in the
body of the email into '+' (Plus symbols)... Can anyone give me ideas?
This HTML will be used on an offline site within our network and will not
go live. All computers are on the domain and will have access to this
HTML link on there desktop.
You should set the enctype attribute of the <form> tag to text.
<form enctype="text/plain" ...
More details in this KB
In both cases, the FORM data is e-mailed in as an Attachment, in an encoded format. For instance, in the preceding case, this is how the data looks:
Subject=Test+Subject&Body=%09kfdskfdksfkds%0D%0A%09
This is because the default ENCTYPE attribute for the FORM element is "application/x-www-form-urlencoded". To e-mail data in > plain-text format instead, explicitly specify an ENCTYPE attribute of "text/plain". For instance:
<FORM Action="mailto:xyz" METHOD="POST" ENCTYPE="text/plain">
mailto: protocol test:
<Br>Subject:
<INPUT name="Subject" value="Test Subject">
<Br>Body:
<TEXTAREA name="Body">
kfdskfdksfkds
</TEXTAREA>
<BR>
<INPUT type="submit" value="Submit">
</FORM>
produces the following Body:
Subject=Test Subject
Body= kfdskfdksfkds
You can use %20 for spaces in mailto links. I think you need to convert the + to spaces before you open the mailto link.
Related
I have just built a landing page: growanimationstudios.instapage.com
In the bottom I have a button to send an email, in the editor I was asked for the URL to redirect and I inserted:
mailto:growanimation#gmail.com?subject=hello world
But as you can see in the live version it results in a error and no email is sent.
What am I missing??
Try:
mailto:growanimation#gmail.com?subject=hello%20world
You cannot use whitespace the way you tried. You have to encode to a url friendly format.
See w3schools guide for URL encoding.
Option 1 - use of anchor
For an <a> tag, you could do:
Send
If you have a <button> just wrap the above anchor in a button. Like this:
<button>Send</button>
Option 2 - use of form
You could also accomplish what you want with the use of a form:
<form action="mailto:growanimation#gmail.com?subject=hello%20world" method="GET">
<input type="submit" value="Send" />
</form>
or
<form name="theForm" action="mailto:growanimation#gmail.com?subject=hello%20world" method="GET">
<button onClick="document.getElementById("theForm").submit();">Send</button>
</form>
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 HTML form as follows:
<form action="/AddFile" method="post">
<input type="file" name="filedata"/>
<input type="submit" value="Add File"/>
</form>
When I use it and submit a file called foo with content bar the POST request contains filedata=foo not filedata=bar as expected.
What am I doing wrong? How do I get the content of the file?
One you need to add enctype="multipart/form-data" to the form.
Two you need to get the files from $_FILES instead.
Three I think it's file_get_contents($_FILES['filedata']['tmp_name']); to get the file's contents.
Your markup lacks the attribute enctype="multipart/form-data", which is needed when a file field is present. See HTML 4.01 spec on form element.
Using multipart/form-data, the file contents get sent. The rest depends on your server-side handler.
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">
i want to have a textarea where I can edit html code directly. After submitting the form the content if the textarea (with html tags) should be saved to a MySQL database. I use PHP to receive the date and save it to the database. My problem is, that the HTML code is not properly sent to PHP. I do not receive the HTML code but just the text. How could I fix this?
my Form looks like this:
<form method="post" enctype="multipart/form-data" action="form.php">
<textarea name="html_code">
testlink
</textarea>
<input type=submit value="submit"/>
</form>
The form.php should now be able to show the content of the textarea
echo $_POST['html_code'];
shows: testlink
I want: testlink
Thank you all for your answers. I found the problem. It was Joomla. Joomla removed HTML tags when I got strings via getVar. I had to use the mask option JREQUEST_ALLOWRAW to solve the issue.
JRequest::getVar('html_code', '', 'post' , 'STRING', JREQUEST_ALLOWRAW);
Are you echoing it into an HTML page? Because the code will be parsed into an actual link.
View the source of your output page.
You're using the wrong encoding type.
Instead of "multipart/form-data", it should be "text/plain".
You don't have to encode the data as Doug says above; but it will be encoded for you when you submit the form, so don't forget to decode before using.
Your form should be:
<form method="post" enctype="multipart/form-data" action="form.php">
<textarea name="html_code">
<a href="link">testlink</a>
</textarea>
<input type=submit value="submit"/>
</form>
(No, it's not messed up. They're called HTML entities)
You can use htmlentities() in PHP to achieve that.