Setting up Checkout form

HTML & CSS
1

Hello. I am working on a Checkout form, and could use some advice of how to set it up.

To avoid cart abandonment, I am following advice from the pros and making this a single form.

There are 4 steps during checkout, so I was going to have each step be an H2.

I think it makes sense, semantically, to make each step it’s own logical block, yet be part of the larger single form.

My form starts off with the tagline: “Checkout in 4 easy steps…”

Originally I was going to have one Fieldset, and make that tagline the Legend, and then have four H2’s inside the master Fieldset in the Form, but now I’m not sure that is the way to go…

Now I am thinking that each step be its own Fieldset.

And if I went that way, then should I have each H2 with a separate Fieldset beneath it, or should the H2 be the Legend in the Fieldset?

Also, I think HTML5 has the concept of a Section. Should I be using that instead?


Like most things in design, I suppose there are lots of ways to approach this, but one way is probably best.

I’m thinking having an H2 for each Step followed by a separate Fieldset is the way to go, but then I wonder if I need a parent Fieldset to wrap everything in the Form, and then what do I do with my Tagline?!

:wonky:

Thanks.

2

Here is my best guess at how to do things…

<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>sp_checkout-form_01.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    html, body{
      height: 100%;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4;
      font-size: 0.9em;
    }
    
    p{
      padding: 0 0 1rem 0;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #mastSimple{
      padding: 5px 0 0 0;
    }
    
    h1{
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      line-height: 1.4;
      border-bottom: 2px solid #000;
    }

    #pageBody{
      position: relative;
      max-width: 100%;
      margin: 30px 0 0 0;
    }
    
    h2{
      font-size: 1.2rem;
    }
    
    form#checkout{
      width: 50%;
      margin: 0 auto;
      padding: 2em 3em;
      background-color: #EEE;
    }
    
    fieldset{
      margin: 0 0 2em 0;
      padding: 0 2em 2em 2em;
    }
    
    label{
      display: block;
      margin: 1em 0 0 0;
    }
    
    input{
      display: block;
    }
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper">
    
    <div id="pageInner">
      
      <div id="mastSimple">
          <h1>My Company</h1>
      </div>
      
      <div id="pageBody">
        <form id="checkout" action="" method="post">
          
          <!-- **************** Step #1 **************** -->
          <h2>Step 1: Customer Info</h2>
          <fieldset>
            <legend>Dont want one...</legend>
            
            <!-- First Name -->
            <label for="firstName">First Name:</label>
            <input id="firstName" name="firstName" type="text" />
            
            <!-- Last Name -->
            <label for="lastName">Last Name:</label>
            <input id="lastName" name="lastName" type="text" />
          </fieldset>
          <!-- ***************************************** -->

          
          <!-- **************** Step #2 **************** -->
          <h2>Step 2: Address Details</h2>
          <fieldset>
            <legend>Dont want one...</legend>
            
            <!-- Address -->
            <label for="address1">Address:</label>
            <input id="address1" name="address1" type="text" />
            
            <!-- City -->
            <label for="city">City:</label>
            <input id="city" name="city" type="text" />
            
            <!-- State -->
            <label for="state">State:</label>
            <input id="state" name="state" type="text" />
          </fieldset>
          <!-- ***************************************** -->
          
        </form>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>
3

Personally, I would do away with the h2 elements and
simply put their contents in the legend elements.

coothead

4

Since this is a checkout page, I guess i don’t need to worry about things like SEO, and so maybe getting too crazy about HTML semantics is overkill?

5

The form looks semantically correct to me without the h2 elements.

Note;-

  1. /> is not required with the <!DOCTYPE HTML>
  2. add the required attribute to the inputs.

coothead

6

@coothead,

1.) Is there a way to style te Legend so that it is positioned and looks just like my H@'s now>

2.) Does it hurt to have the closing /> ? (I like open/closing tags because they help me to organize things, and to get get, well, “closure”! :biggrin:

3.) Yes, I need to try and use for the first time the < abbrev > element for my required fields.

4.) It sounds like you are okay with my having 4 Fieldsets in my checkout form, right?

7
  1. Yes, see the code below.
  2. Well, you have chosen not to put them on the meta elements.
  3. I don’t understand that.
  4. Yes.
<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>sp_checkout-form_01.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    html, body{
      height: 100%;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4;
      font-size: 0.9em;
    }
    
    p{
      padding: 0 0 1rem 0;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #mastSimple{
      padding: 5px 0 0 0;
    }
    
    h1{
      font-family: Georgia, 'Times New Roman', Serif;      
      font-size: 2rem;
      line-height: 1.4;
      border-bottom: 2px solid #000;
    }

    #pageBody{
      position: relative;
      max-width: 100%;
      margin: 30px 0 0 0;
    }
    
    h2{
      display:none;
      /*font-size: 1.2rem;*/
    }
    
    form#checkout{
      width: 50%;
      margin: 0 auto;
      padding: 2em 3em;
      background-color: #EEE;
    }
    
    fieldset{
      margin: 0 0 2em 0;
      border:0;
    }
    legend {
      font-size: 1.2rem;
      font-weight: bold;
    }
    
    label{
      display: block;
      margin: 1em 0 0 0;      
    }
    
    input{
      display: block;
    }
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper">
    
    <div id="pageInner">
      
      <div id="mastSimple">
          <h1>My Company</h1>
      </div>
      
      <div id="pageBody">
        <form id="checkout" action="" method="post">
          
          <!-- **************** Step #1 **************** -->
          <h2>Step 1: Customer Info</h2>
          <fieldset>
            <legend>Step 1: Customer Info</legend>
            
            <!-- First Name -->
            <label for="firstName">First Name:</label>
            <input id="firstName" name="firstName" type="text" required>
            
            <!-- Last Name -->
            <label for="lastName">Last Name:</label>
            <input id="lastName" name="lastName" type="text" required>
          </fieldset>
          <!-- ***************************************** -->

          
          <!-- **************** Step #2 **************** -->
          <h2>Step 2: Address Details</h2>
          <fieldset>
            <legend>Step 2: Address Details</legend>
            
            <!-- Address -->
            <label for="address1">Address:</label>
            <input id="address1" name="address1" type="text" required>
            
            <!-- City -->
            <label for="city">City:</label>
            <input id="city" name="city" type="text" required>
            
            <!-- State -->
            <label for="state">State:</label>
            <input id="state" name="state" type="text" required>
          </fieldset>
          <!-- ***************************************** -->
          
        </form>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

coothead

1 Like
8

I would change it to …

    input{
      display: block;
      width: 100%;
      max-width: 20em; /* adjust value to suit */
    }

…to ensure that the form is fully responsive. :winky:

coothead

1 Like
9

I didn’t run your code yet - am cooking - but it looks like you hid the Fieldset.

To clarify, I am okay - and like - having a border around a Fieldset as it visually delineates things. But in the case of my Step 1/2/3/4, I think having the border merge with the Legend would look weird.

So if I am going to get rid of the H2, then I would like to have a Fieldset with its default broder and then have the Legend on the line above the Fieldset - even though it is technically part of the Fieldset.

Follow me?

Maybe I could just use a negative margin? (Not sure of that will give me a continuous box around the Fieldset though?)

True, but that’s a one-line in the header.

I guess I could add a closing comment like…

<!-- End of FORM -->

Check out how they do Required* fiedls in the MDN here…

https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form

Okay, good.

10

If you want to keep the fieldset border then keep
the h2 elements and do away with the legend

<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>sp_checkout-form_01.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    html, body{
      height: 100%;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4;
      font-size: 0.9em;
    }
    
    p{
      padding: 0 0 1rem 0;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #mastSimple{
      padding: 5px 0 0 0;
    }
    
    h1{
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      line-height: 1.4;
      border-bottom: 2px solid #000;
    }

    #pageBody{
      position: relative;
      max-width: 100%;
      margin: 30px 0 0 0;
    }
    
    h2{
      font-size: 1.2rem;
    }
    
    form#checkout{
      width: 50%;
      margin: 0 auto;
      padding: 2em 3em;
      background-color: #EEE;
    }
    
    fieldset{
      margin: 1em 0 2em 0;
      padding: 0 2em 2em 2em;
    }
    
    label{
      display: block;
      padding:0.25em 0;
      margin: 1em 0 0 0;
    }
    
    input{
      display: block;
      width: 100%;
      max-width: 20em; /* adjust value to suit */
    }
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper">
    
    <div id="pageInner">
      
      <div id="mastSimple">
          <h1>My Company</h1>
      </div>
      
      <div id="pageBody">
        <form id="checkout" action="#" method="post">
          
          <!-- **************** Step #1 **************** -->
          <h2>Step 1: Customer Info</h2>
          <fieldset>
            
            <!-- First Name -->
            <label for="firstName">
              <span>First Name: </span>
              <strong><abbr title="required">*</abbr></strong>
            </label>
            <input id="firstName" name="firstName" type="text" required >
            
            <!-- Last Name -->
            <label for="lastName">
              <span>Last Name: </span>
              <strong><abbr title="required">*</abbr></strong>	
            </label>
            <input id="lastName" name="lastName" type="text" required >
          </fieldset>
          <!-- ***************************************** -->

          
          <!-- **************** Step #2 **************** -->
          <h2>Step 2: Address Details</h2>
          <fieldset>
            
            <!-- Address -->
            <label for="address1">
              <span>Address: </span>
              <strong><abbr title="required">*</abbr></strong>
            </label>
            <input id="address1" name="address1" type="text" required >
            <!-- City -->
            <label for="city">
              <span>City: </span>
              <strong><abbr title="required">*</abbr></strong>
            </label>              
            <input id="city" name="city" type="text" required >

            <!-- State -->
            <label for="state">
              <span>State: </span>
              <strong><abbr title="required">*</abbr></strong>
            </label>
            <input id="state" name="state" type="text" required >
          </fieldset>
          <!-- ***************************************** -->
          
        </form>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

coothead

11

If I am understanding your code, that would make a text box (< input >) as wide as the container up to 20em, but then allow the text box to shrink down to say a mobile screen where it might only be 10em?

Sort of like an accordion field?

12

The max-width:20em; is optional, as was pointed out,

       /* adjust value to suit */

coothead

13

No, I was asking how it worked.

Have already applied your suggestions, and might I say things are looking good! :+1:

14

@coothead,

I was able to find a way to position the Legend like I wanted and get rid of the H2.

Here is my solution…

<!DOCTYPE HTML>
<html lang="en">


<!-- *************************  HTML HEAD  ********************************* -->
<head>
  <!-- METADATA -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

  <!-- TITLE -->
  <title>sp_checkout-form_02.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    *{
      margin: 0;
      padding: 0;
    }
    
    html, 
    body{
      height: 100%;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4;
      font-size: 0.9em;
    }
    
    p{
      padding: 0 0 1rem 0;
    }

    #pageWrapper{
      position: relative;
      display: block;
      min-height: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    #pageInner{
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    
    #mastSimple{
      padding: 5px 0 0 0;
    }
    
    h1{
      font-family: Georgia, Times New Roman, Serif;      
      font-size: 2rem;
      line-height: 1.4;
      border-bottom: 2px solid #000;
    }

    #pageBody{
      position: relative;
      max-width: 100%;
      margin: 30px 0 0 0;
    }
    
    h2{
      font-size: 1.1rem;
    }
    
    form#checkout{
      box-sizing: border-box;
      width: 50%;
      min-width: 330px;           /**/
      margin: 0 auto;
      padding: 20px;
      background-color: #EEE;
    }
    
    fieldset{
      margin: 0 0 2rem 0;
      padding: 0 2rem 2rem 2rem;
    }

    /* HERE */
    legend{
      float: left;
      margin: -1.7rem 0 0 -2.1rem;
      padding: 0;
      font-size: 1.1rem;
      font-weight: bold;
    }
    
    label{
      display: block;
      margin: 1rem 0 0 0;
    }
    
    input{
      display: block;
      width: 100%;
      max-width: 30rem;
    }
    
    abbr{
      color: #F00;
    }
    
  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  <div id="pageWrapper">
    
    <div id="pageInner">
      
      <div id="mastSimple">
          <h1>My Company</h1>
      </div>
      
      <div id="pageBody">
        <form id="checkout" action="" method="post">
          
          <!-- **************** Step #1 **************** -->
          <h2>Step 1: Create an Account (h2)</h2>
          <br>
          <fieldset>
            <legend>Step 1: Create an Account</legend>
            
            <!-- First Name -->
            <label for="firstName">First Name:</label>
            <input id="firstName" name="firstName" type="text" />
            
            <!-- Last Name -->
            <label for="lastName">Last Name:</label>
            <input id="lastName" name="lastName" type="text" />
          </fieldset>
          <!-- ***************************************** -->

          
          <!-- **************** Step #2 **************** -->
          <h2>Step 2: Enter Payment Details (h2)</h2>
          <br>
          <fieldset>
            <legend>Step 2: Enter Payment Details (legend)</legend>
            
            <!-- Address -->
            <label for="address1">Address:<abbr title="required" aria-label="required">*</abbr></label>
            <input id="address1" name="address1" type="text" />
            
            <!-- City -->
            <label for="city">City:</label>
            <input id="city" name="city" type="text" />
            
            <!-- State -->
            <label for="state">State:</label>
            <input id="state" name="state" type="text" />
          </fieldset>
          <!-- ***************************************** -->
          
        </form>
      </div>
      
    </div>
    
  </div>
  
</body>
</html>

You will notice that I left the H2’s in to compare to the adjust Legends.

This solution looks identical to the original H2’s.

The only problem is that if you adjust the page width like for mobile, then if things get too narrow the Legend will drop down into the Fieldset area which isn’t desirable. However, if you make your page responsive, and make sure the Legend isn’t too long, then it should be fine.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.