I am fairly new to bootstrap and this is the first I have used reCaptcha. I also don't have a lot of experience with PHP. I have designed numerous web sites and am very familiar with html(5) and css(3).
I can easily add the reCaptcha widget to my form and it displays correctly. However, I have no clue how to update my PHP file for the server side processing. Below is the code for my bootstrap contact form section and the code for my PHP file.
HTML (contact section):
<!-- Contact Section -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div class="g-recaptcha" data-sitekey="mySitekey"></div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
PHP (where do I put the required server-side php code here?):
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
// Create the email and send the message
$to = 'myEmail'; // This is where the form will send a message to.
$email_subject = "Portfolio Website Message: $name";
$email_body = "You have received a new message from your portfolio website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply#mydomain.com\n"; // This is the email address the generated message will be from.
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
Thanks for your help!
Related
I have a simple php mail server hookup in my nodeJS site to handle contact messages. For some reason (I am testing it from my local), it doesn't route the message to the assigned email address. I mention running it from local because I have heard that it may not work unless its from my live site running on Heroku. However,I literally cut and pasted the code from another app I have in which it does work from local. Here's the code for the contact_me.php:
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
// Create the email and send the message
$to = 'myapp#gmail.com'; // Add your email address inbetween the '' replacing yourname#yourdomain.com - This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply#yourdomain.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply#yourdomain.com.
$headers .= "Reply-To:$email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
I have gotten a little confused somewhere, but it seems that the submit button I created in my html (id='success') should be connected to the $to object somehow so that when the button is clicked, the message is sent to the email address associated with $to. Here's my html. Am I missing something here?
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<h2 class="featurette-heading" style="text-align: center;">Message</h2>
<h3 class="text-muted">Want to book an appointment? Send me a message and I'll contact you. Make sure you include your name, phone number, email, and when you'd like to book. It's that easy!</h3>
<form name="sentMessage" id="contactForm" novalidate>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I have modified this message since the first answer. The first answer seemed to work but I am still getting an error that prevents the request from going through. This is the error message:
You're using PHP, not node.js!
You're missing a very basic thing: you have not given your form fields names, so when you check for them, there's nothing there! You're checking for name, email, phone, message, but your fields have no name attributes at all. You need to name them in your HTML - and no, id values will not work:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<h2 class="featurette-heading" style="text-align: center;">Message</h2>
<h3 class="text-muted">Want to book an appointment? Send me a message and I'll contact you. Make sure you include your name, phone number, email, and when you'd like to book. It's that easy!</h3>
<form name="sentMessage" id="contactForm" novalidate>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<input type="text" class="form-control" placeholder="Name" id="name" name="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<input type="email" class="form-control" placeholder="Email Address" id="email" name="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" name="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div style="background-color: white; border: 1px solid #0085a1;" class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label></label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" name="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
I am fairly new to bootstrap. I have a contact form that is working properly. However, I would like to add a captcha to the form to help eliminate unwanted SPAM mail. How can I add a captcha to my existing form or any other "are you human" option to the form (i.e. would a simple checkbox work) and make it responsive as the current form is? Below is the code for my form:
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
Google ReCaptcha is a great tool for this and Google is also preparing a Captcha where no user input would be needed.
To implement a ReCaptcha, you will need to do following:
Create Google ReCaptcha API key
Paste the code into your HTML. Basically a div and some JS.
Validate the response when the form is submitted.
You can follow the step-by-step tutorial here: https://bootstrapious.com/p/bootstrap-recaptcha.
This is the php file I have made to store the responses from the Contact page of my Html file which is also written at the end.
Even after submitting the data in the contact field I am not getting anything.
Please try to help me out with the error.
PHP Code
<?php
// Check for empty fields
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['phone']) ||
empty($_POST['message']) ||
!filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!";
return false;
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$phone = $_POST['phone'];
$message = $_POST['message'];
// Create the email and send the message
$to = 'abcd#gmail.com'; // This is where the form will send a message to.
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the
details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: noreply#yourdomain.com\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
HTML CODE
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
You are missing the method and name attributes.
You are not specifying the Form method . If you want to use post method, you should specify
method="post".
If you are not specifying the form method, the default method will be GET
Also, you should add the attribute name to each and every input fields, then only you can access those in post.
Your updated HTML code will be:
<form name="sentMessage" id="contactForm" novalidate method="post">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" name="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" name="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" name="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" name="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" name="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
Look the method attribute in form and name attribute in input fields.
Hope this helps
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" onsubmit="return validate()" action="contactme.php">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="emailz" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<input type="submit" value="Submit" name="Submit" class="btn btn-success btn-lg"></input>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<-----PHP----->
<?php
if(empty($_POST['name']) ||
empty($_POST['emailz']) ||
empty($_POST['phone']) ||
empty($_POST['message']) ||
!filter_var($_POST['emailz'],FILTER_VALIDATE_EMAIL))
{
echo "No arguments Provided!!";
return false;
}
$name = $_POST['name'];
$email = $_POST['emailz'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$headers = "From: noreply#yourdomain.com\n"; // This is the email address the generated message will be from
$headers .= "Reply-To: $emailz";
$subject = 'New Message - Kieronb- $name';
$body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $emailz\n\nPhone: $phone\n\nMessage:\n$message";
mail("k#gmail.com",$subject,$body,$headers);
return true;
?>
SO, the above is the HTML and the PHP, now the majority of this code has been frankensteined from a bootstrap project, but i thought i would just have a play with the contact form too, but it is going all the way through to the missing arguments catch at the beginning of the PHP.
I cant see why the data is coming through empty- have i missed something painfully obvious?
I am running on a web server, not locally.
Thanks
Edit; thanks everyone, i forgot my method, and names on the form!
Your form fields do not have the name attribute. Without them their values are not submitted with the form.
<input type="email" class="form-control" placeholder="Email Address" id="emailz" required data-validation-required-message="Please enter your email address.">
should be
<input type="email" name="emailz" class="form-control" placeholder="Email Address" id="emailz" required data-validation-required-message="Please enter your email address.">
And your <form> needs to have the method specified as POST or else it defaults to GET:
<form method="post" name="sentMessage" id="contactForm" onsubmit="return validate()" action="contactme.php">
I have a Bootstrap 3 form that displays the success message: "Your message has been sent" but I don't receive any emails. Not even in my spam/junk folder. It validates properly but no email is sent. Here's the PHP code. Please help!
PHP
<?php
// check if fields passed are empty
if(empty($_POST['firstname']) ||
empty($_POST['lastname']) ||
empty($_POST['address']) ||
empty($_POST['address2']) ||
empty($_POST['city']) ||
empty($_POST['state_province']) ||
empty($_POST['country']) ||
empty($_POST['zip']) ||
empty($_POST['phone']) ||
empty($_POST['email']) ||
empty($_POST['checkbox']) ||
empty($_POST['comment']) ||
{
echo "No arguments Provided!";
return false;
}
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$address = $_POST['address'];
$address2 = $_POST['address2'];
$city = $_POST['city'];
$state_province = $_POST['state_province'];
$country = $_POST['country'];
$zip = $_POST['zip'];
$phone = $_POST['phone'];
$email_address = $_POST['email'];
$checkbox = $_POST['checkbox'];
$message = $_POST['comment'];
// create email body and send it
$to = 'email#example.com'; // put your email
$email_subject = "Contact form submitted by: $firstname";
$email_body = "You have received a new message. \n\n".
"Here are the details:\n \nFirst Name: $firstname \n Last Name: $lastname\n Address: $address\n Address2: $address2\n City: $city\n State/Province: $state_province\n Country: $country\n zip: $zip\n Phone: $phone\n Email: $email_address\n Checkbox: $checkbox\n Message: \n $message";
$headers = "From: $email_address\n";
$headers = "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
HTML
<form class="form-horizontal" role="form" id="ContactUs" novalidate>
<!-- First Name -->
<div class="form-group">
<label class="control-label col-md-4" for="firstname"><abbr title="Required field">*</abbr>First Name</label>
<div class="col-md-8">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required data-validation-required-message="Please enter your first name">
<div class="help-block"></div>
</div>
</div>
<!-- Last Name -->
<div class="form-group">
<label class="control-label col-md-4" for="lastname"><abbr title="Required field">*</abbr>Last Name</label>
<div class="col-md-8">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name" required data-validation-required-message="Please enter your last name">
<div class="help-block"></div>
</div>
</div>
<!-- Address -->
<div class="form-group">
<label class="control-label col-md-4" for="address"><abbr title="Required field">*</abbr>Address</label>
<div class="col-md-8">
<input type="text" class="form-control" id="address" name="address" placeholder="Address" required data-validation-required-message="Please enter your address">
<div class="help-block"></div>
</div>
</div>
<!-- Address 2 -->
<div class="form-group">
<label class="control-label col-md-4" for="address2">Address 2</label>
<div class="col-md-8">
<input type="text" class="form-control" id="address2" name="address2" placeholder="Address 2">
</div>
</div>
<!-- City -->
<div class="form-group">
<label class="control-label col-md-4" for="city"><abbr title="Required field">*</abbr>City</label>
<div class="col-md-8">
<input type="text" class="form-control" id="city" name="city" placeholder="City" required data-validation-required-message="Please enter your city">
<div class="help-block"></div>
</div>
</div>
<!-- State/Province -->
<div class="form-group">
<label class="control-label col-md-4" for="state_province"><abbr title="Required field">*</abbr>State/Province</label>
<div class="col-md-8">
<input type="text" class="form-control" id="state_province" name="state_province" placeholder="State/Province" required data-validation-required-message="Please enter your State or Province">
<div class="help-block"></div>
</div>
</div>
<!-- Country -->
<div class="form-group">
<label class="control-label col-md-4" for="country"><abbr title="Required field">*</abbr>Country</label>
<div class="col-md-8">
<input type="text" class="form-control" id="country" name="country" placeholder="Country" required data-validation-required-message="Please enter your Country of residence">
<div class="help-block"></div>
</div>
</div>
<!-- Zip/Postal Code -->
<div class="form-group">
<label class="control-label col-md-4" for="zip"><abbr title="Required field">*</abbr>Zip/Postal Code</label>
<div class="col-md-8">
<input type="text" class="form-control" id="zip" name="zip" placeholder="Zip/Postal Code" required data-validation-required-message="Please enter your Zip or Postal Code">
<div class="help-block"></div>
</div>
</div>
<!-- Phone -->
<div class="form-group">
<label class="control-label col-md-4" for="phone">Phone</label>
<div class="col-md-8">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone">
</div>
</div>
<!-- Email Address -->
<div class="form-group">
<label class="control-label col-md-4" for="email"><abbr title="Required field">*</abbr>Email address</label>
<div class="col-md-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required data-validation-required-message="Please enter your email">
<div class="help-block"></div>
</div>
</div>
<!-- Mailing List -->
<div class="form-group">
<label class="control-label col-md-4" for="checkbox">Include in mailing list</label>
<div class="col-md-8">
<input type="checkbox" class="form-control" id="checkbox" name="checkbox" value="1">
</div>
</div>
<!-- Comment -->
<div class="form-group">
<label class="control-label col-md-4" for="comment">Comment</label>
<div class="col-md-8">
<textarea class="form-control" id="comment" name="comment" rows="3"></textarea>
</div>
</div>
<!-- Buttons -->
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<div id="success"> </div> <!-- For success/fail messages -->
<button type="submit" class="btn btn-primary pull-right">Submit</button>
</div>
</div>
</form>
UPDATE 8:50PM 03/09
I uploaded this to a different host and now, when I submit the form I'm getting an error :"Message cannot be sent!"
you are sending the email to "email#example.com"
Probably try sending it to your email address, by changing the $to variable.
Also change the headers. From This
$headers = "From: $email_address\n";
$headers = "Reply-To: $email_address";
To:
$headers = "From: $email_address\n";
$headers .= "Reply-To: $email_address";
note the .= on the second line, this means add the string onto headers vs replacing the content of the variable.
And maybe change this:
mail($to,$email_subject,$email_body,$headers);
return true;
to
return mail($to,$email_subject,$email_body,$headers); // will return true on success send, or false if it failed to send.