html form with required fields

Question

I have a form that is currently working but want to add php code to the "post" file so some fields in the html form are required otherwise a message displays.

heres my html code at the moment.

<form action="contact.php" method="post">
      <input type="text" class="main" name="cf_name" value="Name (Required)" size="31" />
      <br />
      <br />
      <input type="text" class="main" name="cf_company" value="Company" size="31" />
      <br />
      <br />
      <input type="text" class="main" name="cf_phone" value="Phone (Required)" size="31" />
      <br />
      <br />
      <input type="text" class="main" name="cf_email" value="Email (Required)" size="31" />
      <br />
      <br />
    <textarea type="text" name="cf_text0" cols="34" rows="3" class="main">Message</textarea>
      <br />
      <input type="image" src="images/send.jpg" height="16" width="41" border="0"
      alt="Submit Form" />
</form>

and heres my php code

<?php
$field_name = $_POST['cf_name'];
$field_company = $_POST['cf_company'];
$field_phone = $_POST['cf_phone'];
$field_email = $_POST['cf_email'];
$field_message = array($_POST["cf_text0"],);

$mail_to = 'callum@colmandesigns.co.nz';
$subject = 'A & J Print - Contact Form '.$field_name;

$field_message="From: {$field_name}
Company: {$field_company}
Phone: {$field_phone}
Email: {$field_email}
Message: {$field_message[0]}";


$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $field_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        alert('Thank you for the message. We will contact you shortly.');
        window.location = 'index.html';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        alert('Message failed. Please, send an email to craig@colmandesigns.co.nz');
        window.location = 'index.html';
    </script>
<?php
}
?>

I want to have the Name, Phone and Email fields required.

Thanks, Callum

Answer 1

In HTML you can just put "required" attribute for making input tag required ! For example

<input type="text" id="someId" name="IP" placeholder="IP" required tabindex="1">

or

<input type="text" id="someId" name="IP" placeholder="IP" required="true" tabindex="1">

But consider that, IE and Safari have not supported this tag until now!

Answer 2

//contact.php

<?php
    $filled = true;
    $required = array("cf_name", "cf_email", "cf_phone"); //all the required fields

    //Cycle through each field and make sure its filled

    foreach ($required as &$value) {

        if($_POST[$value]==""){
            $filled = false;
        }
    }

    //If there are any fields not filled out, send the user back to the form
    if (!$filled){
        header("Location: http://ajprint.co.nz/index.php?error=true"); 
    }

    else{
        $field_name = $_POST['cf_name'];
        $field_company = $_POST['cf_company'];
        $field_phone = $_POST['cf_phone'];
        $field_email = $_POST['cf_email'];
        $field_message = array($_POST["cf_text0"],);

        $mail_to = ''; //put your email
        $subject = 'A & J Print - Contact Form '.$field_name;

        $field_message="From: {$field_name}
        Company: {$field_company}
        Phone: {$field_phone}
        Email: {$field_email}
        Message: {$field_message[0]}";

        $headers = 'From: '.$field_email."\r\n";
        $headers .= 'Reply-To: '.$field_email."\r\n";

        $mail_status = mail($mail_to, $subject, $field_message, $headers);

        if ($mail_status) { 
            echo "
                <script language=\"javascript\" type=\"text/javascript\">
                    alert('Thank you for the message. We will contact you shortly.');
                    window.location = 'index.html';
                </script>";    
        }

        else {
            echo "
                <script language=\"javascript\" type=\"text/javascript\">
                    alert('Message failed. Please, send an email to craig@colmandesigns.co.nz');
                    window.location = 'index.html';
                </script>";
        }
    }

?>

//index.php

<form action="handler.php" method="post">
    <input type="text" class="main" name="cf_name" placeholder="Name (Required)" size="31" />
        <br />
        <br />
    <input type="text" class="main" name="cf_company" placeholder="Company" size="31" />
        <br />
        <br />
    <input type="text" class="main" name="cf_phone" placeholder="Phone (Required)" size="31" />
        <br />
        <br />
    <input type="text" class="main" name="cf_email" placeholder="Email (Required)" size="31" />
        <br />
        <br />
    <textarea type="text" name="cf_text0" cols="34" rows="3" class="main">Message</textarea>
        <br />
    <input type="image" src="images/send.jpg" height="16" width="41" border="0" alt="Submit Form" />
</form>

I replaced all the "value" tags with "placeholder" so that even if the user did not clear the field, it would not get marked as filled

Answer 3

Using PHP:

//Form Processor Code

$filled = true;
$required = array("cf_name", "cf_email", "cf_phone"); //all the required fields

//Cycle through each field and make sure its filled
foreach ($required as &$value) {
    if(!isset($_POST[$value])){$filled=false;}
}

//If there are any fields not filled out, send the user back to the form
if (!$filled){
    header("Location: http://mysite.com/form.php?error=true");
}

//Form Code

//Notify the user that the form needs to be filled completely
if(isset($_GET['error'])){
    echo "Sorry, but the form was not properly filled out.";
}

The problem with this is that you'll need to store the form values in the session before going back, otherwise the user will have to re-enter the entire form. It's better for the user if you use Javascript, but watch out for browsers with JS disabled.

Using Javascript:

Either use

onBlur

when the user has finished typing in a field or use

onClick

when the user tries to submit the form.

A good tutorial on this can be found here.