Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
gareth connop
14,865 PointsValidating contact form data
I am currently in the process of adding a form to my site and have been using Randy's "Build a simple PHP application" project as a guide. Everything is looking good but I really want to make the validation messages appear as HTML with the header and footer included when these messages are loaded, much like the thanks and contact pages. Also, at the moment no styling is applied to the validation messages due to them coming before the header.php file is included. Does anyone know how to do this? I have included the code below:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = trim($_POST["name"]);
$email = trim($_POST["email"]);
$message = trim($_POST["message"]);
if ($name == "" OR $email_address == "" OR $message == "") {
echo "You must specify a value for name, email address, and message.";
exit;
}
foreach( $_POST as $value ){
if( stripos($value, 'Content-Type:') !== FALSE ){
echo "There was a problem with the information you entered.";
exit;
}
}
if ($_POST["address"] != "") {
echo "Your form submission has an error.";
exit;
}
$email_body = "";
$email_body = $email_body . "Name: " . $name . "\n";
$email_body = $email_body . "Email: " . $email . "\n";
$email_body = $email_body . "Message: " . $message . "\n";
//TODO: Send Email
header("Location: contact.php?status=thanks");
exit;
}
?><?php
$pageTitle = "Contact MIke";
$section = "Contact";
include('inc/header.php'); ?>
<div class="section page">
<div class="wrapper">
<h1>Contact</h1>
<?php if (isset($_GET["status"]) AND $_GET["status"] == "thanks") { ?>
<p>Thanks for your email! I’ll be in touch shortly!</p>
<?php } else { ?>
<p>I’d love to hear from you! Complete the form to send an email.</p>
<form method="post" action="contact.php">
<table>
<tr>
<th>
<label for="name">Name</label>
</th>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
<tr>
<th>
<label for="email">Email</label>
</th>
<td>
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<th>
<label for="message">Message</label>
</th>
<td>
<textarea name="message" id="message"></textarea>
</td>
</tr>
<tr style="display: none;">
<th>
<label for="address">Address</label>
</th>
<td>
<input type="text" name="address" id="address">
<p>Humans (and frogs): please leave this field blank.</p>
</td>
</tr>
</table>
<input type="submit" value="Send">
</form>
<?php } ?>
</div>
</div>
<?php include('inc/footer.php') ?>
Thanks
Gareth
11 Answers
Randy Hoyt
Treehouse Guest TeacherThat's the very first thing I cover in the next project. :~)
Randy Hoyt
Treehouse Guest TeacherNo worries! (I'm glad I could anticipate your needs. :~) Let me know if you have any questions once you work through those tutorials.
Randy Hoyt
Treehouse Guest TeacherYou could do this with a fragment in the web address like [/contact/#form]. The page would then jump down to the location of the HTML element with an ID of "form". Or you could submit the form through Ajax, which is something I'm planning to cover in the next project. :~)
Randy Hoyt
Treehouse Guest TeacherYou would add an ID to the paragraph element with the thank you message:
<p id="thanks">Thank you ...
Then you would change your code that redirects to something like this:
header("Location: ./?status=thanks#thanks");
And then the page will send the email, redirect to the thank you page, and jump down to the paragraph with the thank you message.
Does that help?
Randy Hoyt
Treehouse Guest TeacherIt's the same approach. You would add an ID to the paragraph element with the error message:
<p id="error">Unfortunately ...
Then you would change your code that submits the form to something like this:
<form action="./#thanks">
And then the page will submit the form and (if it doesn't send the email) jump down to the paragraph with the thank you message.
Does that help?
Randy Hoyt
Treehouse Guest TeacherGlad to hear it! No problem. :-)
gareth connop
14,865 PointsI should have looked harder. Thanks Randy.
gareth connop
14,865 PointsThanks again Randy. That all now looks exactly how I wanted it. I do have one other problem though:
My form is located half way down my home page so when it is submitted and has an error, it refreshes at the top of the page, meaning I have to then scroll back down to view the error. Is there any way that I can code the errors so that when they are displayed, the page loads and displays at the location of the form?
gareth connop
14,865 PointsThanks Randy. Could you give me an example of this code would be implemented into your "Shirt's 4 Mike" contact page?
Edit: I mean the [/contact#form] option
gareth connop
14,865 PointsIt's not the thanks message that I'm having trouble with, it's the error messages. The thanks message has been setup to load with no other content displayed, so it's at the top of the page already and therefore no problem. All of the error messages load into the form header section which is located near the bottom of the page so when the submit button is pressed and an error is loaded, you have to scroll down again to view the form and error message. Is there a way of implementing the above for this? If so could you provide a code example? Thanks for all your help with this.
gareth connop
14,865 PointsThanks again for all your help with this. That works perfectly.