Contact Form Required Fields WordPress

Below is my contact form code. I would like to make certain feilds (Name, email, message) required. If a field is not filled in, I would like to apply a CSS class (.error) to the field and change the onblur text to "Required". The fields must be sent in for the form to be sent.

I need a code which achieves this and is XHTML 1.0 strict valid.

<form id="ff" method="post" action="<?php bloginfo('url'); ?>/wp-content/themes/Mag/scripts/insert.php">
<div>
<input type="text" onfocus="clearDefault(this)" onblur="if(this.value=='')this.value='Your name';" value="Your name" name="name" id="name" />
</div>
<div>
<input type="text" onfocus="clearDefault(this)" onblur="if(this.value=='')this.value='Phone number';" value="Phone number" name="phone" id="phone" />
</div>
<div>
<input type="text" onfocus="clearDefault(this)" onblur="if(this.value=='')this.value='Email';" value="Email" name="email" id="email" />
</div>
<div>
<textarea rows="3" cols="1" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="message" id="message">Message</textarea>
</div>
<div class="hidden"><input type="text" name="this_title" value="" /></div>
<div><input class="sendButton" type="submit" name="Submit" value="Send" /></div>
</form>


<?php
$this_form_spam = $_POST['this_title'];

if ($this_form_spam == "")
{
// Get values from form
$name=$_POST['name'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$message=$_POST['message'];

$to = "[email protected]";
$subject = "Potential Client Lead";
$message = " Name: " . $name . "\r\n Phone: " . $phone . "\r\n Email: " . $email . "\r\n Message: " . $message;


$from = "FirmFlip";
$headers = "From:" . $email . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n";
if(@mail($to,$subject,$message,$headers))
{
print "<script>document.location.href='/thanks/';</script>";

}else{
echo "Error! Please try again.";
}
}
else
{
// mock and laugh in the face of spam
}
?>

Answers (4)

2014-01-11

Sai kumar answers:

---

siouxfan45 comments:

This did not address my question. If a field is not filled in, I would like to apply a CSS class (.error) to the field and change the onblur text to "Required". Please read the question and try again.

---

Sai kumar comments:

Hi,

You can use jquery form validation for this. Is it ok for you?

Thanks

2014-01-11

Balanean Corneliu answers:

Why you dont use Contact Form 7 can simplify your work ;)

---

siouxfan45 comments:

Because I have a specific purpose for this contact form.

2014-01-11

Ryan S answers:

We can also use jQuery to check field e.g.


jQuery(document).ready(function($){
var ff = $('#ff'),
name = $('#name').val(),
phone = $('#phone').val(),
email = $('#email').val();

if( name == "" )
name.attr('class', 'error');

if( phone == "" )
phone.attr('class', 'error');

if( email == "" )
email.attr('class', 'error');
});



Hope that helps

2014-01-12

Bob answers:

Here is new html form code for you.

Notice this.className =' error' in blur It will add class to element.
and also notice this.value='Your name is Required'; you can change text to "Required" if you wish.

<form id="ff" method="post" action="<?php bloginfo('url'); ?>/wp-content/themes/Mag/scripts/insert.php">

<div>

<input type="text" onfocus="clearDefault(this)" onblur="if(this.value==''){this.value='Your name is Required'; this.className =' error' };" value="Your name" name="name" id="name" />

</div>

<div>

<input type="text" onfocus="clearDefault(this)" onblur="if(this.value==''){this.value='Phone number is Required'; this.className =' error' };" value="Phone number" name="phone" id="phone" />

</div>

<div>

<input type="text" onfocus="clearDefault(this)" onblur="if(this.value==''){this.value='Email is Required'; this.className =' error' };" value="Email" name="email" id="email" />

</div>

<div>

<textarea rows="3" cols="1" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="message" id="message">Message</textarea>

</div>

<div class="hidden"><input type="text" name="this_title" value="" /></div>

<div><input class="sendButton" type="submit" name="Submit" value="Send" /></div>

</form>

---

siouxfan45 comments:

For some reason, I am still able to send the form.

---

siouxfan45 comments:

@Bhavesh - would you happen to know why this still allows me to send the form?