Form Input element sizing - html

Question

I want to make a two column layout form. but I am getting a problem i.e input elements of form are not equally divided in size(width) and also responsive.
I want it to be responsive and also equally width with gap between them.
Attached Code Below
#import url('https://fonts.googleapis.com/css?family=Montserrat');
h2 {
font-family: Montserrat;
font-size: 3em;
line-height:50px;;
}
form {
width:70%;
margin: 10% auto;
}
input[type="text"]{
display: block;
height: 30px;
width: 47%;
float:left;
}
form > input:nth-child(3){
margin-left: 31px;
margin-right:0;
}
textarea {
width:100%;
box-sizing: border-box;
margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
}
textarea[placeholder="Message"]{
letter-spacing:5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,textarea:focus {
outline:none;
}
<section id="contact-page">
<form>
<h2>Contact Us</h2>
<input type="text" placeholder="Name">
<input type="text" placeholder="E-mail">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>

Answer 1

Try This
<form>
<div class="col-sm-6 col-xs-12 form-group">
<input type="text" name="" class="form-control">
</div>
<div class="col-sm-6 col-xs-12 form-group">
<input type="email" name="" class="form-control">
</div>
<div class="col-sm-12 form-group">
<textarea name="" cols="" rows="10" class="form-control"></textarea>
</div>
<form>
Just add this to your form section and also add the required files for botstrap
1- Jquery
2- Bootsrap.min.css
Bootsrap Documentation
JS fiddle

Answer 2

Remove float for inputs and add a wrapper div as below
h2 {
font-family: Montserrat;
font-size: 3em;
line-height:50px;;
}
form {
width:70%;
margin: 10% auto;
}
#email{
display: block;
height: 30px;
width: 30%;
float:left;
margin:0;
margin-left:2%;
}
#name{
display: block;
height: 30px;
width: 30%;
}
form > input:nth-child(3){
margin-left: 31px;
margin-right:0;
}
textarea {
width:100%;
box-sizing: border-box;
margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
}
textarea[placeholder="Message"]{
letter-spacing:5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,textarea:focus {
outline:none;
}
<section>
<form>
<h2>Contact Us</h2>
<div style="display: flex; justify-content: space-between;">
<input type="text" placeholder="Name">
<input type="text" placeholder="E-mail">
</div>
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>

Answer 3

If possible use Bootstrap with Grids, if not easy solution will be add div like this:
Bootstrap Grid LinK: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
<form>
<h2>Contact Us</h2>
<div>
<input type="text" placeholder="Name">
</div>
<div>
<input type="text" placeholder="E-mail">
</div>
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>

Answer 4

Your selector form > input:nth-child(3) is a problem because it counts the h2 as the first, making the email-input the third and adding left-margin to it.
Once that is gone, I added margin: 30px 0; to the existing input['text'] selector, to match what you had applied to the textarea, and you may want different values, but everything is lined up and evenly spaced:
JS Fiddle

Answer 5

Example :
h2 {
font-family: Montserrat;
font-size: 3em;
line-height:50px;;
}
form {
width:70%;
margin: 10% auto;
}
#email{
display: block;
height: 30px;
width: 30%;
float:left;
margin:0;
margin-left:2%;
}
#name{
display: block;
height: 30px;
width: 30%;
float:left;
}
form > input:nth-child(3){
margin-left: 31px;
margin-right:0;
}
textarea {
width:100%;
box-sizing: border-box;
margin: 30px 0;
}
input[placeholder="Name"],input[placeholder="E-mail"]{
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
}
textarea[placeholder="Message"]{
letter-spacing:5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,textarea:focus {
outline:none;
}
<section id="contact-page">
<form>
<h2>Contact Us</h2>
<input type="text" placeholder="Name" id='name'>
<input type="text" placeholder="E-mail" id='email'>
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>

Answer 6

Well ! i tried to figure out your problem and just gave a try to make it responsive.
Max-width and Max-height
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
Using max-width instead, in this situation, will improve the browser's handling of small windows. similarly for height
You can remove margin: 0 auto; if you want don't want your content centred
#import url('https://fonts.googleapis.com/css?family=Montserrat');
h2 {
white-space: auto;
font-family: Montserrat;
font-size: 3em;
line-height: 50px;
;
}
form {
width: 70%;
margin: 0 auto;
}
input[type="text"] {
max-height: 30px;
max-width: 47%;
}
textarea {
max-width: 100%;
box-sizing: border-box;
margin: 10px 0;
}
input[placeholder="Name"],
input[placeholder="E-mail"] {
padding: 10px;
letter-spacing: 5px;
font-family: Montserrat;
margin-bottom: 10px;
}
textarea[placeholder="Message"] {
letter-spacing: 5px;
padding: 10px;
font-family: Montserrat;
}
/*
input , textarea {
border-width: 0 0 2px 0;
border-color: #000;
}*/
form input,
textarea:focus {
outline: none;
}
<section id="contact-page">
<form>
<h2>Contact Us</h2>
<input type="text" placeholder="Name">
<input type="text" placeholder="E-mail">
<textarea name="message" placeholder="Message" rows="6"></textarea>
</form>
</section>