Bulletproof Your Online Forms for Mobile Devices with PHP – Part 1

The more popular mobile devices get, the more reason there is to be cautious and deliberate when creating your website. While there are a bevy of issues in dealing with creating mobile-friendly sites, the one I’d like to focus on here is building out an HTML form. More specifically, since some mobile devices don’t have JavaScript enabled (either by default or by choosing, either way done to increase speed on your device), it’s not necessarily good to rely on JavaScript validation for your forms. And, since most current mobile devices aren’t Flash-friendly either (thank you Steve Jobs), the best method in creating a form is using HTML, styled with CSS, and using PHP for validation and processing.

With that said, here’s part 1 of how to build a bulletproof form using only HTML, PHP and CSS.

Step 1: Plan Your Form

This first step is important when building out a form.  Rather than just jumping in and starting to throw together a form, it’s helpful (and a big time-saver) to plan out what fields your form will have, and what types of fields they will be.  I find it helpful to either jot this info down on a piece of paper, or write it in pseudo-code inside of a comment block in my working file.  Either way, plan your form fields first.  It will make life much easier as you build out the form, and eventually its validation and processing.

For this tutorial, we’ll build out a form with three fields: Name, Email, and Message.  The form will also have a Submit and Reset button for form processing and resetting.

Step 2: Create PHP Variables for Each Form Field Value

Now that we have the form architecture figured out, we need to assign a PHP variable to each form field.  In our example, this means we’ll need 3 variables.  So at the very top of our file, inside of the PHP wrapper tags (<?php ?>), create a variable for each.  In our example, it will look like this:

<?php
$user_name = “”;
$user_email = “”;
$user_message = “”;
?>

Note: This step could be swapped with step #3 below, but for the sake of brevity in this tutorial, I’m putting it here so we can plug these variable values directly in the form fields when we build out the form in step #3.

Step 3: Build Out the Form

This step is simple, as we just need to put together the pure HTML code for our form.  Our form will have two input fields and one textarea (for the message).  While assembling the code, I’m going to insert some extra <div> and <span> tags that are inserted to break up the form into containers in the absence of CSS.  This is done as a precaution for mobile devices that are not set up to enable CSS.  Many times the default is okay, but I’ve noticed that here and there, you need to hammer it down a little bit.

Another important thing that we’ll do here is to set the value of each form field to its accompanying PHP variable.  This is a setup step that will ensure that our form will “remember” its values, should any of the form fields fail in the validation process (still to come).  You know what I mean here – we’ve all been there – you fill out a long form, submit, and find out that the form is somehow invalid, and all of the form fields are blank again, forcing you to refill the entire thing all over again.  Frustrating, isn’t it?

This is actually much easier than you might think using PHP.  For the input fields, it’s a simple matter of echoing out the PHP variable inside of the ‘value’ attribute of the tag.  For the textarea, you’ll need to echo out the PHP variable between the opening and closing tags.  And don’t worry – since our PHP variables are set as empty strings by default, the fields will also be empty when the form initially loads.  But as the form and validation logic get built out, our PHP variables are set to match the form fields, and thus the form fields will be populated with the “remembered” value of the field (stored in the variables) rather than being blank.

In our example, our form looks a little something like this:

<form action=“” method=“post” name=“contact_form” id=“contact_form”>
  <div>
    <label for=“user_name”>Your Name:</label>
      <span class=“hidden”><br /></span>
    <input type=“text” name=“user_name” value=“<?php echo $user_name; ?>“ autocomplete=“off” tabindex=“1″ />
  </div>
  <div>
    <label for=“user_email”>Your Email:</label>
      <span class=“hidden”><br /></span>
    <input type=“text” name=“user_email” value=“<?php echo $user_email; ?>“ autocomplete=“off” tabindex=“2″ />
  </div>
  <div>
    <label for=“user_message”>Message:</label>
      <span class=“hidden”><br /></span>
    <textarea name=“user_message” autocomplete=“off” wrap=“physical” tabindex=“3″><?php echo $user_message; ?></textarea>
  </div>
  <div class=“centered”>
    <input type=“submit” name=“submit” value=“Submit »” />
    <input type=“submit” name=“reset” value=“Reset Form” />
  </div>
</form>

A few important notes about the form setup:

  • We didn’t include any value in the action attribute for the form tag.  This is because we’re going to house all of the form logic within the same file to reduce page-to-page navigation, and the amount of external files we need to concern ourselves with.  There are different schools of thought about this, but this is the method we’ll use for this tutorial.
  • As discussed above, PHP markup has been inserted into the form fields as their values.
  • Each form field tag has a unique name.  This will be necessary when we start to set/reset variables and validate the form later on down the road.
  • Each form field is set up here with the autocomplete attribute set to “off”. This is just more of a security precaution that I like on contact forms, that makes it so the browser doesn’t remember previous values you’ve typed in other forms, in the case that you’re using a public computer that doesn’t delete private browsing history.  (Note: This doesn’t have anything to do with the method we’re using to echo out our PHP variables into the form, as our PHP variable method will simply keep our values in the form upon unsuccessful form submission, whereas the autocomplete attribute would have a dropdown of “remembered” values of past forms when the user starts typing.)
  • Overall, I’ve included a number of ids and classes in the form that will be later used to style it with CSS for browsers and mobile devices that have CSS enabled.

What’s Next

We now have the framework for our form, and have set up some of the initial PHP logic to help us populate and store form values.  In the next segment, we’ll work on adding in the variable setting/resetting functionality, as well as the validation functions.  Also, and most importantly, we’ll tie in the Submit and Reset buttons with the correct functionality to make the form do what it’s supposed to do.

Until the next part of this tutorial, happy coding!

There are no comments yet, add one below.

Leave a Comment