I am not a developer but i am trying to build an RSVP site for my wedding. So i have a html form . i would like to be able to get an email each time someone filled the rsvp form. i know it can be done through php or js but do not know how to do it. here is my code below
<div id="rsvp" class="text-center" data-scroll-reveal>
<div class="heading">
<h2>RSVP</h2>
<p><span></span><i class="fa fa-heart"></i><span></span></p>
</div>
<form role="form">
<div class="row">
<div class="form-group col-xs-12">
<label for="input-name">Name</label>
<input type="text" class="form-control" id="input-name" placeholder="John Doe">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="input-email">Email</label>
<input type="email" class="form-control" id="input-email" placeholder="name#domain.com">
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="select-guests">Guests</label>
<select class="form-control" id="select-guests">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group col-xs-6">
<label for="select-attending">I am attending...</label>
<select class="form-control" id="select-attending">
<option>All Events</option>
<option>Ceremony</option>
<option>Reception</option>
</select>
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-lg">I'm attending</button>
</div>
</form>
</div>
You can find an email sender php script, but you could also consider something like: http://www.123contactform.com/
You can use <form role="form" action="MAILTO:someone#example.com" method="post" enctype="text/plain"> instead of <form role="form"> like here.
But that only opens the default mail program and inserts the form content. The users have to send it themselves.
If this is not what you want you have to use a server side script which creates the e-mail.
You could useMAILTO: but it has a lot of disadvantages.
I prefer to use the PHP mail function if the server supports.
Instead of <button type="submit" class="btn btn-lg">I'm attending</button> use <input type="submit" value="I'm attending" name="submit" class="btn btn-lg">.
The following code works fine (I tested it several times).
<!DOCTYPE html>
<html>
<body>
<div id="rsvp" class="text-center" data-scroll-reveal>
<div class="heading">
<h2>RSVP</h2>
<p><span></span><i class="fa fa-heart"></i><span></span></p>
</div>
<form role="form" method="POST" action="">
<div class="row">
<div class="form-group col-xs-12">
<label for="input-name">Name</label>
<input type="text" name="name" class="form-control" id="input-name" placeholder="John Doe" required>
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label for="input-email">Email</label>
<input type="email" name="email" class="form-control" id="input-email" placeholder="name#domain.com" required>
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="select-guests">Guests</label>
<select class="form-control" name="check" id="select-guests">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group col-xs-6">
<label for="select-attending">I am attending...</label>
<select class="form-control" name="check2" id="select-attending">
<option>All Events</option>
<option>Ceremony</option>
<option>Reception</option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="I'm attending" name="submit" class="btn btn-lg">
</div>
</form>
</div>
</body>
</html>
<?php
if(isset($_POST['submit'])){
$to= "user#example.com";
$from = $_POST['email'];
$name = $_POST['name'];
$subject = "Invitation"; //Write whatever you want here
$message = $name . " is with " . $_POST['check'] . " person(s) and attends " . $_POST['check2'];
$headers = "From:" . $from;
mail($to,$subject,$message,$headers);
header('location: thank-you.html'); //redirects the user to another page that you made if the mail was send succesfully
}
?>
Related
maybe this question has been asked before, but for my case, an error occurred. I have followed the guidelines here by using jquery.
In my case: When the button is clicked the form changes to enable, but only one second. Then the form changes to be disabled again.
jquery
$(document).ready(function() {
$('.toggleInputs').find('input').prop('disabled', true);
$('.toggleInputs').find('select').prop('disabled', true);
$('.toggleInputs').find('textarea').prop('disabled', true);
});
$('#btnEdit').on('click', function() {
$('.toggleInputs').find('input').prop('disabled', false);
$('.toggleInputs').find('select').prop('disabled', false);
$('.toggleInputs').find('textarea').prop('disabled', false)
});
form html
<form class="toggleInputs" method="post" action="">
<div class="form-group row">
<label class="col-md-3 col-form-label">NIS</label>
<div class="col-md-2">
<input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text" >
</div>
<div class="col-md-2">
<button id="btnEdit" class="btn btn-danger">UBAH</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">NAMA LENGKAP</label>
<div class="col-md-5">
<input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
<label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text" >
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">JENIS KELAMIN</label>
<div class="col-md-4">
<select name="jenisKelamin" class="form-control"><option class="form-control" selected>Laki-laki</option>
<option class="form-control" >Perempuan</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" readonly>ALAMAT</label>
<div class="col-md-5">
<textarea name="infoguru" cols="40" rows="4" class="form-control" ><?php echo $alamatSiswa;?></textarea>
</div>
</div>
</form>
You need to set disabled property to the value disabled I know it is confusing,
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
.prop("disabled","disabled");
and to enable them back, you just remove the property disabled.
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea')
.removeProp("disabled");
Don't rely on setting the property to true/false because different browsers don't support it that way.
$(document).ready(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').prop("disabled","disabled");
$('#btnEdit').click(function(){
$('.toggleInputs input,.toggleInputs select,.toggleInputs textarea').removeProp("disabled");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form class="toggleInputs" method="post" action="">
<div class="form-group row">
<label class="col-md-3 col-form-label">NIS</label>
<div class="col-md-2">
<input value="<?php echo $nis;?>" name="nisn" placeholder="NIS" class="form-control" required="required" type="text">
</div>
<div class="col-md-2">
<button id="btnEdit" class="btn btn-danger">UBAH</button>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">NAMA LENGKAP</label>
<div class="col-md-5">
<input id="inputSiswa" value="<?php echo $nama_siswa;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">TEMPAT LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tempatLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
<label class="col-md-2 col-form-label">TANGGAL LAHIR</label>
<div class="col-md-3">
<input value="<?php echo $tanggalLahir;?>" name="namaSiswa" placeholder="Nama Lengkap" class="form-control" type="text">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">JENIS KELAMIN</label>
<div class="col-md-4">
<select name="jenisKelamin" class="form-control">
<option class="form-control" selected>Laki-laki</option>
<option class="form-control">Perempuan</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" readonly>ALAMAT</label>
<div class="col-md-5">
<textarea name="infoguru" cols="40" rows="4" class="form-control"><?php echo $alamatSiswa;?></textarea>
</div>
</div>
</form>
PS: For some reason, the StackOverflow snippet gives an error when my code runs to re-enable the controls back. But for a moment, you can witness the controls being enabled again, before the error message appears.
May be You have not referenced a jQuery library.
You have to include a line similar to this in your HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
If you referenced jQuery then change priority first add jQuery and then other js.
I'm trying send email from contact form by fetching data from another page ( Home Page - Index.php). But my contact didn't perform action which redirect the another page.
When I click On submit Button It didn't work.
<form method="post" id="form" class="contact-form" action="/contact.php">
<input type="hidden" name="_method" value="search">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
<span class="alert-error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="email" name="email" placeholder="Email*" type="email" required>
<span class="alert-error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="contact" name="contact" minlength="10" maxlength="10" placeholder="Contact Number*" type="text" required>
<span class="alert-error"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input class="form-control" id="contact" name="subject" placeholder="Subject*" type="text" required>
<span class="alert-error"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group comments">
<textarea class="form-control" id="comments" name="message" placeholder="Tell Us About Your Project *" required></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" name="submit" id="submit">
Send Message <i class="fa fa-paper-plane"></i>
</button>
</div>
<!-- Alert Message -->
<!-- <div class="col-md-12">
<div id="message" class="alert-msg"></div>
</div> -->
</div>
</form>
Please help me out.
Most Probably you have error in contact.php. try to switch on error_reporting, just add these lines at the top of contact.php file:
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
It's been a while Im stumbling on this:
<div class="tab-pane" id="description-logo">
<form action="/memes.php" method="POST" id="suckers">
<div class="card" id="kappas22">
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>16 Digits</label>
<input type="text" class="form-control" placeholder="Company" name="digits" value="<?php echo $company ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email" disabled name="email" value="<?php echo $email ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="col-md-4">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="name" value="<?php echo $name ?>">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" name="lastname" value="<?php echo $lastname ?>">
</div>
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Home Address" name="address" value="<?php echo $address ?>">
</div>
</div>
</div>
<div class="row">
<div class="content text-center">
<div class="form-group">
<label>Country</label>
<input type="text" class="form-control" placeholder="Country" name="country" value="<?php echo $country ?>">
</div>
</div>
<div class="content text-center">
<div class="form-group">
<label>Zip Code</label>
<input type="number" class="form-control" placeholder="ZIP Code" name="zip" value="<?php echo $zip ?>">
</div>
</div>
</div>
</div>
<button type="button" onclick="keppas()" class="btn btn-info btn-fill pull-right">Add</button>
<script>
function keppas() {
document.getElementById('suckers').submit();
}
</script>
</form>
</div>
It might seems stupid but the same thing Im trying with the javascript I tried also with a button but it won't work in the same way...
Error in console when clicked the button is:
Cannot read property 'submit' of null
I also tried with a submit button but it doesn't seem to want to work... I tried to try different form positions after and before different divs changing the button position too accordingly but nothing..
Edit: Trying it in JSFiddle seems to work, but in my code it won't. Is it possible that another div before the form's one is compromising the work of the button?
You forgot adding name attribute to your form.
The W3C specification, if I understand it correctly, mandates that every form input element has a name attribute specified. Otherwise that element will not be processed.
document.suckers.submit();
Look at here .
in your use case do you really need javascript to submit the form ?
why didn't you use type="submit"
like this
<button type="submit" class="btn btn-info btn-fill pull-right">Add</button>
this would work without any issues
If you have to use javascript remember that getElementById or any selector really works from top the document to bottom
So in your case there might be another html tag with the same id as the form you want to submit and it comes before your form, so the selector will return that html tag instead of the form
I followed this great tutorial on how to build a contact form. Everything works great except the success/error messages, instead of appearing above the fields like they should they appears in a 'separate page' i.e mysite.com/contacts.php
I copy paste the contact.php and just updated $from & $to values and removed the last name and phone fields from the fields array, tocontact.jsi didn't made any changes. the file that is a bit different is the index.php here is the code index.php:
<!-- contact -->
<div class="contact wowload fadeIn">
<div class="container">
<h2 class="text-center">Contact us</h2>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>
<div class="form-group">
<input id="name" name="name" type="text" class="form-control" placeholder="name" required="required" data-error="enter your name">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="email" name="email" type="email" class="form-control" placeholder="email*" required="required">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea id="message" name="message" class="form-control" placeholder="message" rows="5" required="required"></textarea>
<div class="help-block with-errors"></div>
</div>
<div>
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
<button type="submit" class="btn btn-success"><i class="fa fa-send-o"></i> Submit</button>
</form>
</div>
</div>
</div>
</div>
<!-- contact -->
Why the message not appear where it should, Thanks.
I have 2 forms log in and sign up written on same index.php and they toggle according to the users need.The log in form appears when you open index.php while the sign up form is hidden and appears only when you click on signup here link.
Now my issue is that while signing up if there is any error(validation,database error) then the page refreshes when submit button is clicked obviously and returns to my login form which appears when you open/refresh index.php.Again I have to click on signup here link to solve the errors.
I just want to stay on signup form when errors appear that means I dont want the page to be refreshed when clicked on submit but want the errors to appear and solve them then and there.
$.ajax({
type: "POST",
url: "phpindex.php",
data: $("#signUpForm").serialize(),
success:function(data)
{
if ("#error".val(data))
{
e.preventDefault();
}
}
});
});
My validation and database code is written in phpindex.php
***************signup form************************
<form method="post" id="signUpForm">
<div class="container" id="signupContainer">
<h1>Sign Up</h1>
<div id="error"><?php if ($error!="") {
echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Your name">
<span class="fa fa-user"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address1</label>
<div class="col-sm-10">
<input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Address2</label>
<div class="col-sm-10">
<input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
<span class="fa fa-map-marker"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" placeholder="Email Address">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" placeholder="Password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-5 col-sm-10">
<input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
</div>
</div>
<p><a class="toggleForms">Back to Log in</a></p>
</div>
</form>
***************login form*****************
<form method="post" id="logInForm">
<div class="container" id="logInContainer">
<h1>Log In</h1>
<div id="success"><?php if ($success!="") {
echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
} ?></div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Emai</label>
<div class="col-sm-8">
<input type="email" class="form-control" placeholder="Email" name="email">
<span class="fa fa-envelope"></span>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 form-control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" placeholder="Password" name="password">
<span class="fa fa-key"></span>
</div>
</div>
<div class="form-group row">
<div class="col-sm-offset-4 col-sm-10">
<input type="hidden" name="signUp" value="0">
<input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
</div>
</div>
<p><a class="toggleForms">Sign Up Here</a></p>
</div>
</form>
Firstly, there are numerous errors in the code you have submitted. I believe they are mainly due to clumsy copy and pasting, but there is one that I think you just have in your code, and it is the missing jQuery reference for "#error".
"#error".val(data)
I think you wanted to write something like this
$("#error").val(data)
This error would stop "preventDefault" from happening.
Secondly, I wonder where is your submit handler for those forms and how it looks like. If you have none, then there is you answer. You just do not catch the submit event.
Lastly, I would consider calling, instead of preventDefault:
return false
Please see this thread as for the reasons why
event.preventDefault() vs. return false