Menu icon Foundation
Foundation Form Error Classes PHP?

Hi guys,
I just started using Foundation not long ago (well, actually I really just started learning web design in general not long ago). So I got my PHP contact form working. However, I want to implement error states for the form just like Foundation has on this Docs page: http://foundation.zurb.com/docs/components/forms.html (scroll down a bit).

After trying for hours, I cannot get it to display it correctly. When I add the error class to my HTML, it shows a red box there by default. I just want it to show up, obviously, when there is an actual error in the field (like if the user left a field blank or forgot something.) It's okay if the error shows up on top of the form or as a popup as well.

I know there there must be some way to tell the script to only show the red alert boxes/red text when there is only an error. I have been searching for hours and changing things on my php form to no avail. I got the form to stop working altogether when I attempt to add those error states in php. I would prefer to do this strictly in the send_email.php file linked to in my "action=" instead of having to put PHP in the html page.

It is for an assignment, so I have to get the html page validated and PHP introduces errors in the HTML validator. If possible, I want to keep the extension .html and not .php as well.

Code for HTML form and send_email.php is included below (please note that my personal email has been blocked out in the php), thank you in advance for any help I can get!

<form method="post" id="form" action="send_email.php">
<input type="hidden" name="subject" value="Submission" /> <input type="hidden" name="redirect" value="thankyou.html" />
<fieldset> <legend>Personal Information</legend> 
<div class="row">
<div class="small-12 large-12 columns">
<p class="text left"><small>* Required Fields</small></p>
    </div>
    </div>
<div class="row">
<div class="small-12 large-6 columns">
<label>First Name*<input name="f_name" type="text" placeholder="Jane"/></label>
</div><!--end of first name-->
<div class="small-12 large-6 columns">
<label>Last Name* <input name="l_name" type="text" placeholder="Doe"/></label> 
</div><!--end of last name-->
</div><!--end of name row-->
<div class="row">
<div class="small-12 large-12 columns">
<label>Phone Number <input name="phone" type="tel" placeholder="xxx-xxx-xxxx"/></label>
</div>
</div><!--end of phone--> 
<div class="row">
<div class="small-12 large-12 columns">
<label>Email* <input name="email" type="email" placeholder="[email protected]"/></label>
</div>
</div><!--end of email--> 
<div class="row collapse">
<label>Website</label>
    <div class="small-3 large-2 columns">
<span class="prefix">http://</span>
</div>
<div class="small-9 large-10 columns">
<input name="website" type="text" placeholder="URL..."/> 
</div>
</div><!--end of website-->
</fieldset> 
<fieldset> <legend>Inquiry Details</legend> 
<div class="row">
<div class="small-12 large-12 columns">
<label>How may I assist you?
        <select name="message_type"><option value="" selected="selected">Select One</option>
          <option value="Custom Design Quote">Custom Design Quote</option>
          <option value="General Questions">General Questions</option>
          <option value="Order Status">Order Status</option>
          <option value="Compliments">Compliments</option>
        </select>
        </div>
      </div><!--end of req.type-->
      <div class="row">
<div class="small-12 large-12 columns">
        <label>Comment
        <textarea name="message" placeholder="Enter comment here..."></textarea>
      </label>
      </div>
      </div><!--end of textarea-->
      <div class="row"> 
 <div class="small-12 large-12 columns ">
       <input id="checkbox1" name="yes" type="checkbox"><label for="checkbox1">Sign Up for News/Offers!</label>
      </div>
      </div>
      <div class="row"> 
            <div class="small-6 large-6 columns text-center">
      <input name="reset_button" type="reset" class="button [tiny]">
 </div>
      <div class="small-6 large-6 columns">
      <input name="submit" type="submit" class="button expand">
 </div>
      </div><!--end of sign up-->
</fieldset> 
</form>
            

         

formerror statesPHPerror classerror handlinghtmlemail

Hi guys,
I just started using Foundation not long ago (well, actually I really just started learning web design in general not long ago). So I got my PHP contact form working. However, I want to implement error states for the form just like Foundation has on this Docs page: http://foundation.zurb.com/docs/components/forms.html (scroll down a bit).

After trying for hours, I cannot get it to display it correctly. When I add the error class to my HTML, it shows a red box there by default. I just want it to show up, obviously, when there is an actual error in the field (like if the user left a field blank or forgot something.) It's okay if the error shows up on top of the form or as a popup as well.

I know there there must be some way to tell the script to only show the red alert boxes/red text when there is only an error. I have been searching for hours and changing things on my php form to no avail. I got the form to stop working altogether when I attempt to add those error states in php. I would prefer to do this strictly in the send_email.php file linked to in my "action=" instead of having to put PHP in the html page.

It is for an assignment, so I have to get the html page validated and PHP introduces errors in the HTML validator. If possible, I want to keep the extension .html and not .php as well.

Code for HTML form and send_email.php is included below (please note that my personal email has been blocked out in the php), thank you in advance for any help I can get!

<form method="post" id="form" action="send_email.php">
<input type="hidden" name="subject" value="Submission" /> <input type="hidden" name="redirect" value="thankyou.html" />
<fieldset> <legend>Personal Information</legend> 
<div class="row">
<div class="small-12 large-12 columns">
<p class="text left"><small>* Required Fields</small></p>
    </div>
    </div>
<div class="row">
<div class="small-12 large-6 columns">
<label>First Name*<input name="f_name" type="text" placeholder="Jane"/></label>
</div><!--end of first name-->
<div class="small-12 large-6 columns">
<label>Last Name* <input name="l_name" type="text" placeholder="Doe"/></label> 
</div><!--end of last name-->
</div><!--end of name row-->
<div class="row">
<div class="small-12 large-12 columns">
<label>Phone Number <input name="phone" type="tel" placeholder="xxx-xxx-xxxx"/></label>
</div>
</div><!--end of phone--> 
<div class="row">
<div class="small-12 large-12 columns">
<label>Email* <input name="email" type="email" placeholder="[email protected]"/></label>
</div>
</div><!--end of email--> 
<div class="row collapse">
<label>Website</label>
    <div class="small-3 large-2 columns">
<span class="prefix">http://</span>
</div>
<div class="small-9 large-10 columns">
<input name="website" type="text" placeholder="URL..."/> 
</div>
</div><!--end of website-->
</fieldset> 
<fieldset> <legend>Inquiry Details</legend> 
<div class="row">
<div class="small-12 large-12 columns">
<label>How may I assist you?
        <select name="message_type"><option value="" selected="selected">Select One</option>
          <option value="Custom Design Quote">Custom Design Quote</option>
          <option value="General Questions">General Questions</option>
          <option value="Order Status">Order Status</option>
          <option value="Compliments">Compliments</option>
        </select>
        </div>
      </div><!--end of req.type-->
      <div class="row">
<div class="small-12 large-12 columns">
        <label>Comment
        <textarea name="message" placeholder="Enter comment here..."></textarea>
      </label>
      </div>
      </div><!--end of textarea-->
      <div class="row"> 
 <div class="small-12 large-12 columns ">
       <input id="checkbox1" name="yes" type="checkbox"><label for="checkbox1">Sign Up for News/Offers!</label>
      </div>
      </div>
      <div class="row"> 
            <div class="small-6 large-6 columns text-center">
      <input name="reset_button" type="reset" class="button [tiny]">
 </div>
      <div class="small-6 large-6 columns">
      <input name="submit" type="submit" class="button expand">
 </div>
      </div><!--end of sign up-->
</fieldset> 
</form>
            

         
Jen PC over 5 years ago

PHP code is here (Foundation forum somehow would not allow me to post the entire thing):

<?php
$contact_fname = $_POST['f_name'];
$contact_lname = $_POST['l_name'];
$contact_tel = $_POST['phone'];
$contact_email = $_POST['email'];
$contact_website = $_POST['website'];
$message_type = $_POST['message_type'];
$contact_message = $_POST['message'];
$email_signup = $_POST['yes'];

if( $contact_fname == true )
{
$sender = $contact_email;
$receiver = "[email protected]";
$client_ip = $_SERVER['REMOTE_ADDR'];
$email_body = "First Name: $contact_fname \nLast Name: $contact_lname \nPhone: $contact_tel \nEmail: $sender \nWebsite: $contact_website \nSubject: $message_type \nMessage: $contact_message \nSign Up for Email: $email_signup \nIP: $client_ip ";

$extra = "From: $sender\r\n" . "Reply-To: $sender \r\n" . "X-Mailer: PHP/" . phpversion();

}

if(isset($_POST['message_type']) )
{
$_POST['message_type'];

}

if(isset($_POST['yes']))
{
$_POST['yes'];
}

if( mail( $receiver, "Website Visitor Contact - $subject", $email_body, $extra ) )
{
echo "Your Message Has Been Submitted! You will be redirected.";
}
else
{
echo "Sorry. Your Message Could Not Be Sent. Please try again later.";
}
echo "";

?>