Jump to content


Photo

Form in two columns / divs

form 2 horizontal columns

  • Please log in to reply
3 replies to this topic

#1 jerseydudek

jerseydudek

    Dedicated Member

  • Members
  • PipPip
  • 208 posts
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 19 May 2017 - 03:02 PM

Hi,

 

I've got a form which works fine in one div. I'm trying to put it in to two divs side by side but it doesn't submit when I do that.

Were am I going wrong please.

Here's the code I'm using if it helps:

 

I've created two divs which float side by side - formdivleft, formdivright. They're both in a parent div .

<div class="formdivleft" >
	  <h2 align="center">Request a quote</h2>
  <fieldset> 

  <legend>We will respond shortly to confirm your booking.</legend> 
  <p> 
<form action="formdev.php" method="POST">
				<input type="text" class="text" value="" placeholder="Your Name" required="" name="name" >
                <input type="text" class="text" value="" placeholder="Email Address" required="" name="email" >
				<input type="text" class="text" value="" placeholder="Telephone Number" required="" name="telephone" >
				<input type="text" class="text" value="" placeholder="Pick Up Point" required="" name="journeystart" >
				<input type="text" class="text" value="" placeholder="Destination" required="" name="journeydestination" >
				      <label for="Howmany">Number of people travelling</label> 
  	  	   <p>
				<select value="" placeholder="How Many Travelling" required="" name="howmany" >
			    <option value="One Person">One Person</option>
    <option value="Two-five">Two-five</option>
    <option value="Six-Twelve">Six-Twelve</option>
    <option value="Two Vehicles or more">Two Vehicles or more</option>
    </select>	
		  </p>


	</div>
	<div class="formdivright" >
					  <p>

	  <p> 
	      <label for="date">Date of Journey</label>    </p>
		
	   <p>
	 	<select value="" placeholder="What Month" required="" name="month" >  
    <option value="January">January</option>
    <option value="February">February</option>
    <option value="March">March</option>
    <option value="April">April</option>
    <option value="May">May</option>
    <option value="June">June</option>
    <option value="July">July</option>
    <option value="August">August</option>
    <option value="September">September</option>
    <option value="October">October</option>
    <option value="November">November</option>
    <option value="December">December</option>
</select>

	 	<select value="" placeholder="What Day" required="" name="day" >  
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>
		</p>
	   <p><textarea type="text" placeholder="Further Information" required="" name="message"></textarea></p>
			
						<p><input type="submit" name="submit" value="SUBMIT"></p>
						 </fieldset> 
			</form>
	
	 </div>
 </div> 
.formdivleft {
float: left;
	width: 46%;
	min-height: 450px;
color: #000;
	margin: 2% 2% 0% 2%;
	padding: 18px;
	border: 1px solid #000;
}
.formdivright {
float: left;
clear:right;
	width: 46%;
	min-height: 450px;
color: #000;
	margin: 2% 0% 2% 2%;
	padding: 18px;
	text-align: center;
	border: 1px solid #000;
}

Hope that's clear.

Thanks



#2 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 3,861 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 19 May 2017 - 09:59 PM

Do you have a link to your site or can you post up a working version on CodePen for us to look at?



#3 BrowserBugs

BrowserBugs

    Unhinged

  • Privileged
  • PipPipPipPipPip
  • 2,010 posts
  • Gender:Male
  • Location:Surrey, UK
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 20 May 2017 - 07:07 AM

I've got a form which works fine in one div. I'm trying to put it in to two divs side by side but it doesn't submit when I do that.

 

The reason for this is that the form is inside the left column so the month, day etc is outside the form. Both left and right need to be inside the form.

<form action="formdev.php" method="POST">
<div class="formdivleft">

</div>
<div class="formdivright">

</div>
</form> 

Edit: Actually the <form> is in the left but the </form> is in the right, my answer remains though ;)


Edited by BrowserBugs, 20 May 2017 - 07:10 AM.


#4 jerseydudek

jerseydudek

    Dedicated Member

  • Members
  • PipPip
  • 208 posts
  • Experience:Intermediate
  • Area of Expertise:Designer

Posted 20 May 2017 - 08:37 AM

That makes sense thanks. Why it didn't occur to me is weird. Doh!






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users