I have this form I've been playing around with in Wordpress.
It works, but here is the problem...
When the page loads, the contact form is blank (obviously)
If info is not put in text fields, form will not send (obviously)
If info IS put in text fields it will send, "Submit" button will disable and the text on the "Submit" button will change from "Submit Message" to "Submitting, please wait..."
When message has finished sending, a "success message" will pop up over the form for 2.5 seconds, the input fields will be cleared back to a blank form, "Submit" button text reverts back to original "Submit Message" text.
Now, WITHOUT refreshing the page, I want to send a NEW message using the blank form.
I fill in all fields, hit send, and I get an error message saying "Invalid email. You must enter at least one email address." - (the source of this message, I have no idea... I didn't make it, and I have searched high and low through Wordpress files and cannot find where it is coming from)
This error message is referring to the "mail to" email address, which the code pulls from the Wordpress Admin settings.
For some reason, after the form is submitted the first time, it "uses" that mail-to address, and will not allow it to be used again unless the page is reset.
Is there a solution here so that I can send a message... form will automatically clear... I can send a new message, form will automatically clear... I can send a new message... and so on, WITHOUT having to refresh the page after each message submission.
Here is the code:
<?php /* Template Name: Contact Form */ ?>
<?php get_header(); ?>
<div id="top-div"></div>
<div id="container">
<div id="inner-headline">
<h2>
<?php
$headline = get_post_meta($post->ID, "_headline", $single = false);
if(!empty($headline[0]) )
{
echo $headline[0];
}
else
{
the_title();
}
?>
</h2>
</div>
<div id="content">
<div id="content-inner">
<div class="sideright-left-col">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)): ?>
<p class="error"><?php _e('There was an error submitting the form.',
'Sona')?><p>
<?php endif ?>
<div id="status"></div>
<form action=() id="contact-form" method="post">
<div class="name">
<label for="contactName"><span style="color: red;">* </span>
<?php _e( 'Name', 'Sona' ); ?>:
</label>
<input type="text" name="contactName" id="contactName"
value="<?php if(isset($_POST['contactName'])) echo
$_POST['contactName'];?>" class="requiredField txt"/>
<?php if(isset($nameError) && $nameError != ''): ?><span
class="error"><?php echo $nameError;?></span><?php endif;?>
<div class="clear"></div>
</div>
<div class="email">
<label for="email"><span style="color: red;">* </span>
<?php _e( 'E-mail', 'Sona' ); ?>:
</label>
<input type="text" name="email" id="email"
value="<?php if(isset($_POST['email'])) echo
$_POST['email'];?>" class="requiredField email txt" />
<?php if(isset($emailError) && $emailError != ''): ?><span
class="error"><?php echo $emailError;?></span><?php endif;?>
<div class="clear"></div>
</div>
<div class="subject">
<label for="subject"><span style="color: red;">* </span>
<?php _e( 'Subject', 'Sona' ); ?>:</label>
<input type="text" name="subject" id="subject"
value="<?php if(isset($_POST['subject'])) echo
$_POST['subject'];?>" class="requiredField txt"/>
<?php if(isset($subjectError) && $subjectError != ''): ?><span
class="error"><?php echo $subjectError;?></span><?php endif;?>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="message">
<label for="message"><span style="color: red;">* </span>
<?php _e( 'Message', 'Sona' ); ?>:</label>
<textarea name="message" cols="100" rows="200" id="message"
class="txt requiredField"><?php echo isset($_POST['message']) &&
$_POST['message']!='' ? stripslashes($_POST['message']) : ''?>
</textarea>
<?php if(isset($messageError) && $messageError != '') { ?><span
class="error"><?php echo $messageError;?></span> <?php } ?>
<div class="clear"></div>
</div>
<div>
<?php
$al_options = get_option('al_general_settings');
$options = array(
$al_options['al_contact_error_message'],
$al_options['al_contact_success_message'],
$al_options['al_subject'],
$al_options['al_email_address'],
);
?>
<input type="hidden" name = "options" value="
<?php echo implode(',', $options) ?>" />
<br />
<input type="submit" class="button white-back"
value="Submit Message" tabindex="5" id="submit" name="send"/>
<div class="clear"></div>
</div>
</form>
</div>
<div class="sideright-right-col">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Contact
Sidebar") ) : ?> <?php endif;?>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
<?php endwhile; ?>
<?php endif; ?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#contact-form").validate({
submitHandler: function() {
var postvalues = jQuery("#contact-form").serialize();
jQuery('#submit').attr('disabled',"disabled");
jQuery('#submit').attr('value', "Submitting, please wait...");
jQuery.ajax
({
type: "POST",
url: "<?php echo get_template_directory_uri() ?>/contact-form.php",
data: postvalues,
success: function(response)
{
jQuery('#status').addClass('success-
message').html(response).show().delay(2500).fadeOut();
jQuery('input:not(#submit)').val("");
jQuery('textarea').val("");
jQuery('#submit').attr('value', "Submit Message");
jQuery('#submit').removeAttr('disabled');
}
});
return false;
},
focusInvalid: true,
focusCleanup: false,
rules:
{
contactName: {required: true},
email: {required: true, minlength: 6,maxlength: 50, email:true},
message: {required: true},
subject: {required: true}
},
messages:
{
contactName: {required: "<?php _e( 'This field is required', 'Sona' ); ?>"},
email: {required: "<?php _e( 'This field is required', 'Sona' ); ?>",
email: "<?php _e( 'Please provide a valid e-mail address.', 'Sona' ); ?>"},
message: {required: "<?php _e( 'This field is required', 'Sona' ); ?>"},
subject: {required: "<?php _e( 'This field is required', 'Sona' ); ?>"}
},
errorPlacement: function(error, element)
{
error.insertAfter(element);
},
invalidHandler: function()
{
jQuery("body").animate({ scrollTop: 0 }, "slow");
}
});
});
</script>
<?php get_footer(); ?>
