How can I create a responsive side by side form? - html

Question

I'm looking for the best way to go about a side by side form.
I've done mine in a responsive grid which apparently isn't viable as I am using two separate form tags.
Here is what I've come up with so far.
http://jsfiddle.net/pentester/aFP68/
Any Help Would be greatly appreciated.
<div class="section group">
<div class="col span_1_of_2">
<div class="formwrap">
<form method="post" action="contact.php">
<input type="text" name="name" id="name" placeholder="Name" required />
<input type="text" name="company" id="company" placeholder="Company" required />
<input type="text" name="email" id="email" placeholder="Email" required />
<input type="text" name="phone" id="phone" placeholder="Phone Number" required />
<p class="submit">
<input id="submit" name="submit" type="submit" value="Send" />
</p>
</form>
</div>
</div>
<div class="col span_1_of_2">
<div class="formwrap">
<form method="post" action="contact.php">
<select name="new_or_upgrade" id="new_or_upgrade" placeholder="Type of website">
<option value="Type">Type of website</option>
<option value="normal">Normal</option>
<option value="cms">Content Management Site</option>
<option value="upgrade">E Commerce</option>
</select>
<textarea name="message" placeholder="Tell us about your project" required /></textarea>
</form>
</div>
</div>
/*Form*/
select{
width:100%;
padding:0.5em;
border:1px solid #F2F2F2;
margin-top: 0.5em;}
.formwrap {
margin: auto;
max-width: 70em;
padding: 0 0.5em;
}
.formwrap p {
font-family: sans;
font-weight: 100;
font-size: 1em;
margin: 0;
}
form {
clear: both;
float: left;
width: 100%;
margin: 0 auto;
}
input,
textarea {
padding: 10px;
border: 1px solid #EFEFEF;
width: 100%;
color: #000;
margin-top: 0.5em;
border-radius:3px;
}
textarea {
width: 100%;
height: 150px;
line-height: 18px;
}
input:focus,
textarea:focus {
border: 1px solid #21ABD3;
transition: all 0.2s ease;
}
form label {
margin-left: 1em;
color: #000;
}
.submit input {
background-color: #1D8FBB;
width: 6em;
color: #FFF;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
border: none;
float: left;
transition: none;
border-radius: 3px;
font-family:opensans
}
.submit input:hover {
background-color: #34A2CD;
transition: all 0.2s ease;
}
.submit input:active {
box-shadow: 0 0 3px rgba(51, 51, 51, 0.61) inset;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 1% 0 1% 1%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.5%;
}
/* GO FULL WIDTH AT LESS THAN 600 PIXELS */
#media only screen and (max-width: 800px) {
.col {
margin: 0;
}
}
#media only screen and (max-width: 800px) {
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 100%;
}
}
#media only screen and (max-width: 600px) {
.block{
padding:0.5em 1em}
}

Answer 1

There are a lot of way to create responsive layout. For me, I would like to use Bootstrap.
http://jsfiddle.net/wrcuv/
Here is the example,
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<div class="container">
<form method="post" action="contact.php" class="form">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input type="text" name="name" id="name" placeholder="Name" class="form-control" required />
</div>
<div class="form-group">
<input type="text" name="company" id="company" placeholder="Company" class="form-control" required />
</div>
<div class="form-group">
<input type="text" name="email" id="email" placeholder="Email" class="form-control" required />
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" placeholder="Phone Number" class="form-control" required />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select name="new_or_upgrade" id="new_or_upgrade" class="form-control" placeholder="Type of website">
<option value="Type">Type of website</option>
<option value="normal">Normal</option>
<option value="cms">Content Management Site</option>
<option value="upgrade">E Commerce</option>
</select>
</div>
<div class="form-group">
<textarea name="message" placeholder="Tell us about your project" class="form-control" required /></textarea>
</div>
</div>
</div>
<div class="row text-center">
<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary" />
</div>
</form>
</div>