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.
html:
Code:
<div id="message"></div>
<form method="post" action="includes/contact_form.php" name="contactform" id="contactform">
<fieldset>
<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>
</select>
<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>
</select>
<br/>
<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> <img src="includes/image.php" ></label>
<input name="verify" type="text" id="verify" size="6" value="" style="width: 50px;" /><br /><br />
</div>
<div class="grid_4 omega alpha">
<input type="submit" class="submit" id="submit" value="Submit" />
</div>
</fieldset>
</form>
</div><!-- end #contact .grid_7 .alpha -->
The php:
Code:
<?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 . ".";
twittermessage($twitter_user,$twitter_pass,$twitter_msg);
}
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_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
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
:
Code:
jQuery(document).ready(function(){
$('#contactform').submit(function(){
var action = $(this).attr('action');
$('#contactform #submit').attr('disabled','disabled').after('<img src="assets/ajax-loader.gif" class="loader" />');
$("#message").slideUp(750,function() {
$('#message').hide();
$.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()
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#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:
Code:
/*------------------------------------------------*/
/* 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!
Before you post, read our: 
