Handling Online Payments Part 9 - HTML and CSS Enhancements
05-17-201111:37 AM - edited 10-20-201109:57 AM
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.
FIELDSET and LEGEND
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.
<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:
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.
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.
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.