Mighty Form CSS layout help needed

Hi Guys and Gals,

Ive got this beast of a form to try and tame, I have attached a screenshot of a basic contact form that I have already designed and this is how I want the “poorly form” to look ( example label names are all neatly lined up alongside flush input boxes not like the “poorly form” pink fields shown.)

p.s (Ive only left the pink BG in so you can see exactly all the fields in the form, there natural colour will be white)

p.p.s (I havnt decided which fields should be mandatory, so Ive left this code in for the time being)

Any help greatly appreciated , cheers Ralph for steering me back on track :slight_smile:

Ben

HTML code is as follows :

<div class=“orderFormContainer”>
<form class=“orderEPC” action=“order.php” method=“post”>
<fieldset>
<legend><span>Your Contact Details:</span></legend>

<div>
<label for=“bName”><strong class=“mandatory”>♦</strong> Business Name</label>
<input class=“input-wide” name=“bName” id=“bName” type=“text”/>
</div>

<div>
<label for=“title”><strong class=“mandatory”>♦</strong> Title</label>
<select>
<option value=“mr”>Mr</option>
<option value=“mrs”>Mrs</option>
<option value=“miss”>Miss</option>
<option value=“ms”>Ms</option>
<option value=“dr”>Dr</option>
</select>
</div>

<div>
<label for=“fName”><strong class=“mandatory”>♦</strong> First Name</label>
<input class=“input-wide” name=“fName” id=“fName” type=“text”/>
</div>

<div>
<label for=“lName”><strong class=“mandatory”>♦</strong> Last Name</label>
<input class=“input-wide” name=“lName” id=“lName” type=“text”/>
</div>

<div>
<label for=“tDay”><strong class=“mandatory”>♦</strong> Telephone (Day)</label>
<input class=“input-wide” name=“tDay” id=“tDay” type=“text”/>
</div>

<div>
<label for=“tEve”><strong class=“mandatory”>♦</strong> Telephone (Eve)</label>
<input class=“input-wide” name=“tEve” id=“tEve” type=“text”/>
</div>

<div>
<label for=“eMail”><strong class=“mandatory”>♦</strong> E-mail Address</label>
<input class=“input-wide” name=“eMail” id=“eMail” type=“text”/>
</div>

<legend><span>Details for property requiring report:</span></legend>

<div>
<label for=“aNumRdTwn”><strong class=“mandatory”>♦</strong> Address(Number,Road & Town)</label>
<input class=“input-wide” name=“aNumRdTwn” id=“ANumRdTwn” type=“text”/>
</div>

<div>
<label for=“cAndC”><strong class=“mandatory”>♦</strong> City & County</label>
<input class=“input-wide” name=“cAndC” id=“cAndC” type=“text”/>
</div>

<div>
<label for=“pAccess”><strong class=“mandatory”>♦</strong> Property Access</label>
<select>
<option value=“hKey”>Have keys call contact</option>
<option value=“pEmpty”>Have keys property empty</option>
<option value=“wNotify”>Will notify you when we have the keys</option>
<option value=“oAgent”>Other agent has keys call contact</option>
</select>
</div>

<div>
<label for=“contact”><strong class=“mandatory”>♦</strong> Contact is</label>
<select>
<option value=“vendor”>Vendor</option>
<option value=“landlord”>Landlord</option>
<option value=“tenant”>Tenant</option>
<option value=“agent”>Agent</option>
<option value=“porter”>Porter</option>
<option value=“other”>Other (Give details in “Other Information” below)</option>
</select>
</div>

<div>
<label for=“cName”><strong class=“mandatory”>♦</strong> Contact Name</label>
<input class=“input-wide” name=“cName” id=“cName” type=“text”/>
</div>

<div>
<label for=“cTDay”><strong class=“mandatory”>♦</strong> Telephone (Day)</label>
<input class=“input-wide” name=“cTDay” id=“cTDay” type=“text”/>
</div>

<div>
<label for=“cTEve”><strong class=“mandatory”>♦</strong> Telephone (Eve)</label>
<input class=“input-wide” name=“cTEve” id=“cTEve” type=“text”/>
</div>

<div>
<label for=“bedrooms”><strong class=“mandatory”>♦</strong> Number of bedrooms</label>
<select>
<option value=“1”>1</option>
<option value=“2”>2</option>
<option value=“3”>3</option>
<option value=“4”>4</option>
<option value=“5”>5</option>
<option value=“6”>6</option>
<option value=“7”>7</option>
<option value=“7Plus”>7 or More</option>
</select>
</div>

<div>
<label for=“floorplan”>Tick if a floorplan is required</label>
<input type=checkbox name=”floor”></input>
</div>

<div>
<label for=“output”>EPC Total Price</label>
<input class=“output” name=“output” id=“output”/>
</div>

<div>
<label for=“otherInfo”>Other Information</label>
<textarea class="input-wide input-textarea " id=“otherInfo” name=“otherInfo” rows=“5” cols=“30”></textarea>
</div>

<div>
<label for=“spam”>Anti-Spam Question: Is fire hot or cold ?</label>
<input class=“spam” name=“spam” id=“spam”/>
</div>

<div>
<label for=“terms”><strong class=“mandatory”>♦</strong> Select Terms and Conditions</label>
<select>
<option value=“no”>No</option>
<option value=“yes”>Yes</option>
</select>
</div>

CSS code written so far:

.orderFormContainer legend{
color:#000;
font-size:1.2em;
margin:1em 0;
}

/Styles the actual input field/
.orderFormContainer .input-wide{
width:250px;
height:24px;
font-size:1em;
background-color:pink;
padding:0.2em 0.5em 0.2em 0.75em;
}

/Styles the space between the input boxes/
.orderFormContainer div{
margin:0 0 0.5em;
padding: 0.25em 0;
}

/styles the innards of the input fields/
.orderFormContainer select,.orderFormContainer .spam, .orderFormContainer .output{
font-size:1em;
padding:0.1em;
background-color:pink;
}
/styles the “other information” input box/
.orderFormContainer .input-textarea{
height:100px;
width:250px;
padding:0.4em 0.5em;
font-size:1em;
}

i can’t see your screen shots yet - however I found some coding mistakes


<label for="title"><strong class="mandatory">&diams;</strong>&nbsp;Title</label>
<select>
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
</select>

should be


<label for="title"><strong class="mandatory">&diams;</strong>&nbsp;Title</label>
<select name="title" id="title">
<option value="mr">Mr</option>
<option value="mrs">Mrs</option>
<option value="miss">Miss</option>
<option value="ms">Ms</option>
<option value="dr">Dr</option>
</select>

Hey Ryan,

Cheers for the quick reply,

Ive just looked back at that code I submitted, and Im missing the “name” and “id” attributes on all the “SELECT” code segments, does this mean Im to replicate what you said on each one but with their own unique name and ID ?

Cheers

Ben

Hi Ben,

Try adding the following to your css and that will sort out your alignment issues.:

label{
display:inline-block;
width:250px;
}

Hope this helps!

C :slight_smile:

P.S. And yes, it is good practice to add unique name and id attributes to <select> tags.