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

HTML

marsha grasett
marsha grasett
9,995 Points
Posted by marsha grasett
marsha grasett
9,995 Points

Contact Form and Success message on portfolio site

I have a Contact Form in HTML. JS for validation.

And I would like a "success message" to display upon valid completion of myForm.

Could I use the " replaceWith method" to replace "myForm" with "success message".

But if I wanted to just have "success message" appear above "myForm" - How would I do this?

Any ideas or suggestions would be amazing. thnx

12 Answers

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

jQuery's before(); function would work for that, I believe.

$("#myForm").before('<p class="success">Something about your form is successful!!!</p>');

I would use PHP to display a success message after the 2nd tier of validation has been done on each field, and the message has been sent through the mail server. The Interactive Website project gives green success notifications on each field, which is perfect for showing the user right before they submit their form. If you show a success banner before that point, they might think the form has already gone through.

Or if you are talking about validation solely through the use of JavaScript, i wouldnt recommend it, as that is easily circumvented.

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

I just wanted a "Message was sent successfully!" after the form was sent.

(I am using js and php to validate as in the "Smells Like Bacon" Contact Form.)

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

I'll see if I can come up with a mod to the script. Working on it now.

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

Step 1 Change this line in contact.php - line 40 something

header("location: success.php?success=1");

Step 2 Then add this into a new file called success.php

<?php 
$success = $_GET["success"];
if(isset($success)) {
echo "Message was sent successfully!";
}
?>

To keep this simple we won't go into php's

include();

function right now. I probably couldn't explain it very well.

Step 3 Then take everything from the top of contact.html until "We have a wide variety" And paste it into success.php before the last bit of php code. Take everything after "sure to take you by surprise!" Paste it after the

?>

at the end of the php.

Save everything, make sure your server has PHP installed and let me know if this works for you; it works great for me.

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

thanks! Trying this out now.

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

Is this right?

<?php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>

all the way down to and including:

<div class="grid_12">
        <h1 class="hero">We have a wide variety of delicious desserts that     are sure to take you by surprise!</h1>
    </div>
marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points 
$success = $_GET["success"];
if(isset($success)) {
echo "Message was sent successfully!";
}
?>

<div id="form" class="grid_12 omega">
<h2>Contact Smells Like Bakin'</h2>
<form action="contact.php" method="post">
Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

success.php:

<!DOCTYPE HTML>
<html>
<head>
<met.........
..........div class="grid_12">
<h1 class="hero">
<?php 
$success = $_GET["success"];
if(isset($success)) {
echo "The form has been submitted. Thank you for your time.";
}
?>
</h1>
</div>
<div id="form" class="grid_12 omega">
<h2>Contact....................
..............requiredFilledIn();
</script>
</body>
</html>
Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

You wrapped the php around your HTML, wrap the HTML around your php

marsha grasett
marsha grasett
9,995 Points
marsha grasett
marsha grasett
9,995 Points

ah ok I am so tired. Have to take a break and will continue laters.

Thanks Charles Shores!

Chad Shores
PLUS
Chad Shores
Courses Plus Student 8,868 Points
Chad Shores
Chad Shores
Courses Plus Student 8,868 Points

You're welcome, good luck!