I have a form in HTML with a submit button:
<button type="submit" class="subscribe-submit" onclick="return foo()">Subscribe</button>
I would like it to have the details written on the form to be sent to my personal email address.
I have searched on Stack Overflow, Google, Bing and Yahoo but I couldn't find the answer
You can't do this with pure HTML. However, with a little PHP you can get your form ready to go.
Here's an example of a form handler PHP code in a separate file called form_handler.php:
<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_message = $_POST['comment'];
$mail_to = 'yourPersonalEmail#email.com';
$subject = 'Message from a site visitor '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Thank you for the feedback.');
window.location = 'form.html';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('Something went wrong. Please try again or contact at myPersonalEmail#email.com');
window.location = 'form.html';
</script>
<?php
}
?>
And here's the HTML form in a file called form.html:
<html>
<head>
</head>
<body>
<form name="form" action="form_handler.php" method="POST">
<label class="name">Name</label>
<br>
<input name="name" type="text" required="required">
<br>
<label class="email">E-Mail</label>
<br>
<input name="email" type="email" required="required">
<br>
<label class="comment">Comment</label>
<br>
<textarea name="comment"></textarea>
<br>
<input type="submit" name="submit" value="Subscribe" align="center">
</form>
</body>
</html>
I suggest you learn a little bit about PHP and form handing. You might need to change the fields but I think you'll get the idea.
Related
I have a form with a submit button. When i click this button i dont want to be redirected to the page connection.php, that is listed in action="". But insteed i want it to just show pop-up window that says successful or not successful, and let the connection2.php do its thing in the background.
HTML:
<form action="connection2.php" method="post">
<input type="date" name="date" placeholder="Name" required="">
<input type="submit" name="submit" id="submit" class="strelka-send" value="Insert">
<div class="clear"> </div>
</form>
CONNECTION2.PHP:
<?php
# Connection
$servername = "";
$connectionInfo = array(
"Database"=>"",
"UID"=>"",
"PWD"=>""
);
$conn = sqlsrv_connect($servername, $connectionInfo);
if( $conn === false ) {
echo "Error (sqlsrv_connect): ".print_r(sqlsrv_errors(), true);
exit;
}
# Parameters
$Date = $_POST['date'];
$params = array
(&$Date);
# Statement
$sql = "INSERT INTO table([Date]) VALUES
(?)";
$stmt = sqlsrv_prepare($conn, $sql, $params);
if ($stmt === false) {
echo "Error (sqlsrv_prepare): ".print_r(sqlsrv_errors(), true);
exit;
}
if (sqlsrv_execute($stmt)) {
echo "Statement executed.\n";
} else {
echo "Error (sqlsrv_execute): ".print_r(sqlsrv_errors(), true);
}
# End
sqlsrv_free_stmt($stmt);
sqlsrv_close($conn);
?>
<!DOCTYPE html>
<html>
<body>
<br>
<h1>SUCCESS</h1>
<script>
setInterval(function(){
window.location.href="link_to_index.html" }, 5000);
</script>
</body>
</html>
So far i have set timer on the page connection2.php that opens after form is submited, and then goes back to previous page. But it is not the nicest solution.
if you dont want redirection in form submit , you have to use AJAX technology for example JQUERY
take a look at Submitting HTML form using Jquery AJAX
Use this code to submit the form into a popup window.
This code submits the form to a popup window after its submission.
<form action="connection2.php" method="post" target="popupwindow" onsubmit="window.open('connection2.php', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="date" name="date" placeholder="Name" required="">
<input type="submit" name="submit" id="submit" class="strelka-send" value="Insert">
</form>
I haven't tested this code.
But hoping that this will work for you.
I've been looking for over 2 days for solution to this problem of mine. Went through all the related posts on stack, but no luck. I have a form that accepts data, then passes on to a php procedure to process it which in turn calls on a html thank you page. I am not at all familiar with Javascript or JQuery but can make it work after spending some time. I am posting the codes here along with many suggestions that I tried to no avail. Any help that ends my misery is appreciated. Thanks.
HTML
<form method='post' action='contact-form-proc.php' name='contactform' id='contactform' onsubmit="setTimeout('clear_form()',200);return true">
<p>
<label for='fullname'>Your Name:</label><br/>
<input type='text' name='fullname' />
</p>
<p>
<label for='email' >Email Address:</label><br/>
<input type='text' name='email' />
</p>
<p>
<label for='mobile' >Mobile:</label><br/>
<input type='text' name='mobile' />
</p>
<p>
<label for='checkIndate' >Check in Date:</label><br/>
<input type='text' name='checkIndate'/>
</p>
<p>
<label for='comment' >Comment:</label><br/>
<textarea name='comment' cols='25' rows='3'></textarea>
</p>
<input type="image" src="submit.gif" name="submit"/>
<!--<input type='submit' name='submit' value='' id="submit" />-->
<input type="hidden" name="submit" value="Submit"/>
</form>
PHP
<?php
if(empty($_POST['submit']))
{
echo "Form is not submitted!";
exit;
}
if(empty($_POST["fullname"]) ||
empty($_POST["email"]))
{
echo "Please fill the form";
exit;
}
$name = $_POST["fullname"];
$email = $_POST["email"];
$mobile = $_POST["mobile"];
$checkindate = $_POST["checkIndate"];
$comment = $_POST["comment"];
mail( 'xxx#xxxxxx.com' , 'New form submission' , "New form submission: Name: $name, Email:$email, Mobile: $mobile, CheckIndate:$checkIndate, Comment:$comment" );
header('Location: thank-you.html');
?>
These are what I tried:
<script type="text/javascript">
/*$('#contactform').trigger("reset");*/
function clear_form() {
/* document.contactform.reset();
document.getElementById("contactform").reset();*/
/*$(window).load(function() {
$('#contactform input[type="text"]').val('');*/
$(window).load(function() {
$('#contactform').children('input').val('');
}
});
}
</script>
Thanks a ton for taking time out and trying to help me and all others with a solution to this weird problem.
I found a solution though. I kept everything as it is and additionally,
a. Wrote a function to reset the form(s)and,
b. Added that function to onload and onunload handler of the body element.
As below:
<script>
function clearForms()
{
var i;
for (i = 0; (i < document.forms.length); i++) {
document.forms[i].reset();
}
}
</script>
<body onload="clearForms()" onunload="clearForms()">
Hope it helps and stops many like me from wasting valuable hours and days. Regards.
try this one.
<script type="text/javascript">
$(document).ready(function(){
$('input').val('');
});
</script>
End you don`t have to call onsubmit action, document.ready would be enough.
I am trying to make a suggestion box so that way I can see what my viewers think would make my site better. Here is some code that I have.
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="input" id="input" cols="45" rows="5"></textarea>
</label>
</form>
<form id="form2" name="form2" method="post" action="">
<label>
<input type="submit" name="export" id="export" value="Submit" />
</label>
</form>`
But this is all I have. It seems to work client side but not server side. Can someone tell me what language and if you know the code that I would have to use that would be great.
Post to another HTML file action="myformresults.html"
Post to a server side scripting language like PHP action="myphpformresult.php" which will 'do things' and then render an HTML document or any other thing (like send as email).
You can call a Javascript function to handle the form.
I would recommend PHP.
You can access a post variable in PHP by name:
HTML <input name="postVar">
PHP $myVar = $_POST['postVar'];
all you need is writing a jquery code as follows in your html file: //note that i rewrite your html code as no need for two forms
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function submitters(){
event.preventDefault();
$.post( "mail.php.txt", $( "#form1" ).serialize(),function( data ) {
$("#formcontainer").fadeOut("slow");
$("#formcontainer").html(data);
} );
}
</script>
</head>
<body>
<div id="formcontainer">
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="input" id="input" cols="45" rows="5"></textarea>
</label>
<input Onclick="submitters()" type="button" name="export" id="export" value="Submit" />
</form>
</div>
</body>
</html>
then in mail.php file something like
<?php
$input=$_POST['input'];
$to = 'youremail#domain.com';
$subject = 'the subject';
$message = $input;
$headers = 'From: website.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>
For my website I'm working on a contact form, which works. But I want the submit button to be like other buttons on my site, meaning I want it to be styled like the code below.
However, I can't get it to submit via a "href" code.
I've tried applying answers on similar questions but haven't had any luck.
Any help would be greatly appreciated!
THE STYLE FOR THE SUBMIT BUTTON I WANT TO USE:
<div class="section-buttons">
<p class="button layer" data-depth="0.10" ><a href = "I WANT THIS TO SUBMIT THE FORM"
class="y1 knop roll swing"><span class="g1">SUBMIT</span><span class="g2">SUBMIT</span>
</a></p>
</div>
THE FORM CODE:
<form action="form.php" method="post" enctype="multipart/form-data">
<label></label>
<input name="name" required placeholder="Name">
<label></label>
<input name="email" type="email" required placeholder="E-mail">
<label></label>
<textarea name="message" cols="20" rows="5" required placeholder="Message">
</textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
EDIT:
Thanks a lot for the quick replies. Really appreciated.
Celt, your solution definitely brings me close to the solution.
It does indeed bring me to the form.php but it doesn't seem to submit the actual data to an email address.
Could it be that my PHP file (forms.php) does something wrong with the new code? I'm guessing the last part "if ($_POST['submit'])" doesn't quite work with this new approach? Any help?
Sorry for the noobness.
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: website.com';
$to = 'email#email.com';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";
?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Thank you for your email!</p>';
} else {
echo '<p>Oops! An error occurred. Try sending your message
again.</p>';
}
}
?>
This should work for you:
In a form i am making,i need to inform the processing php script what button was clicked.I have three buttons,new,save and delete.I was expecting the form and all the buttons values to be posted but the form + the button clicked only gets posted.I am looking at the html spec here http://www.w3.org/TR/html401/interact/forms.html#submit-format but i am yet to find some explanation if this should be expected.I have this php script
<?php
/**
tpost.php
*/
//Buttons
$new = $_POST['new'];
$save = $_POST['save'];
$delete = $_POST['delete'];
//Error: Notice: Undefined index: save in C:\wamp\www\form-dev\troll.php on line 7
//Forms
$city = $_POST['city'];
$zip = $_POST['zip'];
$cs = $_POST['cs'];
//Error: Notice: Undefined index: save in C:\wamp\www\form-dev\troll.php on line 8
//Buttons echo
echo '<b>'.$new.'</b>' .'<br/>';
echo '<b>'.$save.'</b>' .'<br/>';
echo '<b>'.$delete.'</b>' .'<br/>';
//Forms echo
echo '<b>'.$city.'</b>' .'<br/>';
echo '<b>'.$zip.'</b>' .'<br/>';
echo '<b>'.$cs.'</b>' .'<br/>';
?>
this is the html i am using
<!Doctype html>
<head>
<meta charset="uft-8">
<title>Buttons post</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
label{
width:15%;
float:left;
font-style:italic;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.inew').on("click",function()
{
alert('new');
});
$('.isave').on("click",function()
{
alert('save');
});
$('.idelete').on("click",function()
{
alert('delete');
});
});
</script>
</head>
<body>
<form action="tpost.php" name="troll" method="post">
<label>Enter Your City</label><input type="text" name="city" value="some-city"/><br/><br/><br/>
<label>Enter Your Neighbourhood</label><input type="text" name="zip" value="my-zip" /><br/><br/><br/>
<label>Enter Your Nearest Shopping Mall</label><input type="text" name="cs" value="shop-here" /><br/>
<br/><hr/><br/>
<br/>
<hr/>
<input class="inew" type="submit" name="new" value="new" />
<input class="isave" type="submit" name="save" value="save" />
<input class="idelete" type="submit" name="delete" value="delete" />
</form>
</body>
</html>
What is the explanation for this?.
I found the answer here http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It says
If a form contains more than one submit button, only the activated
submit button is successful.