Posts Tagged with form submit

Displaying 1-2 of 2 results.
Resolved: Submit form on change of dropdown list
posted by admin on April 26, 2016
I have SELECT dropdown list

<form method="GET" >
<select id="id_period" name="period">
<option value="day">day</option>
<option value="week">week</option>
<option value="month">month</option>
<option value="all" selected="selected">all time</option>
</select>
</form>

I want to submit form on changeRead more
Wiki: Wordpress Contact form without plugin. Контактная форма вордпресс без плагинаwiki
posted by admin on March 22, 2016
Creating the WordPress Page Template

<?php
/*
Template Name: Contact Form
*/
?>


<?php
//If the form is submitted
if(isset($_POST['submitted'])) {

//Check to see if the honeypot captcha field was filled in
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {

//Check to make sure that the name field is not empty
if(trim($_POST['contactName']) === '') {
$nameError = 'You forgot to enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) === '') {
$emailError = 'You forgot to enter your email address.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['comments']) === '') {
$commentError = 'You forgot to enter your comments.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

//If there is no error, send the email
if(!isset($hasError)) {

$emailTo = 'me@somedomain.com';
$subject = 'Contact Form Submission from '.$name;
$sendCopy = trim($_POST['sendCopy']);
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

mail($emailTo, $subject, $body, $headers);

if($sendCopy == true) {
$subject = 'You emailed Your Name';
$headers = 'From: Your Name <noreply@somedomain.com>';
mail($email, $subject, $body, $headers);
}

$emailSent = true;

}
}
} ?>


<?php get_header(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/contact-form.js"></script>



<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">
<h1>Thanks, <?=$name;?></h1>
<p>Your email was successfully sent. I will be in touch soon.</p>
</div>

<?php } else { ?>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">There was an error submitting the form.<p>
<?php } ?>

<form action="<?php the_permalink(); ?>" id="contactForm" method="post">

<ol class="forms">
<li><label for="contactName">Name</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</li>

<li><label for="email">Email</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</li>

<li class="textarea"><label for="commentsText">Comments</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</li>
<li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></li>
<li class="screenReader"><label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></li>
<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Email me »</button></li>
</ol>
</form>

<?php endwhile; ?>
<?php endif; ?>
<?php } ?>

<?php get_footer(); ?>


Styling the Form

.screenReader { left: -9999px; position: absolute; top: -9999px; }
.thanks { background: #F2F3F6; border: 1px solid #7E8AA2; padding:10px; }

/*****Forms*****/
ol.forms { float: left; list-style: none; margin: 0; width: 100%; }
ol.forms li {
clear: both;
float: left;
margin-bottom: 18px;
position: relative;
width: 100%;
}
ol.forms label {
cursor: pointer;
display: block;
float: left;
font-weight: bold;
padding-right: 20px;
width: 100px;
}
ol.forms input, ol.forms textarea {
border: 1px solid #7E8AA2;
border-radius: 3px;
font: inherit;
-moz-border-radius: 3px;
padding: 2px;
-webkit-border-radius: 3px;
width: 214px;
}
ol.forms textarea { height: 300px; width: 334px; }
ol.forms input:focus, ol.forms textarea:focus { background-color: #f2f3f6; border-color: #ff9800; }
.error { color: #f00; }
ol.forms li .error { font-size: 12px; margin-left: 20px; }
ol.forms li.textarea .error {
display: block;
position: absolute;
right: 0;
top: 0;
width: 100px;
}
ol.forms li.screenReader { margin-bottom: 0; }
ol.forms li.buttons button {
background: #ff9800;
border: none;
color: #000;
cursor: pointer;
font: 16px/16px "Avenir LT Std", Helvetica, Arial, sans-serif;
overflow: hidden;
padding: 6px 3px 3px 3px;
text-transform: uppercase;
width: auto;
}
ol.forms li.buttons button:hover { color: #222; }
ol.forms li.buttons button:active { left: -1px; position: relative; top: -1px; }
ol.forms li.buttons, ol.forms li.inline { float: right; width: 460px; }
ol.forms li.inline input { width: auto; }
ol.forms li.inline label { display: inline; float: none; width: auto; }


Enhancing the form with some jQuery

$(document).ready(function() {
$('form#contactForm').submit(function() {
$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter your '+labelText+'.</span>');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
hasError = true;
}
}
});
if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('form#contactForm').slideUp("fast", function() {
$(this).before('<p class="thanks"><strong>Thanks!</strong> Your email was successfully sent. I check my email all the time, so I should be in touch soon.</p>');
});
});
}

return false;

});
});


Don't forget
*enqueue(include) file

jquery.min.js

Edit row, edit loading.gif directory to your's, or if your image in your theme directory, you can replace to get_template_directory_uri()


$(this).parent().append('<img src="/wp-content/themes/td-v3/images/template/loading.gif" alt="Loading…" height="31" width="31" />');
Read more