Handling Online Payments Part 9 - HTML and CSS Enhancements

by All Star ‎05-17-2011 11:37 AM - edited ‎10-20-2011 09:57 AM (22,267 Views)

This is part nine of a multi-part series on handling online payments.


In Part 1 of this series we identified our goals (creating a payment form that was usable, accessible, and secure) and began by creating the form we will use to capture payment information. In Part 2 of this series we continued this process by exploring how we will handle the data submitted by that form. In Part 3 of this series we took the data received and sanitized in Part 2 and validated that it was in a format we required. In Part 4 of this series we took the errors we found in Part 3 and displayed them in a user-friendly format to minimize cart abandonment. In Part 5 of this series we processed the payment and handled the response returned to us whether it be approved, declined, or an error completing the transaction process.


In Part 6 of this series we changed our focus to improving upon our form to make it more user-friendly, secure, and easier to maintain. We accomplished this by preventing duplicate form submissions using the POST/REDIRECT/GET design pattern. In Part 7 of this series we prevented spambots and other malware from making automated form submissions by using a honeypot and form token. Part 8 of this series we used JavaScript to increase the usability of our web form making it even easier to use. We will build upon this by using some HTML and CSS to enhance the layout to make the form easier to use and more visually appealing.




The often ignored <fieldset> and <legend> tags allows us to group together related form fields. This naturally makes our form more usable by clearly delimiting which fields are related to each other and why. For example, we can group the credit card details form fields together using the code below.


    <legend>Payment Information</legend>
        <label for="credit_card"<?php if (array_key_exists('credit_card', $errors)) echo ' class="labelerror"'; ?>>Credit Card Number</label>
        <input type="text" name="credit_card" id="credit_card" autocomplete="off" maxlength="19" value="">
    <!-- remaining form fields go here -->


Web browsers typically display the contents of a <fieldset> within a 1px border and place the contents of the <legend> within the top border. These can be styled although support for this styling varies by web browser. So for the sake of simplicity we are going to focus only on spacing and the bolding our <legend> content. We first add a margin of 20px to the bottom of each fieldset so they are not placed so closely together on the web page. We then make the contents of the <legend> element bold so it is clearly noted by the user. We accomplish this with the following CSS code:


    margin-bottom: 20px;
    font-weight: bold;


More CSS


Now that we have our HTML finalized we can go ahead and style the rest of our form using CSS. First we will look at the CSS code we will be using and then we can break it down piece-by-piece.


    font-family: verdana, arial, helvetica, sans-serif;
    font-size: .8em;
    display: block;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
    width: 300px;
#cvv, #billing_zip, #shipping_zip
    width: 80px;


We start by giving the body element some font style information. By placing this information in the body element it is applied to all elements since all elements inherit from body. In our case every element will use the Verdana font at 80% of its normal font size. If Verdana isn't available on a user's computer Arial will be tried next, and so on.


If you go back to Part 1 of this series we used the <label> tag in the construction of our form to increase the usability of our form for mouse users. We can take advantage of this take to style our form without losing any of the usability we gained by using it in the first place. In our example we make the label bold and place it above the form field it is associated with. We also change the font to Arial to make it stand out from regular text on the page.


We then take our text fields and make them 300 pixels wide. This allows our users to have enough room to view the entirety of their information as they complete the form. This will make it easier for them to spot potential errors before submitting the form.


We finish up by overriding the width values for three of our text fields: cvv number, billing zip code, and shipping zip code. These fields require information that are only a handful of characters long so having a wide text field would only confuse users. So we make these fields shorter to represent the shorter information they expect.


For more information on CSS, checkout Sitepoint's CSS Reference Guide.


Updated Payment Form


This installment was not the most technical or the most complicated of this series but it does do a lot towards making our form more presentable and usable. To see our new form with our new HTML and CSS enhancements included just download the attachment at the end of this blog post.


Whatt's Next?


Our form is nearing completion. It is production ready as it is but there is always room for improvement. In our next installment we will make our form easier to maintain by making improvements to the PHP code we have written thus far.


The Handling Online Payments Series


  1. Part 1 - Basic Information and Our Form
  2. Part 2 - Reading In And Sanitizing Submitted Data
  3. Part 3 - Data Validation
  4. Part 4 - Handling Validation Errors
  5. Part 5 - Processing Payment and Handling the Response
  6. Part 6 - Preventing Duplicate Submissions with POST/REDIRECT/GET
  7. Part 7 - Preventing Automated Form Submissions
  8. Part 8 - Using JavaScript To Increase Usability
  9. Part 9 - HTML and CSS Enhancements
  10. Part 10 - A Little Bit More PHP

John Conde is a certified Authorize.Net developer

About the Author
  • Authorize.Net Developer Community Manager