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>
Related
i have 2 field: name and phone number.
In laptop, display same line but in Mobile view display 2 rows
How can 2 fields input (name and Phone) display same line in Mobile like Laptop?
My current code: https://jsfiddle.net/bvotcode/eLh36azt/4/
<body>
<form action="/action_page.php" target="_blank">
<div class="w3-center w3-padding-16" style="margin-top:0px">
<div class="w3-row">
<form action="/action_page.php" target="_blank">
<div class="w3-row-padding" style="margin:0 -16px 8px -16px">
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="w3-half">
<input class="w3-input w3-border" type="text" placeholder="phone number" name="handynumber" required/>
</div>
</div>
<button class="w3-button w3-green w3-section w3-center" type="submit"> Submit</button>
</form>
</div>
</div>
</body>
Thank you
label {
display: block;
}
#media screen and (min-width: 769px) {
.fields {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
<form action="/action_page.php">
<div class="fields">
<label>
first last name
<input type="text" placeholder="first last name" name="hovaten" required/>
</label>
<label>
Phone number
<input type="text" placeholder="phone number" name="handynumber" required/>
</label>
</div>
<button type="submit"> Submit</button>
</form>
Try using this bootstrap code:
<div class="row">
<div class="col">
<input type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="col">
<input type="text" placeholder="phone number" name="handynumber" required/>
</div>
</div>
The main part of your example could be:
<div class="w3-row">
<div class="w3-col" style="width:50%;padding:2px">
<input class="w3-input w3-border" type="text" placeholder="first last name" name ="hovaten" required/>
</div>
<div class="w3-col" style="width:50%;padding:2px">
<input class="w3-input w3-border" type="text" placeholder="phone number" name="handynumber" required/>
</div>
</div>
In this way, each field will always be half the width of the screen.
Saludos,
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>
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>
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;
}
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/