View Full Version : No formatting for form error/success messages.

07-11-2012, 10:19 PM
Hi guys. I'm having a hard time figuring out how to word my question, so hopefully I can explain this ok.

I purchased an html theme and the author is not available for support. My main problem is with the contact form. It works well, but the validation messages do not format properly.

If someone filled out the form and there were errors, the resulting error messages have zero formatting. It basically creates a new page that looks like this:


The theme demo has a nicely formatted message that pops up on the same page as the contact form.

I'll include as much code as I can to help.


<div id="message"></div>

<form method="post" action="includes/contact_form.php" name="contactform" id="contactform">


<label for=name><span class="required">*</span> Your Name</label>
<input name="name" type="text" id="name" size="53" value="" />

<br />
<label for=email><span class="required">*</span> Email</label>
<input name="email" type="text" id="email" size="53" value="" />

<br />
<label for=phone><span class="required">*</span> Phone</label>
<input name="phone" type="text" id="phone" size="53" value="" />

<br />
<label for=type><span class="required">*</span>Type of piano:</label>
<select name="type" id="type">
<option value="Upright 48">48" Upright Piano</option>
<option value="Upright 50">50" Upright Piano</option>
<option value="Upright 52">52" Upright Piano</option>
<option value="Upright 54">54" Upright Piano</option>
<option value="Upright 50">56" Upright Piano</option>
<option value="Grand5">5' Grand Piano</option>
<option value="Grand6">6' Grand Piano</option>
<option value="Grand7">7' Grand Piano</option>
<option value="Grand8">8' Grand Piano</option>
<option value="Grand9">9' Grand Piano</option>


<br />
<label for=startingaddress><span class="required">*</span>Address for Pickup</label>
<input name="startingaddress" type="text" id="startingaddress" size="53" value="" /><br/>

<label for=startingsteps><span class="required">*</span>Number of steps?</label>
<input name="startingsteps" type="text" id="startingsteps" size="3" value="" /><br/>

<label for=endingaddress><span class="required">*</span>Address for Delivery</label>
<input name="endingaddress" type="text" id="endingaddress" size="53" value="" /><br/>

<label for=endingsteps><span class="required">*</span>Number of steps?</label>
<input name="endingsteps" type="text" id="endingsteps" size="3" value="" /><br/>

<label for=date>Desired moving date:</label>
<input name="date" type="text" id="date" size="15" value="" /><br/>

<label for=ampm>am or pm pickup?</label>
<select name="ampm" id="ampm" >
<option value="am">a.m.</option>
<option value="pm">p.m.</option>
<option value="either">either a.m. or p.m. is fine</option>

<label for=comments>Additional Comments</label>
<input name="comments" type="text" id="comments" size="53" value="" />

<div class="grid-hr" style="margin:20px 0;"></div>

<div class="grid_3 alpha">
<span class="required"></span> <h5>Enter the Verification Number</h5>

<label for=verify>&nbsp;&nbsp;&nbsp;<img src="includes/image.php" ></label>
<input name="verify" type="text" id="verify" size="6" value="" style="width: 50px;" /><br /><br />

<div class="grid_4 omega alpha">
<input type="submit" class="submit" id="submit" value="Submit" />



</div><!-- end #contact .grid_7 .alpha -->

The php:

<?php session_start();

if(!$_POST) exit;


// Simple Configuration Options

// Enter the email address that you want to emails to be sent to.
// Example $address = "joe.doe@yourdomain.com";

$address = "example@gmail.com";

// Twitter Direct Message notification control.
// Set $twitter_active to 0 to disable Twitter Notification

$twitter_active = 0;
$twitter_user = "";
$twitter_pass = "";

// END OF Simple Configuration Options


// Only edit below this line if either instructed to do so by the author or have extensive PHP knowledge.
// Please Note, we cannot support this file package if modifications have been made below this line.

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$type = $_POST['type'];
$startingaddress = $_POST['startingaddress'];

$startingsteps = $_POST['startingsteps'];
$endingaddress = $_POST['endingaddress'];
$endingsteps = $_POST['endingsteps'];
$date = $_POST['date'];
$ampm = $_POST['ampm'];
$comments = $_POST['comments'];

$verify = $_POST['verify'];
$verify = md5($verify);

// Important Variables
$session = $_SESSION['verify'];
$error = '';

if(trim($name) == '') {
$error .= '<li>Your name is required.</li>';

if(trim($email) == '') {
$error .= '<li>Your e-mail address is required.</li>';
} elseif(!isEmail($email)) {
$error .= '<li>You have entered an invalid e-mail address.</li>';

if(trim($phone) == '') {
$error .= '<li>Your phone number is required.</li>';


if(trim($type) == ''){
$error .='<li>Please enter the piano type</li>';

if(trim($startingaddress) == '') {
$error .= '<li>Please enter the starting address.</li>';

if(trim($startingsteps) == '') {
$error .= '<li>Please enter the number of steps at the starting address.</li>';

if(trim($endingaddress) == '') {
$error .= '<li>Please enter the destination address.</li>';

if(trim($endingsteps) == '') {
$error .= '<li>Please enter the number of steps at the destination address.</li>';

if(trim($date) == '') {
$error .= '<li>Please enter the desired moving date. If you are not sure, enter "unknown".</li>';

if(trim($ampm) == '') {
$error .= '<li>Please enter whether you want am or pm pickup.</li>';
if($session != $verify) {
$error .= '<li>The verification code you entered is incorrect.</li>';

if($error != '') {
echo '<div class="error_message">Attention! Please correct the errors below and try again.';
echo '<ul class="error_messages">' . $error . '</ul>';
echo '</div>';

} else {

if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); }

// Advanced Configuration Option.
// i.e. The standard subject will appear as, "You've been contacted by John Doe."

$e_subject = 'Piano Moving Quote requested by ' . $name . '.';

// Advanced Configuration Option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

$msg = "You have been contacted by $name for a piano moving quote\r\n\n";
$msg .= "Type of piano: $type \r\n\n";
$msg .= "Starting address: $startingaddress \r\n\n";
$msg .= "Number of steps at starting address: $startingsteps \r\n\n";
$msg .= "Destination address: $endingaddress \r\n\n";
$msg .= "Number of steps at destination address: $endingsteps \r\n\n";
$msg .= "Desired moving date: $date \r\n\n";
$msg .= "a.m. or p.m. pickup? $ampm \r\n\n";

$msg .= "Additional comments: $comments\r\n\n";
$msg .= "You can contact $name via email, $email or via phone $phone.\r\n\n";

if($twitter_active == 1) {

$twitter_msg = $name . " - " . $comments . ". You can contact " . $name . " via email, " . $email ." or via phone " . $phone . ".";


if(mail($address, $e_subject, $msg, "From: $email\r\nReturn-Path: $email\r\n")) {

echo "<fieldset>";
echo "<div id='success_page'>";
echo "<h3>Request Sent Successfully!</h3>";
echo "<p>Thank you! <strong>$name</strong>. We will get back to you as soon as possible!</p>";
echo "</div>";
echo "</fieldset>";

} else {

echo 'ERROR!'; // Dont Edit.



function twittermessage($user,$pass,$comments) { // Twitter Direct Message CURL function, do not edit.
$url = "http://twitter.com/direct_messages/new.xml";
$ch = curl_init();
curl_setopt($ch, CURLOPT_USERPWD, "$user:$pass");
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,"user=$user&text=$comments");
$results = curl_exec ($ch);
curl_close ($ch);

function isEmail($email) { // Email address verification, do not edit.

return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn |bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk| dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs |gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr| kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum |mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr |pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf |tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za| zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));


The javascript:



var action = $(this).attr('action');

$('#contactform #submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');

$("#message").slideUp(750,function() {

$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
type: $('#type').val(),
startingaddress: $(#'startingaddress').val(),
startingsteps: $(#'startingsteps').val(),
endingsteps: $(#'endingsteps').val(),
date: $(#'date').val(),
ampm: $(#'ampm').val(),
comments: $('#comments').val(),
verify: $('#verify').val()
document.getElementById('message').innerHTML = data;
$('#contactform img.loader').fadeOut('fast',function(){$(this).remove()});
$('#contactform #submit').attr('disabled','');
if(data.match('success') != null) $('#contactform').slideUp('slow');



return false;



And the relevant css:

/* Contact Form
#contact-page { display: block;margin-bottom:50px;}
#contact-page p {text-align:justify;}
#contact-page h3 {font-size:26px;margin:20px 0;}
#contact-page label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 120px;}
#contact-page label img {border:0 none;}
#contact-page input, #contact-page textarea, #contact-page select { margin: 0; padding: 10px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; -moz-border-radius: 5px; -webkit-border-radius:5px; }
#contact-page input:focus, #contact-page textarea:focus, #contact-page select:focus { border: 1px solid #999; background-color: #fff; color:#333; }
#contact-page input.submit {width: 85px; cursor: pointer; border: 1px solid #222; background:#333; color:#fff; float:right;position: relative;right: 50px;top: 10px;}
#contact-page input.submit:hover { background:#444; }
#contact-page fieldset {}
#contact-page legend { padding:20px 0; font-weight:bold; color:#000;}
#contact-page span.required{ font-size: 13px; color: #ff0000; float:left; } /* Select the colour of the * if the field is required. */
#contact-page label.addition {font-size:16px;color:#666;width:70px;}
#contact-page input#verify {margin:0 0!important;padding:5px;}

/* Style for the error message */
#message { margin: 10px 0; padding: 0; }
.error_message { display: block; line-height: 22px; background: #FBE3E4 url(../includes/assets/error.gif) no-repeat 10px 6px; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius:5px; -webkit-border-radius:5px; }
ul.error_messages { margin: 0 0 0 15px; padding: 0; }
ul.error_messages li { height: 22px; line-height: 22px; color:#333; }
.loader { padding: 0 10px; }
#contact #success_page h1 { background: url(../includes/assets/success.gif) left no-repeat; padding-left:22px; }
acronym {}

/* Contact Sidebar Details */
#contact-sidebar h3 {font-size:22px;padding:25px 0 0 0;margin-bottom:20px;color:#000;}
#contact-sidebar h5 {padding:10px 0 0 0;color:#000;}
#success_page h3 {padding:10px 10px;background:#E8E8E8;color:#4D778F;}
#success_page p {margin:20px 0 0;}

You can see the site here: http://bit.ly/PMVCks

Thanks so much! I greatly appreciate any help!

Old Pedant
07-11-2012, 10:59 PM
WOW! You have to wonder what in the world was the point of adding in that jQuery crap if it didn't even do form validation!

The form validation in the PHP code is a good idea, as it means that if somebody has JavaScript disabled then the PHP will still catch the form input errors.

But you really need some JavaScript validation, and there simply isn't any there.

And how come the navigation stuff doesn't work??? Clicking on Services shows a list of services, but then choosing one of them goes nowhere. And clicking on Contact Us goes nowhere.

And there are tons and tons of scripts on that page that, so far as I can tell, do absolutely NOTHING! Slider and quote rotator and image effects and and and...and you are using NONE of them!

Man, I sure hope you didn't pay much for that theme!

Anyway, it would be easy enough to add JS validation to the page, but if I were doing it I would first start by removing all the JS scripts on there and then only adding them back in one by one if I discovered I needed one of them.

07-11-2012, 11:10 PM
Thank you. I may not have explained myself fully. The reason the navigation links go nowhere is because I'm still building the site. I'm working on the contact form first right now. One thing at a time! :)

The instructions for the theme do indeed tell me to remove the script calls for whichever ones I am not using and that will be done, but again, right now I'm just trying to get the contact form to validate properly.

So, are you saying that there is no JS validation? I thought that's what the javascript I mentioned above does, no?

Thanks again...your time is greatly appreciated.