All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

Contact Form Required Field?

  • # September 1, 2009 at 2:08 pm

    I’m using the Nice & Simple Contact form and it works perfectly but I need some help with something else.

    How do I make an entry field required to be filled out before submission? You know, where the user gets an error message saying, "Please fill out your name & email."

    The PHP is exactly what Chris gave us other than edits to the To and From emails. If anyone could help, I’d greatly appreciate it!! I’m only familiar with editing PHP and not creating it.

    # September 1, 2009 at 4:29 pm

    I would do – personally and if statement.

    Code:
    if($requiredfield) {

    //it is true – form submitted

    } else {

    //it is false form re-displayed with a message at the top like “fill it in properly” :)

    }

    If you know PHP a little, that will make sense, if not then you might need to give us some code lol

    # September 1, 2009 at 4:48 pm

    Thanks Rob!

    Well, I guess I don’t know as much as I thought I did because I’m a little confused.

    Here’s my PHP

    Code:
    < ?php $EmailFrom = "TESTING"; $EmailTo = "sarah@ontheedgedesign.com"; $Subject = "Mine Shaft Contact Form"; $Name = Trim(stripslashes($_POST['Name'])); $Email = Trim(stripslashes($_POST['Email'])); $Message = Trim(stripslashes($_POST['Message'])); // validation $validationOK=true; if (!$validationOK) { print "“;
    exit;
    }

    // prepare email body text
    $Body = “”;
    $Body .= “Name: “;
    $Body .= $Name;
    $Body .= “n”;
    $Body .= “Email: “;
    $Body .= $Email;
    $Body .= “n”;
    $Body .= “Message: “;
    $Body .= $Message;
    $Body .= “n”;

    // send email
    $success = mail($EmailTo, $Subject, $Body, “From: < $EmailFrom>“);

    // redirect to success page
    if ($success){
    print ““;
    }
    else{
    print ““;
    }

    ?>

    And here is the form in my HTML

    Code:

    We would love to hear your thoughts or comments.
    Please feel free to send a message below.








    # September 2, 2009 at 5:12 am

    This reply has been reported for inappropriate content.

    I have a javascript file at the top of my contact page that colour codes the bits that need filled in before posting.

    if you would like to see this let me know:

    some prefer some other ways to do it, I did not want anything intrusive for the person filling in the form……

    # September 2, 2009 at 12:08 pm

    Yeah I’d love to see it. I don’t really care how it’s done as long as it works.

    # September 2, 2009 at 3:33 pm

    This reply has been reported for inappropriate content.

    "slacey" wrote:
    Yeah I’d love to see it. I don’t really care how it’s done as long as it works.

    ok this is the javascript in the head tag:

    Code:
    <!– Hide Script
    function onloadfocus()
    {
    document.myform.name.focus();
    }

    function resetWhite(theForm)
    {
    theForm.name.style.background = 'white';
    theForm.email.style.background = 'white';
    theForm.tel.style.background = 'white';
    theForm.message.style.background = 'white';
    theForm.captchaHTML.style.background = 'white';
    theForm.name.focus();
    }

    function validateFormOnSubmit(theForm) {
    var reason = "";

    reason += validateName(theForm.name);
    reason += validateEmail(theForm.email);
    //reason += validatePhone(theForm.tel);
    reason += validateEmpty(theForm.message);
    reason += validateCaptchaHTML(theForm.captchaHTML);

    if (reason != "") {
    //alert("Some fields need correction:nnn" + reason);
    return false;
    }

    //alert("All fields are filled correctly");
    return true;
    }
    function validateEmpty(fld) {
    var error = "";

    if (fld.value.length == 0) {
    fld.style.background = '#f1f453';
    error = "The required message field has not been filled in.nnn"
    } else {
    fld.style.background = 'White';
    }
    return error;
    }
    function validateName(fld) {
    var error = "";
    var illegalChars = /W /; // allow letters, numbers, and underscores

    if (fld.value == "") {
    fld.style.background = '#f1f453';
    error = "Please enter your full name.nn";
    } else if (fld.value.length < 3) {
    fld.style.background = '#f1f453';
    error = "Your name should be in full and over 5 characters in length.nn";
    } else if (illegalChars.test(fld.value)) {
    fld.style.background = '#f1f453';
    error = "The name contains illegal characters.nn";
    } else {
    fld.style.background = 'White';
    }
    return error;
    }

    function trim(s)
    {
    return s.replace(/^s+|s+$/, '');
    }
    function validateEmail(fld) {
    var error="";
    var tfld = trim(fld.value); // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+.[^@]*ww$/ ;
    var illegalChars= /[(),;:\”[]]/ ;

    if (fld.value == “”) {
    fld.style.background = ‘#f1f453’;
    error = “Please enter a valid email address.nn”;
    } else if (!emailFilter.test(tfld)) { //test email for illegal characters
    fld.style.background = ‘#f1f453’;
    error = “Please enter a valid email address.nn”;
    } else if (fld.value.match(illegalChars)) {
    fld.style.background = ‘#f1f453’;
    error = “The email address contains illegal characters.nn”;
    } else {
    fld.style.background = ‘White’;
    }
    return error;
    }
    function validatePhone(fld) {
    var error = “”;
    var stripped = fld.value.replace(/[().- ]/g, ”);

    if (fld.value == “”) {
    error = “Please enter your phone number including area code and omit spaces.nn”;
    fld.style.background = ‘#f1f453’;
    } else if (isNaN(parseInt(stripped))) {
    error = “The phone number contains illegal characters.nn”;
    fld.style.background = ‘#f1f453’;
    } else if (!(stripped.length == 11)) {
    error = “Make sure you included an area code and omit spaces. nThe phone number should be 11 numbers in length.nn”;
    fld.style.background = ‘#f1f453’;
    }
    else {
    fld.style.background = ‘White’;
    }
    return error;
    }
    function validateCaptchaHTML(fld) {
    var error = “”;
    var stripped = fld.value.replace(/[().- ]/g, ”);

    if (fld.value == “”) {
    error = “Please enter the result of the sum.nn”;
    fld.style.background = ‘#f1f453’;
    } else if (isNaN(parseInt(stripped))) {
    error = “The number is wrong.nn”;
    fld.style.background = ‘#f1f453’;
    } else if (!(stripped.length == 2)) {
    error = “The number is wrong.nn”;
    fld.style.background = ‘#f1f453’;
    }
    else {
    fld.style.background = ‘White’;
    }
    return error;
    }
    //End Hide Script–>

    here is my form:

    Code:
    Contact Form








    Validation, to help prevent spam:


         
       

    now it will work as is, but your form may not look like this, however you can change it, it is quite easy to understand…..

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed