Good day/evening. I have this sort of form in HTML:
<form action="scripts/form-testimonial.php" class="form" method="post">
<ul>
<li><label for="name">Name</label> <input class="required" id="namef3" name="name" placeholder="Name" type="text"></li>
<li><label for="email">E-mail</label> <input class="required" id="emailf3" name="email" placeholder="E-mail" type="text"></li>
<li><label for="company">Company</label> <input id="companyf3" name="company" placeholder="Company (if applicable)" type="text"></li>
<li><label for="msg">Message</label> <textarea class="required" cols="43" id="msgf3" name="msg" placeholder="Your feedback" rows="8"></textarea></li>
</ul>
<button class="submit" type="submit">Send your feedback</button>
</form>
and this sort of php sript for this form as a separate file:
<?php
$receip = "office#avehire.co.uk";
$subj = "Testimonial";
$bodymsg = "Name: ".$_POST['name']."\n"
."Company: ".$_POST['company']."\n"
."Email: ".$_POST['email']."\n"
."Message: ".$_POST['msg']."\n";
if(!$_POST['msg']){
header("Location: ../error.html");
exit;
}
$email = $_POST['email'];
if(mail($receip, $subj, $bodymsg, 'From: Contact <'.$email.'>')){
header("Location: ../msg_sent_feedback.html");
}
?>
I also have a validator for this form, but this is not important. What is more important here is the way how this form works. Basically - when you click submit button - it goes to a separate php file, process the form and then - from what is already there - goes to msg_sent_feedback.html file. What I want to do is to NOT opens a separate file but just display a message in the same basic html file where the actual form exists. A message e.g. "Message sent".
Another thing - if I already have a validation script - do I need to have the first "if" in this form? or can I remove it totally? the one which redirects to error.html. Or can I remove these 4 lines? That line - I guess - is responsible for errors in the form, but as I mentioned, I have a validation script. I don't really want to change html. is it possible to modify the php script to work within the html document, as instructed above? thanks
Here is an Jquery ajax example that will help you.
<?php
$receip = "office#avehire.co.uk";
$subj = "Testimonial";
$bodymsg = "Name: ".$_POST['name']."\n"
."Company: ".$_POST['company']."\n"
."Email: ".$_POST['email']."\n"
."Message: ".$_POST['msg']."\n";
if(!$_POST['msg']){
echo "<h1>Error sending e-mail";
exit;
}
$email = $_POST['email'];
if(mail($receip, $subj, $bodymsg, 'From: Contact <'.$email.'>')){
echo "<h1>Email sent successfully</h1>";
}
?>
Html :
<!Doctype html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function submitmyform(){
data=$('#myform').serialize();
$.ajax({
url: "myphpfile.php",
type:'POST',
data:data,
async:false,
dataType:'html',
success: function(msg){
$('#response_goes_here').html(msg);
}
});
}
</script>
<form action="" id="myform">
<ul>
<li> <label for="name">Name</label> <input id="namef3" name="name" type="text" placeholder="Name" class="required"/>
</li>
<li> <label for="email">E-mail</label> <input id="emailf3" name="email" type="text" placeholder="E-mail" class="required"/>
</li>
<li> <label for="company">Company</label> <input id="companyf3" name="company" type="text" placeholder="Company (if applicable)" />
</li>
<li> <label for="msg">Message</label> <textarea id="msgf3" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"></textarea>
</li>
</ul>
<button type="button" class="button" onclick="submitmyform();">Send your feedback</button>
</form>
<div id="response_goes_here"></div>
Related
I have made a website and would like to use AWS to host it. I currently have it running on S3 as a static server however I can't use the contact form for it. So after doing some research I tried AWS beanstalk but can't seem to get it working. When I click submit, nothing happens. This is the code that's setting up the contact form in index.html
<form id="contact-form" action="" class="post-reply" method="POST">
<p><input class="w3-input w3-border" id="form_name" type="text" placeholder="Name" required name="Name"></p>
<p><input class="w3-input w3-border" id="form_number" type="text" placeholder="Phone Number" required name="Phone Number"></p>
<p><input class="w3-input w3-border" id="form_email" type="text" placeholder="Email" required name="Email"></p>
<p><input class="w3-input w3-border" id="form_subject" type="text" placeholder="Subject" required name="Subject"></p>
<p><input class="w3-input w3-border" id="form_message" type="text" placeholder="Message" required name="Message"></p>
</form>
<p>
<button class="w3-button w3-black" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
Then I created another file and named it mail.php with the following code:
<?php
if (isset($_POST["submit"])) {
$name = $_POST["form_name"];
$email = $_POST["form_email"];
$phone = $_POST["form_phone"];
$subject = $_POST["form_subject"];
$message = $_POST["form_message"];
$to ="duvalprecisiongrinding#gmail.com";
$subject = $subject;
$message = "Email: {$email} Phone: {$phone} Message:" . $message;
//Always set content-type when sending HTML email
$headers ="MIME-Version 1.0" . "\r\n";
//More Headers
$headers .= 'From: duvalprecisiongrinding#gmail.com';
$mail = mail($to,$subject,$message,$headers);
if ($mail) {
echo "<script>alert('Message Sent.');</script>";
}else {
echo "<script>alert('Message not Sent. Please try again.');</script>";
}
}
?>
I made several changes to the contact form that should help, indicated with comments below.
I think the main things keeping it from working at all were the submit button being outside the form and the missing action attribute. Fixing only those would have at least gotten it as far as mail.php, but the names of the form controls need to match the keys of $_POST in mail.php for it to really work as intended.
<form id="contact-form" action="mail.php" class="post-reply" method="POST">
<!-- updated this attribute ^ -->
<p><input class="w3-input w3-border" name="form_name" type="text" placeholder="Name" required></p>
<p><input class="w3-input w3-border" name="form_phone" type="text" placeholder="Phone Number" required></p>
<p><input class="w3-input w3-border" name="form_email" type="text" placeholder="Email" required></p>
<p><input class="w3-input w3-border" name="form_subject" type="text" placeholder="Subject" required></p>
<p><input class="w3-input w3-border" name="form_message" type="text" placeholder="Message" required></p>
<!-- removed the name attributes from the inputs and changed their ids to
names that match the $_POST keys in mail.php -->
<p>
<button class="w3-button w3-black" type="submit" name="submit">
<!-- Moved the button inside the form and added this ^ name attribute -->
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
</form>
I'm using the Remodal plugin to show modals on my website. (https://github.com/VodkaBears/Remodal) This works great for my needs. This is the first time I'm working with modals and e-mail forms. I have a script to submit the form, and it looks like this;
<form name="contact" id="contact" class="contact" method="post">
<label for="name">
<span>Name</span>
<input type="text" name="name" required="true" />
</label>
<label for="email">
<span>Email</span>
<input type="email" name="email" required="true" />
</label>
<label for="phone">
<span>Phone</span>
<input type="text" name="phone" required="true" />
</label>
<label for="message">
<span>Your message</span>
<textarea name="message" required="true"> </textarea>
</label>
<label>
<br>
<span> </span>
<input type="submit" class="send" value="Send"/>
</label>
</form>
And this is my script for submitting the form;
$(document).on('click', '.send', function () {
$.ajax({
type: "POST",
url: "mail.php",
data: $('form.contact').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.contact").modal('hide');
},
error: function () {
alert("Error.");
}
});
return false;
});
Mail.php:
<?php
//if "email" variable is filled out, send email
if (isset($_REQUEST['email'])) {
//Email information
$admin_email = "my#email.com";
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$phone = $_REQUEST['phone'];
$message = $_REQUEST['message'];
//send email
mail($admin_email, "New e-mail", $message, "From:" . $email);
//Email response
echo "Thank you!";
}
?>
I found this code somewhere, and I'm trying to implement it to my form. It works! However, I don't get any success message or error messages with this. I'm trying to wrap my head arond it, but can't figure it out. Can someone help?
I've been learning PHP for about two days now. So I'm really new to PHP. I have tried my best to understand but no matter what I write, my code never works. I got it to send an email successfully one time. But I'm not able to get it to send the contents in my form.
Here is my HTML form.
<!-- FORM BEGINS -->
<form action="contact-form-handler.php" method="post">
<!-- Full Name -->
<div class="formWrapper ">
<label name="firstname" for="firstName"><span>*</span>First Name</label>
<input type="text" name="memberFirstName" id="memberFirstName" onkeyup="activateButton()" class="inputText" tabindex="1" maxlength="256" onkeydown="return checkAlphaNumericText(event,this);" required="required"/>
</div>
<p class="fieldsetDivider"></p>
<div class="formWrapper">
<label for="lastName"><span>*</span>Last Name</label>
<input type="text" name="memberLastName" id="memberLastName" onkeyup="activateButton()" class="inputText" tabindex="2" maxlength="256" onkeydown="return checkAlphaNumericText(event,this);" required="required"/>
</div>
<p class="fieldsetDivider"></p>
<!-- Date of Birth-->
<p class="fieldsetDivider"></p>
<div class="formWrapper smallInput">
<label for="firstInput"><span>*</span>Date of Birth
<div class="labelClarify">(MM/DD/YYYY)</div>
</label>
<div class="inlineInput">
<input type="text" name="month" id="month" maxlength="2" onkeyup="activateButton();autotab(this, 'day')" onkeypress="return isNumberKey(event)" class="inputText" placeholder="MM" required="required"/>
<span>/</span>
</div>
<div class="inlineInput">
<input type="text" name="day" id="day" maxlength="2" onkeyup="activateButton();autotab(this, 'year')" onkeypress="return isNumberKey(event)" class="inputText" placeholder="DD" required="required"/>
<span>/</span>
</div>
<div class="inlineInput">
<input type="text" name="year" id="year" maxlength="4" onkeyup="activateButton()" onkeypress="return isNumberKey(event)" class="inputText" placeholder="YYYY" required="required"/>
</div>
<a rel="Please enter your date of birth" class="formHelp tooltip-link" href="#">
<img src="../../images/site3/common/form_icon_help.png">
</a>
</div>
<p class="fieldsetDivider"></p>
<!-- Member ID -->
<div class="formWrapper">
<label for="memberID"><span>*</span>Member ID</label>
<div class="inlineInput">
<input type="text" name="memberID" id="memberID" class="inputText" onkeyup="activateButton()" tabindex="3" maxlength="9" onkeypress="return isNumberKey(event)" required="required"/>
</div>
<a rel="Please enter your member ID" class="formHelp tooltip-link" href="#">
<img src="../../images/site3/common/form_icon_help.png">
</a>
</div>
<p class="fieldsetDivider"></p>
<!-- Zip Code -->
<div class="formWrapper">
<label for="zipCode"><span class="requiredStar">*</span>Zip Code</label>
<div class="inlineInput">
<input type="text" name="memberZipCode" id="memberZipCode" onkeyup="activateButton()" tabindex="4" class="inputText" maxlength="5" onkeypress="return isNumberKey(event)"/>
</div>
</div>
<p class="fieldsetDivider"></p>
<!-- Button -->
<div class="button">
<button class="greenBtnLarge" type="submit" style="text-decoration:none;"><span>Next<span></button>
</div>
</form>
<!-- FORM ENDS -->
Can someone please help me with a php code that would work for this form? I have found a couple template forms on the internet and I've spent hours trying to modify them to work with my form. But no luck.
And I can get the PHP and form to work together and make it send me an email from my server, so there's no problem with the server. An email will send. I just can't get the PHP code to send the contents of the form. It sends the email, but with no form details. Understand?
I really, really need help with this. Can you guys help me create a PHP code that will work with my HTML form I posted in this thread? I really need to get past this step in this project.
Thank you!
UPDATE!
Here is PHP template I found on the internet, but I don't know how to really modify it properly.... please help?
<?php
$errors = '';
$myemail = 'example#example.com';//<-----Put Your email address here.
if(empty($_POST['firstname']) ||
empty($_POST['lastname']) ||
empty($_POST['dob']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['firstname'];
$email_address = $_POST['lastname'];
$message = $_POST['dob'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: contact-form-thank-you.html');
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact form handler</title>
</head>
<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>
</body>
</html>
You have a several code errors...
Remove the <label> tags from your titles for <input type="text">... they are not needed.
Make sure your form field name matches your email code $_POST['something'] for example
You have <input type="text" name="memberFirstName" id="memberFirstName" /> in your form... BUT
you have $_POST['firstname'] in your email code. Change $_POST to memberFirstName OR change your <input name and id to firstname
The same changes need to be made to all elements so they match precisely.
AND remember... PHP is case sensitive.
The HTML form fields are not the same with the fields in php email handler
Ex.
The input name should be same as what the handler should get
Since
<input type="text" name="memberFirstName" required="required"/>
The index of $_POST should be same memberFirstName
$_POST['memberFirstName']
This should be applied to all fields
It seems the HTML form is not related to the php handler at all.
Its better to use this form for testing instead
<form action="contact-form-handler.php" method="POST">
First Name: <input name="firstname" type="text"><br>
Last Name:<input name="lastname" type="text"><br>
DOB: <input name="dob" type="text">
<button type="submit">Send</button>
</form>
Note:
If you are using wamp or xampp local server you need to check if the email service is configured correctly otherwise no email will be sent
Check this for reference:
How to configure XAMPP to send mail from localhost?
I am using php mail form on my page. It work good but when email is sent the message about successful post is opened in new blank page. What I want to do is show message directly under send button with some formating. My code looks like this.
<form action="contact.php" method="POST" id="contactform_main2" style="font-size:14px">
<ol>
<li>
<label for="email">Email</label>
<input type="email" id="email" name="email" class="text" required />
</li>
....etc
<li class="buttons">
<input type="submit" name="imageField" value="Odoslať" class="send" style="cursor:pointer" />
</li>
</ol>
</form>
and this is the php
<?php
...geting data
if(
mail("dominik0109#gmail.com", $subject,
$sprava, "From:" . $email)){
echo "<strong>Sucessfully sent</strong>";}
else {
echo "Error";}
?>
You can see it live on my page, fill any content to post form.
How to fix this please?
Thnaks
You just need to send the form to the same page and check if POST variables are passed.
mypage.php
<form action="#message" method="POST" id="contactform_main2" style="font-size:14px">
<ol>
<li>
<label for="email">Email</label>
<input type="email" id="email" name="email" class="text" required />
</li>
<!-- ....etc -->
<li class="buttons">
<input type="submit" name="imageField" value="Odoslať" class="send" style="cursor:pointer" />
</li>
</ol>
</form>
<?php
if(isset($_POST['email'])) {
// ...geting data
echo "<a name='message'></a>";
if(mail("dominik0109#gmail.com", $subject, $sprava, "From:" . $email)){
echo "<strong>Sucessfully sent</strong>";
}
else {
echo "Error";
}
}
?>
If you are looking not to refresh the page at all you'll need javascript and ajax.
I started working on a wordpress template and I am extremely stuck on this contact form, which I don't seem to find the problem. I must mention that I am somehow new to php, but I can understand pretty fast. This is what I am using for my contact page (there are also other elements but they do not interfere with the code I`m having trouble with):
<?php get_header();
$two2_option = two2_get_global_options();
global $post; setup_postdata($post); ?>
<?php if($two2_option['two2_contact_email']){ ?>
<form method="post" id="ajax_form" action="#">
<fieldset>
<ul class="form-item" id="field-name">
<li>
<label><?php _e("Name","jbirdie"); ?>:<span class="field-required" title="<?php _e("Required Field","jbirdie"); ?>">*</span></label>
<input type="text" maxlength="90" name="name" id="name" placeholder="<?php _e("name","jbirdie"); ?>" size="30" class="form-field required text_input clear" />
</li>
<li>
<label><?php _e("E-mail","jbirdie"); ?>:<span class="field-required" title="<?php _e("Required Field","jbirdie"); ?>">*</span></label>
<input type="email" maxlength="90" name="email" id="email" placeholder="<?php _e("e-mail","jbirdie"); ?>" size="30" class="form-field required email text_input clear" />
</li>
<li>
<label><?php _e("Phone","jbirdie"); ?></label>
<input type="number" maxlength="90" name="phone" id="phone" placeholder="<?php _e("phone number","jbirdie"); ?>" size="30" class="form-field required email text_input clear" />
</li>
<li class="message">
<label><?php _e("Comments","jbirdie"); ?> <span>Available for quotation</span></label>
<textarea cols="55" rows="" name="message" id="message" placeholder="<?php _e("Comments","jbirdie"); ?>" class="form-textarea text_area clear" ></textarea>
</li>
</ul>
<input type="submit" name="submit" id="submit" value="send" class="submit form-submit" />
<div id="result"></div>
</fieldset>
</form>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<?php get_footer(); ?>
and the following in functions.php :
add_action('wp_ajax_nopriv_two2_send_contact_form', 'two2_send_contact_form');
add_action('wp_ajax_two2_send_contact_form', 'two2_send_contact_form');
function two2_send_contact_form(){
$two2_option = two2_get_global_options();
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$subject = "Message from your portfolio";
$body = "From $name, \n\n$email, \n\n$phone, \n\n$message";
$to = $two2_option['two2_contact_email'];
$result = mail($to, $subject, $body);
if($result){
print "<h3>".__("Success","two2")."</h3><p>".__("Your email has been sent!","two2")."</p>";
} else {
print "<h3>".__("Error","two2")."</h3><p>".__("Try it again later, please.","two2")."</p>";
}
die();
}
...and it`s simply not working...can someone please give me a hint or sth to find the error?
Have you got a script to submit the form to the ajax handler?
e.g.
<script type="text/javascript" >
jQuery(document).ready(function($) {
$('#ajax_form').submit(function(evt){
var form_data = {
action: 'two2_send_contact_form',
name: jQuery('#name').val(),
email: jQuery('#email').val(),
phone: jQuery('#phone').val(),
message: jQuery('#message').val()
};
$.post('<?php echo admin_url('admin-ajax.php'); ?>', form_data, function(response) {
console.log(response);
});
return false;
});
});
</script>
http://codex.wordpress.org/AJAX_in_Plugins
Also there is an extra php closing brace <?php } ?> in your contact form.
Edit
Corrected jQuery selector & ajax url.