Question

The mailing list form I am creating has the following fields: first name, last name, street address, city, state, zip, email, and phone number. I created the form using list items and css NOT tables. I want the first name and last name labels together on the first line, the street address all by itself on the second line, the city, state, and zip all together on the third line, and the email and phone number together on the fourth line. Each line should line up properly with each other.

At first I had accomplished this, but I used so many div classes around almost each label and I want to know if this is possible without using many div tags. The following is the code for the mailing list:

<h1>Join our Mailing List</h1>
{exp:freeform:form form_name="cogar_form" return="thankyou" mailing_list="cogar_mail"  required="first_name|last_name|street_address|city|state|postalcode|email|phone1" notify="[e-mail]" template="cogar_mail"}
<ul>                        
<li><label for="first_name">First Name</label>
<br /><input type="text" id="first_name" name="first_name" value="" maxlength="30" /></li>

<li><label for="last_name">Last Name</label>
<br /><input type="text" id="last_name" name="last_name" value="" maxlength="30" /></li>

<li><label for="street">Street Address</label>
<br /><input type="text" id="street" name="street_address" value="" size="40" maxlength="50"/></li>

<li><label for="city">City/Town</label>
<br /><input type="text" id="city" name="city" value="" /></li>

<li><label for="state">State</label> <br /><select id="state" name="state">
<option>&nbsp;</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select></li>

<li><label for="postalcode">Zip</label>
<br /><input type="text" id="postalcode" name="postalcode" value="" size="11" maxlength="5" /></li>

<li><label for="email">Email</label>
<br /><input type="text" id="email" name="email" value="" maxlength="30" /></li>

<li><label for="phone">Phone Number</label>
<br /><input type="text" id="phone" name="phone1" value="" size="15" maxlength="14" /></li>
</ul>   
<p style="clear:left;"><input type="submit" name="submit" value="Submit" /></p>
{/exp:freeform:form}

Anyone have any ideas how this can be styled properly without using too many div tags?

Answer 1

If you’re trying to do this without a lot of divs, you could do something like this:

 <style type="text/css">
       fieldset
       {
        width: 550px;
        padding: 5px 0;

       }             
       fieldset label
       {
          float: left;
          width: 200px;
          margin-right: 15px;
       }
    </style>
    <fieldset>
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />

.
.
.
etc… the css above will cause the labels to line up nicely with the form elements. Note: Mark Hurd posted his answer as I was typing this – his answer is similar to mine