I created a form using HTML that is divided into two columns for input fields, followed by a 'footer' row containing the form's submit button and additional text.
The current layout of the form looks like this:
_______________________________
| |
| Input 1 Input 2 |
| |
| Input 3 Input 3 |
| |
| Submit Text |
|_______________________________|
However, I would like to have the Submit button and text aligned to the right side but doing so seems to disrupt my design :/
<div id="form-wrapper">
<form id="contact_form" method="post" action="url/to/your/server/here">
<!-- FIRST column floating left -->
<div class="float-left c1">
<ul>
<li>
<label for="name" id="name" >Name<span class="required"> *</span></label>
<input type="text" name="name" placeholder="John Doe" autocomplete="off" required>
</li>
<li>
<label for="telephone" id="telephone" >Contact Number<span class="required"> *</span></label>
<input type="tel" name="telephone" placeholder="(01225) 123456" autocomplete="off" required>
</li>
<li>
<label for="email" id="email">Email:</label>
<input type="email" name="email address" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395c41585449555c795c41585449555c175a5654">[email protected]</a>">
</li>
</u>
</div>
<!-- SECOND column floating left -->
<div class="float-left c2">
<ul>
<li>
<label for="enquiry">Enquiry:</label>
<select id="enquiry" name="enquiry">
<option value="general">General</option>
<option value="sales">Sales</option>
<option value="support">Support</option>
</select>
</li>
<li>
<label for="Message" id="Message" >Message<span class="required"> *</span></label>
<textarea name="message" cols="40" rows="6" required placeholder="Enter your message"></textarea>
</li>
</ul>
</div>
<!-- Clearing float elements - this is a sibling of the floated elements -->
<div class="form_footer">
<ul>
<li><span id="required_field">* Required fields</span></li>
<li><button class="submit" type="submit">Submit</button></li>
</ul>
</div>
</form>
</div>
a {
outline: none;
}
html, body {
background:url(images/bg.png);
margin: 0;
padding: 0;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 0.915em;
line-height: 14px;
}
#form-wrapper {
width: 550px;
display: block;
background: #f6f4f4;
border: #d2cece solid 1px;
}
#required_field {
float: right;
padding: 0 40px 10px 0;
color: #D45252;
font-size: 11px;
font-weight: bold;
font-family: Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif;
}
.required {
color: #D45252;
font-weight: bold;
}
#contact_form ul li {
list-style: none;
position:relative;
}
input, textarea, select {
background:url(images/bg.png);
font-family: Helvetica, Arial, sans-serif;
display: block;
margin: 10px 10px 15px 0px;
resize: none;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* Styling placeholders based on different browsers */
::-webkit-input-placeholder {
color:#CCC;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#CCC;
}
input.placeholder-text, textarea.placeholder-text {
color:#CCC;
}
/* Styling for submit button */
.submit {
font-family: Helvetica, Arial, sans-serif;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Clear floats */
.form_footer {
clear: both;
}