place divs next to each other and one below - html

I am new to coding and I am trying to make a contact form with the Flex property so that I can place my "name" and "telephone number" horizontally next to each other and my "message" below. They must all be the same width.
I canĀ“t figure it out with CSS.
below is my HTML code:
<div class="contactcontainer">
<form action="">
<div class="input">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

You can achieve this by using flexbox.
And remember to use semantic markup for your forms, e.g. use label for labels instead of p tag.
.contactcontainer label {
display: block;
}
.input {
display: flex;
}
.input > div {
margin-right: 8px;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div>
<label for="firstname">First name</label>
<input id="firstname" type="text" name="firstname" placeholder="Your first name...">
</div>
<div>
<label for="pnumber">Phone number</label>
<input id="pnumber" type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<label for="message">Your message</label>
<textarea id="message" type="text" name="message" placeholder="type your message"></textarea>
</div>
</form>
</div>

Here is my solution, Its not perfect, but it will give u starting point
* {
box-sizing: border-box;
}
.contactcontainer {
width: 500px;
}
.input {
display: flex;
}
.message input {
display: block;
width: 100%;
}
.l,
.r {
flex: 1;
}
.l input,
.r input {
width: 100%;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="l">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="r">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

If you want to achieve it using flex then
.input { display: flex; flex-direction: row; flex-wrap: wrap; }
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="inline">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="inline">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

Using FlexBox
.input {
display: flex;
}
input {
width: 100%;
}
.hor{
flex: 1;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="hor">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="hor">
<p>Phone number</p>
<input type="text" name="pnumber" placeholder="your phone number">
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>
EDIT:
Use type=Number for number validation
.input {
display: flex;
}
input {
width: 100%;
}
.hor{
flex: 1;
}
<div class="contactcontainer">
<form action="">
<div class="input">
<div class="hor">
<p>First name</p>
<input type="text" name="firstname" placeholder="Your first name...">
</div>
<div class="hor">
<p>Phone number</p>
<input type="number" name="pnumber" placeholder="your phone number" min=1>
</div>
</div>
<div class="message">
<p>Your message</p>
<input type="text" name="message" placeholder="type your message">
</div>
</form>
</div>

Related

Elements in Grid Layout Form Won't Align

I'm a newbie so please forgive the probably very silly question. I need to have the contact elements in my right grid column to be aligned with the form elements in the left column. So far the contact details just sit at the bottom and I can't figure out why.
Any help is greatly appreciated.
.form-list,
.form-contact {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;
padding-top: 1rem;
}
.form-group {
grid-column: 1 / 2;
}
.form-details {
grid-column: 2 / 3;
}
<form action="" method="post">
<div class="form-list">
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input id="name" name="name" type="text" placeholder="Your name" class="form-control" required />
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input id="email" name="email" type="text" placeholder="youremail#email.com" class="form-control" required />
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea id="message" name="message" rows="4" class="message-control" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="button">Contact us</button>
</div>
</div>
</form>
</main>
<div class="form-contact">
<div class="form-details">
<h2>Contact</h2>
<p><span>456 Random Street,</span><span>Sydney,</span>
<span>Australia</span></p>
<p><span>Phone: 024 123 45678</span><span>Email: sales#website.co.nz</span></p>
</div>
</div>
I think you misunderstood how grid works, you need a wrapper or container that will display its content in a grid, what you did was put the display: grid on the elements themselves
.grid-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 2rem;
padding-top: 1rem;
align-items : flex-start;
}
.form-group {
grid-column: 1;
}
.form-details {
grid-column: 2;
}
.form-details h2 {
margin-top : 0;
}
<div class="grid-wrapper">
<form action="" method="post">
<div class="form-list">
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input id="name" name="name" type="text" placeholder="Your name" class="form-control" required />
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input id="email" name="email" type="text" placeholder="youremail#email.com" class="form-control" required />
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea id="message" name="message" rows="4" class="message-control" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="button">Contact us</button>
</div>
</div>
</form>
<div class="form-contact">
<div class="form-details">
<h2>Contact</h2>
<p><span>456 Random Street,</span><span>Sydney,</span>
<span>Australia</span></p>
<p><span>Phone: 024 123 45678</span><span>Email: sales#website.co.nz</span></p>
</div>
</div>
</div>
You can avoid all those css and just work with flexbox
.form-list,
.form-contact {
padding-top: 1rem;
}
main {
display: flex;
}
<main>
<form action="" method="post">
<div class="form-list">
<div class="form-group">
<label for="name" class="form-label">Name</label>
<input id="name" name="name" type="text" placeholder="Your name" class="form-control" required />
</div>
<div class="form-group">
<label for="email" class="form-label">Email</label>
<input id="email" name="email" type="text" placeholder="youremail#email.com" class="form-control" required />
</div>
<div class="form-group">
<label for="message" class="form-label">Message</label>
<textarea id="message" name="message" rows="4" class="message-control" required></textarea>
</div>
<div class="form-group">
<button type="submit" class="button">Contact us</button>
</div>
</div>
</form>
<div class="form-contact">
<div class="form-details">
<h2>Contact</h2>
<p><span>456 Random Street,</span><span>Sydney,</span>
<span>Australia</span></p>
<p><span>Phone: 024 123 45678</span><span>Email: sales#website.co.nz</span></p>
</div>
</div>
</main>

justify-content space-between not aligning elements left and right

Alright, so I am trying to use Flexbox to align my form on the left hand side of the screen and my image on the right hand of the screen using justify-content: space-between but when I put that on my .container it doesn't work. Here is what I have so far:
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
<div class="image">
<img src="img/city.jpg" alt="">
</div>
</div>
</form>
My style:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
img {
width: 20%;
}
Put the two sections in their own containers, then it can work.
.container {
display: flex;
justify-content: space-between;
}
section:first-child {
background-color: orange;
}
section:last-child {
background-color: lightgreen;
}
.image {
border: 2px dashed black;
height: 100px;
width: 100px;
}
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<section><!-- container one -->
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
</section>
<section><!-- container two -->
<div class="image"> image
<img src="img/city.jpg" alt="">
</div>
</section>
</div>
</form>

How to display html form next to each other and in rows?

I am currently trying to get two forms next to each other and then two more forms under it all aligned. If anyone has any suggestions to help me out that would be great. Here is my source code in a jsfiddle.
I am trying to get the name and company input next to each other and then the phone and email below it with the comment textbox at the base. I was trying the 40% width and it sort of helped to get the first row. I was thinking of going the table route as I could probably get that working fine for the forms being aligned but I know tables is not the correct route for coding this.
https://jsfiddle.net/xtwistedmetal/two7hgtm/1/
or
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
display: inline-block;
width: 40%;
}
.mc-field-group2 {
display: inline-block;
}
</style>
<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
<div id="mc_embed_signup_scroll">
<div align="center">
<h2> Wholesale Contact Form</h2>
</div>
<div class="mc-field-group1">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
</div>
<div class="mc-field-group1">
<label for="mce-MMERGE3">Company Name </label>
<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
</div>
<div class="mc-field-group2">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<br>
<div class="mc-field-group2">
<label for="mce-MMERGE2">Phone Number </label>
<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
</div>
<div class="mc-field-group">
<label for="mce-COMMENTS">Comments </label>
<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div class="clear" align="center">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>
You can try an approach like below
.form-group:after{
content: "";
display:table;
clear:both;
}
.form-group-half{
width:44%;
padding:0 3%;
float:left;
}
.form-group-half > label{
display:block;
}
.form-group-half > input,
.form-group-half > select,
.form-group-half > textarea {
width:100%;
}
<div class="form-group">
<div class="form-group-half">
<label>Field 1</label>
<input type="text" name="field1">
</div>
<div class="form-group-half">
<label>Field 2</label>
<input type="text" name="field2">
</div>
</div>
<div class="form-group">
<div class="form-group-half">
<label>Field 3</label>
<input type="text" name="field3">
</div>
<div class="form-group-half">
<label>Field 4</label>
<input type="text" name="field4">
</div>
</div>
HTML ;
<div id="mc_embed_signup">
<form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="" action="websitehere">
<div id="mc_embed_signup_scroll">
<div align="center">
<h2> Wholesale Contact Form</h2>
</div>
<div class="mc-field-group1" style=>
<div style="width:40%">
<label for="mce-FNAME">Name </label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME" />
</div>
<div style="width:40%">
<label for="mce-MMERGE3">Company Name </label>
<input type="text" value="" name="MMERGE3" class="required" id="mce-MMERGE3" />
</div>
</div>
<div class="mc-field-group2">
<div style="width:40%">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" />
</div>
<div style="width:40%">
<label for="mce-MMERGE2">Phone Number </label>
<input type="text" name="MMERGE2" class="" value="" id="mce-MMERGE2" />
</div>
</div>
<br>
<div class="mc-field-group">
<label for="mce-COMMENTS">Comments </label>
<!-- <input type="text" value="" name="COMMENTS" class="required" id="mce-COMMENTS" /> -->
<textarea id="mce-COMMENTS" name="COMMENTS" cols="47" rows="3"> </textarea>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div class="clear" align="center">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
</div>
</div>
</form>
</div>
CSS
<style type="text/css">
#mc_embed_signup {
background: #fff;
clear: left;
font: 12px Helvetica, Arial, sans-serif;
}
.mc-field-group1 {
width: 100%;
display: inline-flex;
}
.mc-field-group2 {
display: inline-flex;
width: 100%;
}
label{
color:red;
width:40px !important;
}

Display labels on one line and input on one line using flexbox

I'm trying to recreate something like this using flexbox so that labels and inputs are on separate lines
<form class="form">
<label> Credit Card Number </label>
<input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
<label>Date</label>
<input type="date" name="date">
<label for="cvc">Cvc</label>
<input type="text" name="cvc" placeholder="809">
<label for="postcode">Zip</label>
<input type="number" name="postcode" placeholder="94100">
<input type="submit" value="Search">
</form>
http://codepen.io/o-sewell/pen/egPGYm?editors=1100
You mean like that?
.label {
display: block;
}
.form {
display: flex;
}
.cell{
float: left;
}
<form class="form">
<div class="cell">
<label> Credit Card Number </label></br>
<input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
</div>
<div class="cell">
<label>Date</label></br>
<input type="date" name="date">
</div>
<div class="cell">
<label for="cvc">Cvc</label></br>
<input type="text" name="cvc" placeholder="809">
</div>
<div class="cell">
<label for="postcode">Zip</label></br>
<input type="number" name="postcode" placeholder="94100">
</div>
<div class="cell">
<input type="submit" value="Search">
</div>
</form>
Thank you i think i figured it out from your answer
<form class="form">
<div class="cell">
<label> Credit Card Number </label>
<input type="search" name="creditcard" placeholder="4831-0948-9417-4341">
</div>
<div class="cell">
<label>Date</label>
<input type="date" name="date">
</div>
<div class="cell">
<label for="cvc">Cvc</label>
<input type="text" name="cvc" placeholder="809">
</div>
<div class="cell">
<label for="postcode">Zip</label>
<input type="number" name="postcode" placeholder="94100">
</div>
<input type="submit" value="Search">
</form>
form {
display: flex;
}
.cell {
display: flex;
flex-direction: column;
flex: 1;
}

Bootstrap, Two columns won't go side by side (Form + Message)

I'm trying to make a contact section with two columns, an lg-8 and lg-3 (EDIT) + 1 buffer column:
First Column: Contact Form
Second Column: A simple text message from me.
I've looked around several places and cannot understand what is wrong with my code. I've done everything [bootstrap][1] resource says to and I'm getting one column underneath the other.
This is in a 'div class="container"'
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
and the CSS
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
I made several changes, both to get it to work as you describe and to get the labels linked to the inputs. It is a little redundant to have the placeholders match the labels, but you can do what you want to with that. You can change the 'xs' back to 'lg' in the grid class names, so they will be more appropriate outside of a small snippet. You may find that you want something in between, such as 'sm', (ex 'col-sm-8') since the classes take effect for the size specified between the dashes and larger.
Also, you know that the width numbers at the end of these bootstrap grid system class names are typically supposed to add up to 12, not 11 for a given screen width specifier, right?
#contactForm label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm" class="col-xs-8">
<label for="inputName" >Name</label>
<input type="text" name="inputName" placeholder="Name" width="100%">
<label for="inputEmail" >Email</label>
<input type="text" name="inputEmail" placeholder="Email" width="100%">
<label for="inputPhone" >Phone</label>
<input type="text" name="inputPhone" placeholder="Phone" width="100%">
<label for="inputMsg" >Message</label>
<textarea rows='5' placeholder='Message' name="inputMsg" > </textarea>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary col-xs-3">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
</div>
Add the following (Although I would recommend adding an id to these divs and styling )
.content-secondary,.content-main{
display:inline-block;
vertical-align:bottom
}
Snippet below
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
.content-secondary,
.content-main {
display: inline-block;
vertical-align: bottom
}
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName"></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail"></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone"></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg">Message</label>
<br>
<textarea rows='5' placeholder='Message'></textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
Use the built in row and column classes:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
</div>
<div class="col-sm-3">
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
</div>
Add float:left to your content-main
.content-main {
.make-lg-column(8);
float:left;
}
https://jsfiddle.net/9Lf16p1c/