I'm making a HTML submission form and I want to have the form emailed to my email address without using a PHP script since Github Pages doesn't support it.
<form action="MAILTO:shirui.wang#hotmail.com" method = "post" enctype = "text/plain">
<p>Email Address:<input type = "text" placeholder = "Email Address:" size = "40" id="Email"></p>
<textarea rows="4" cols="50" id = "Textbox" placeholder="Enter your feeback here:"></textarea>
<p><input type="submit" value="Submit" id = "Submission"></p>
</form>
Right now, when I press submit, it will open my email client but the message I typed into the textbox does not copy over into the email message.
How do I get the content of the textarea to be copied into message part of the email?
You have to do this with javascript:
you need an a like this:
<form id="themagicform" >
<textarea id="yourtextarea"></textarea>
<a id="ThemagicA" href='mailto:me#me.com?subject=Me&body=textofemail'>Mail me</a>
</form>
and then use jquery or javascript to change textofemail when they press submit:
$("themagicform").on('submit', function(){
var hrefStr = $('themagicA').attr('href');
var text = $('yourtextarea').text();
hrefStr.replace('textofemail', text);
$('themagicA').attr('href', hrefStr);
});
Done :), hope it's works.
In HTML you can specify a mailto: address in the <form> element's [action] attribute, The [Action] is what opens the email client the method="GET" populates the form.
<form action="mailto:youraddr#domain.tld" method="GET">
<input name="subject" type="text" />
<textarea name="body"></textarea>
<input type="submit" value="Send" />
</form>
What this will do is allow the user's email client to create an email and the GET will pre-populated with the fields in the <form>.
Related
I have this simple input field for e-mail addresses:
<form>
<input type="email" placeholder="E-Mail" required>
<input type="submit" value="Send" />
</form>
If you write "max#mail.de", you can submit the form, because the email is valid.
If you write "max#.de", you can't submit the form, because the email is invalid.
But!
If you write "max#i9", you can submit the form, too. But the mail is invalid. Why?
And how can I fix it?
Because max#i9 is a valid email as it stated in this article.
You can "fix" it by adding your own email pattern, see this tutorial:
<form>
<input type="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
</form>
Here's a more detailed question about Why does HTML5 form validation allow emails without a dot?
<form>
<input pattern="[a-zA-Z0-9.-_]{1,}#[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}$"
type="text" required />
<input type="submit" value="Send" />
</form>
This is because HTML5 type="email" validator is only find # symbol in your input string. If it is found your form will submitted else it won't submitted.
To avoid this you have to use javaSctipt form Validation like this :-
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("#");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
HTML can't help you with data validation, you can learn js to do that
I have a form with an input box and I want to change the value before submit.
Example:
<form action="savefiends.php" method="post">
<input type="text" name="id" value="123456"><br>
<input type="submit">
</form>
How can I save the value as 123456#example.com without editing savefiends.php?
P.S. user can edit the value
You can use the onsubmit attribute as shown in the snippet below.
Note: I added extra checking to avoid appending "#example.com" if already present. Also I replaced the action attribute content by "#" to avoid form submission.
function resetId(){
var idInput = document.getElementById("id");
var suffix="#example.com";
// just to check if #example.com is already present
var checkRegExp=new RegExp(suffix + "$");
if (!idInput.value.match(checkRegExp)) idInput.value +="#example.com";
alert("Value before submit:" + idInput.value);
}
<form action="#" method="post" onsubmit="resetId();return false">
<input type="text" name="id" value="123456" id="id"><br>
<input type="submit">
</form>
A customer of ours has a register.html page with a very simple form that allows users to enter their details for registration to the clients website.
The form action is set to "mailto:clientsemail.client.com?subject=subject". The enctype of the page is set to text/plain and the method is post.
What should happen is that the users email client opens with a new email, with the subject set and the forms text boxes posted into the body of the form. Then the website visitor can simply send the email.
It's not very elegant I know, but its how they have it set up.
Now, this all works as expected and sends a rather clunky looking email to the correct address using the web visitors email client, but only in Firefox, chrome and opera. Safari bugs out completely, and internet explorer opens the email client and populates the address and subject fields, but the form inputs are not copied to the body.
Does anyone know why this is? its driving me nuts. Been looking at it all day and every post I find on the subject states its setup correctly and should work. Theres no mention of it not working in IE.
mailto: form actions depend on browsers and local email clients playing together nicely. They do this so rarely that mailto: form actions are unusable on the WWW.
Replace it with a server side program that sends the email.
The mailto tag should only accept the following parameters:
cc=name#email.com carbon copy e-mail address
bcc=name#email.com blind carbon copy e-mail address
subject=subject text subject of e-mail
body=body text
All other input parameters are discarded (i.e. FirstName, LastName, etc...)
As a workaround, you can add a hidden body input to the form, and populate it with whatever text you want in the submit event.
Example:
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function beforeSubmit() {
var firstName = document.getElementById("FirstName");
var lastName = document.getElementById("LastName");
var body = document.getElementById("body");
body.value = firstName.value + lastName.value;
}
</script>
<form action="mailto:me#myemailaddress.com" enctype="text/plain" onsubmit="beforeSubmit()">
<input name="Subject" id="Subject" type="text" value="" /><br/>
<input name="FirstName" id="FirstName" type="text" value="" /><br />
<input name="LastName" id="LastName" type="text" value="" /><br />
<input name="body" id="body" type="hidden" value="" /><br />
<input name="Submit" id="submit" type="submit" value="Submit" /><br/>
<input name="Reset" id="Reset" type="reset" value="Reset" /><br />
</form>
</body>
For some reason IE doesn't like this POST form to email option (works at FF and Chrome)
You should do something like that:
function sendFormToEmail() {
var inputs = $('#infoForm :input');
var bodyStr = "";
inputs.each(function(index, value) {
bodyStr += value.name + " = " + value.value + " , ";
});
window.location = "mailto:Example#gmail.com?subject=subject&body=" + bodyStr;
}
and in your form:
<input type="button" class="button" value="Send Information" onclick="sendFormToEmail()" />
i am working on a search function, herefore i need the value of an input to generate the final url (which shows the results)
Let's say the user enters the content he is looking for here:
Name: <input type="text" id="myText">
now i need to generate a hyperlink from
http://constant/constant?query=NAME&someotherconstantthings
here, the NAME needs to be replaced from the content of the input
Try to use PHP, you could add a action to the Form Element to post the entered informations to the PHP file, then generate ur hyperlink.
<form action="phpfilename.php" method="post">
Name: <input type="text" id="myText" name="myText">
<input type="submit" value="Search">
</form>
<?php
$name = $_POST['myText'];
$hyperlink = 'http://constant/constant?query='.$name;
?>
You need something like this:
<form action="URL" method="get">
Enter your name here: <input type="text" name="query" value="">
<input type="submit" value="Search">
</form>
You need to replace the keyword URL with the path to the page which performs the search. You can remove the keyword URL if want to submit the form to the same page.
I am fairly new to HTML and am having trouble figuring out this issue.
I have this form which lets the user enter their email address and then when they submit it registers them to the website.
I am wondering how can I get the value of the email address they enter for the value of another form?
Here's what I am working with. Any tips?:
<form class="form" method="post" action="https://register.sendreach.com/forms/?listid=7465"><input name="lid" value="7465" type="hidden">
<div class="field"><label>Email:</label>
<input class="text" name="email" value="My best email address is..." onblur="if (this.value == '') {this.value = 'My best email address is...';}" onfocus="if (this.value == 'My best email address is...') {this.value = '';}" type="text">
<form action="http://mywebsite.com/?mode=register&type=quick" method="post">
<input type="text" name="member_email" value = /></p> **<--- Here is where I want to get the email address text used earlier in the name field called email and use it for the name field member_email. I want to use that as the value. How do I grab that?**
<input name="product_id" value="1" type="hidden">
<input name="success_url" value="aHR0cDovL2luY29tZWphY2tlci5jb20vbWVtYmVyc2hpcC1ob21lLw==" type="hidden"></div>
<input class="button small_btn" value="Get Instant Access" type="submit">
<p class="small">Download Sent To Email!</p>
</form>
Do something on submit (similar to how you're doing something on focus and on blur):
<form onsubmit="...
On the submit event, get the two email inputs:
var sourceInput = document.getElementsByName('email')[0];
var targetInput = document.getElementsByName('member_email')[0];
...and set the value:
targetInput.value = sourceInput.value;
I didn't test the above, but I believe that should do what you're looking for. It may be better to give the two inputs ids as well, so you can use getElementById instead of getElementsByName.
Edit:
The above would only work if both inputs and forms are on the same page, and also if the page is not refreshed. Based on the question, I am assuming that's the case. The above also does not check to see if the email was saved successfully (again, I don't know if that's something you want to check before copying the email over).
use sessions
page one:
<?php
session_start();
$_SESSION['email_address']=$email_variable;
?>
page two:
<php
new_email_variable=$_SESSION['email_address'];
?>
use this.
<form class="form" method="post" action="https://register.sendreach.com/forms/?listid=7465"><input name="lid" value="7465" type="hidden">
<div class="field"><label>Email:</label>
<input class="text" name="email" value="My best email address is..." onblur="if (this.value == '') {this.value = 'My best email address is...';} document.getElementById('member_email').value=this.value;" onfocus="if (this.value == 'My best email address is...') {this.value = '';}" type="text">
<form action="http://mywebsite.com/?mode=register&type=quick" method="post">
<input type="text" name="member_email" id="member_email"></p> **<--- Here is where I want to get the email address text used earlier in the name field called email and use it for the name field member_email. I want to use that as the value. How do I grab that?**
<input name="product_id" value="1" type="hidden">
<input name="success_url" value="aHR0cDovL2luY29tZWphY2tlci5jb20vbWVtYmVyc2hpcC1ob21lLw==" type="hidden"></div>
<input class="button small_btn" value="Get Instant Access" type="submit">
<p class="small">Download Sent To Email!</p>
</form>
notice i have added id attribute to the input tage where you want to get the email address. and a little code in the tag from where you want to get the email address