I've created a contact form in figma that I'm trying to recreate using Flexbox. The form consists of 4 inputs which are "Name", "Phone", "Email" and "Message.
The name field is 828px wide. Phone and email fields are 406px wide.
I want the phone and email fields on the same row with 16px margin between them. On the next row will be the message field that is 828px wide.
The form is inside a container that is 828px wide with display set to flex.
How can I put the phone and email on the same row? I've attached a screen shot to show how my form currently looks. P.S I know there's redundent code in terms of styling. I'll clean it up later.
.form {
margin: 75px auto;
max-width: 828px;
display: flex;
}
.home-name {
background: #ffffff;
border: 1px solid #eaeaea;
width: 828px;
height: 38px;
padding: 14px auto;
}
.home-phone {
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
width: 406px;
height: 38px;
}
.home-email {
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
width: 406px;
height: 38px;
}
.home-message {
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
width: 828px;
height: 167px;
}
<html>
<head>
<body>
<div class="form">
<div>
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" required>
</div>
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" required>
</div>
<div class="message-form">
<textarea placeholder="Message" class="home-message" required></textarea>
</div>
<button class="home-message-contact" type="submit">Submit</button>
</form>
</div>
</html>
</head>
</body>
Please check the code below for details change. I added flex-wrap: wrap; and change max-width: 828px; to width: 828px; on class .form. I cleaned up the HTML code by removing one unnecessary <div>.
.form {
margin: 75px auto;
width: 828px;
display: flex;
flex-wrap: wrap;
}
.home-name {
background: #ffffff;
border: 1px solid #eaeaea;
width: 828px;
height: 38px;
padding: 14px auto;
}
.home-phone {
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
width: 406px;
height: 38px;
}
.home-email {
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
width: 406px;
height: 38px;
}
.home-message {
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
width: 828px;
height: 167px;
}
<div class="form">
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" required>
</div>
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" required>
</div>
<div class="message-form">
<textarea placeholder="Message" class="home-message" required></textarea>
</div>
<button class="home-message-contact" type="submit">Submit</button>
</div>
just add these code to your style
.phone-form ,.email-form{
float:left;
}
.email-form{
margin-left: 12px;
}
Related
I have created a Contact Form, everything looks somewhat fine, the way I want it but having issues. The Form is not being responsive when re-sizing/scale the browser down. I have messed around, I think a little too much with the code to the point that I have no clue what i'm doing or have done. I'm about to lose my mind!
When I re-size the browser, the labels go outside of the container it's in. The submit button is also not centering even when I try margin: 0 auto;
I will post the HTML & CSS along with my CodePen below. Thanks for any help!
CodePen https://codepen.io/vCoCo/pen/MLReKK?editors=1100
HTML
<section id="contact">
<div class="container">
<form id="contactForm" action="contactform.php" method="post">
<h2> Get In Touch! </h2>
<div class="details">
<label for="firstName"> First Name </label>
<input type="text" id="firstName" name="firstName" placeholder="Enter First Name..." required>
</div>
<div class="details">
<label for="lastName"> Last Name </label>
<input type="text" id="lastName" name="lastName" placeholder="Enter Last Name..." required>
</div>
<div class="details">
<label for="email"> Email </label>
<input type="email" id="email" name="email" placeholder="Enter Email..." required>
</div>
<div class="details">
<label for="textMessage"> Message </label>
<textarea id="textMessage" name="textMessage" placeholder="Enter Message In Here..." required></textarea>
</div>
<input type="submit" value="Submit Message">
</form>
</div>
</section>
CSS
body{
background-color: grey;
}
/**** GLOBAL ****/
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
border: 2px solid white;
}
/********** CONTACT FORM **********/
#contact{
max-width: 80%;
margin: 100px auto;
border: 1px dashed orange;
}
#contact .container{
width: 500px;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
#contactForm{
margin: 0 auto;
}
#contactForm h2{
text-align: center;
margin-bottom: 10px;
}
.details{
max-width: 500px;
margin: 15px;
padding: 10px;
border: solid 1px #ff0000;
overflow: hidden;
}
label{
margin-bottom: 10px;
}
input[type=text], input[type=email]{
width: 400px;
padding: 12px 20px;
margin: 8px 0;
border: 2px solid;
border-radius: 4px;
}
input[type=submit]{
width: 200px;
padding: 10px 20px;
color: #fff;
background-color: #000;
border: 2px solid #fff;
border-radius: 10px;
font-family: inherit;
cursor: pointer;
}
textarea{
width: 300px;
height: 200px;
resize: none;
font-size: 16px;
}
#contactForm textarea::placeholder{
font-size: 16px;
}
You have a problem with the width of several elements, you're setting fixed widths and it repercusses on mobile resolutions, also with the overflow of the container it make the childs to hide inside the parent.
A good solution for a responsive mode is to set the widths to 100% of the parent and setting a max width for greater resolutions.
I made a fork of your Codepen.
Important: most of the problem also is, make sure to set the box-sizing of global elements. i.e. * { box-sizing: border-box;}
Hope this helps.
Codepen https://codepen.io/devlumberjack/pen/rPbMzr?editors=1100
Code: https://codepen.io/sshiling/pen/LqxLJg
In the first case, border-box works as needed.
In the second case, it doesn't and my input fields drop out of the form.
When I remove padding for input fields they don't drop out.
But I need padding for each of them.
.modal-search__input,
.modal-login__email,
.modal-login__password {
font-size: 14px;
line-height: 24px;
}
.modal-search__form {
width: 345px;
height: 85px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 0 10px;
}
.modal-search__input {
margin: 19px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
.modal-login__form {
width: 275px;
height: 215px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
<section class="modal modal-search visually-hidden">
<form action="" class="modal-search__form">
<p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
</form>
</section>
<section class="modal modal-login visually-hidden">
<form action="#" method="post" class="form modal-login__form">
<p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
<p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
<button class="button modal-login__button">Login</button>
<p><a class="modal-login__link" href="#">Forgot password?</a></p>
<p><a class="modal-login__link" href="#">Registration</a></p>
</form>
</section>
input with type search is getting the box-sizing: border-box by default, while other types don't. You have to specify the border box for other types.
.modal-search__input,
.modal-login__email,
.modal-login__password {
font-size: 14px;
line-height: 24px;
}
.modal-search__form {
width: 345px;
height: 85px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 0 10px;
}
.modal-search__input {
margin: 19px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
.modal-login__form {
width: 275px;
height: 215px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
box-sizing: border-box;
}
<section class="modal modal-search visually-hidden">
<form action="" class="modal-search__form">
<p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
</form>
</section>
<section class="modal modal-login visually-hidden">
<form action="#" method="post" class="form modal-login__form">
<p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required></p>
<p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
<button class="button modal-login__button">Login</button>
<p><a class="modal-login__link" href="#">Forgot password?</a></p>
<p><a class="modal-login__link" href="#">Registration</a></p>
</form>
</section>
use this
* {
box-sizing: border-box;
}
You should give box-sizing style to modal-login__email and modal-login__password instead of modal-login__form
.modal-login__form {
width: 275px;
height: 215px;
background-color: #f8f7f4;
border-radius: 5px;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
box-sizing: border-box;
}
Try this one I think this is use full for you first of all for you should have to give the height: auto; to .modal-login__form class your content will be not overflowing from the section and for box-sizing: border-box; its working in .modal-login__form class if you want to cover the email and password input you have to give the box-sizing: border-box; to .modal-login__email and .modal-login__password
class.
.modal-search__input,
.modal-login__email,
.modal-login__password {
font-size: 14px;
line-height: 24px;
}
.modal-search__form {
width: 345px;
height: 85px;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 0 10px;
}
.modal-search__input {
margin: 19px 0;
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
}
.modal-login__form {
width: 275px;
height: auto;
background-color: #f8f7f4;
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
margin: 20px 0;
}
.modal-login__email,
.modal-login__password {
padding: 10px;
border-radius: 5px;
width: 100%;
border: 1px solid #d3d3d2;
box-sizing: border-box;
}
<section class="modal modal-search visually-hidden">
<form action="" class="modal-search__form">
<p><input class="modal-search__input" type="search" name="q" placeholder="Search" id="modal-search__input-field"></p>
</form>
</section>
<section class="modal modal-login visually-hidden">
<form action="#" method="post" class="form modal-login__form">
<p><input type="email" value="" placeholder="Email" class="modal-login__email" id="modal-login__email-field" required> </p>
<p><input class="modal-login__password" type="password" value="" placeholder="Password" id="modal-login__password-field" required></p>
<button class="button modal-login__button">Login</button>
<p><a class="modal-login__link" href="#">Forgot password</a></p>
<p><a class="modal-login__link" href="#">Registration</a></p>
</form>
</section>
But why it so? In the first case, it works without border-box for input field and in the second case, it doesn't.
Because In the first case,The type of input box is search.Different types of input boxes result in
I'm styling a form for a site and I need it to look like this -
My coded version, so far, looks like this -
The name & email sections for some reason won't size properly and there seems to be padding or margin properties somewhere which I can't seem to override. Here's my code as it stands -
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
.name {
float: left;
}
input[type=text],
input[type=email] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
input[type=subject] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
textarea {
resize: vertical;
font-size: 10px;
width: 100%;
background: #F0F0F0;
height: 100px;
}
input[type=submit] {
background: #00bfff;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
}
<div class="six columns">
<form>
<fieldset>
<div class="name">
<input type="text" required placeholder="NAME">
</div>
<div class="name">
<input type="email" required placeholder="EMAIL">
</div>
<div>
<input type="subject" placeholder="SUBJECT">
</div>
<div>
<textarea placeholder="MESSAGE..."></textarea>
</div>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
UPDATE - Latest version.
I made a bunch of tweaks and kind of last track as I went, so I hope you're able to read through this and figure it out. If not, please feel free to ask questions!
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
fieldset {
border: none;
padding: 0;
margin: 0;
display: flex;
}
div.row {
display: flex;
width: 100%;
}
div.row input {
margin-left: 5px;
}
div.row input:first-child {
margin-left: 0;
}
input[type=text],
input[type=email] {
background: #E8E8E8;
font-size: 10px;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin-bottom: 5px;
padding: 6px 12px;
}
textarea {
resize: none;
font-size: 10px;
background: #E8E8E8;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 6px 12px;
margin-bottom: 5px;
}
input[type=submit] {
background: #1ba4dd;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
padding: 8px 0;
}
input[type=submit]:hover {
background: #00bfff;
}
<div class="six columns">
<form>
<fieldset>
<div class="row">
<input name="name" type="text" required placeholder="NAME">
<input name="email" type="email" required placeholder="EMAIL">
</div>
<input name="subject" type="text" placeholder="SUBJECT">
<textarea rows="8" placeholder="MESSAGE..."></textarea>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
I'm trying to put those two buttons at the bottom but the vertical-align:bottom don't seem to have any effects.
Both blocks are in a class "login-card" and the blue stuff are buttons/submit inside this class.
Here is my css :
.login-card {
padding: 40px;
width: 400px;
height: auto;
background-color: #F7F7F7;
margin: 20px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.login-card input[type=text], input[type=password], input[type=email], inputs {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=submit], input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
display: table-cell;
vertical-align: bottom;
}
Am i missing something obvious ?
EDIT, added Html :
<div class="col-sm-6">
<div class="login-card" id="firstCard">
<h1>Fill the Wheel</h1>
<form action="javascript:void(0);" name="members" onsubmit="rollIt()">
<div id="dynamicInput">
<input class="inputs" type="text" name="input1" placeholder='Type name' required>
<input class="inputs" type="text" name="input2" placeholder='Type name' required>
<input class="inputs" type="text" name="input3" placeholder='Type name' required>
</div>
<input type="button" id="addInput" class="login login-submit" value="Add a member">
<input type="submit" id="rollWheel" name="login" class="login login-submit" value="Roll the wheel!">
</form>
</div>
</div>
Your buttons are at the bottom of the form, their parent. You need to take the padding-bottom off of login-card or something like that to give the buttons room to move down.
Also, here is an answer to your problem with the right box
<div class="wrapper">
<button></button>
<button></button>
</div>
.logincard:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.wrapper {
display: inline-block;
vertical-align: bottom;
}
I am creating a registration form and am wondering how can I move the whole form to the center of the page? right now its all on the left side of the container, I want it to look a bit something like this: https://id2.s.nfl.com/fans/register?returnTo=http%3A%2F%2Fweeklypickem.fantasy.nfl.com%2F
#Regcontainer {
width: 1200px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> </h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label>FIRST NAME</label>
<input type="text" name="FName" />
<label>LAST NAME</label>
<input type="text" name="SNAME" />
<br/>
<label>EMAIL ADDRESS</label> <input id="email" name="email" type="text" />
<BR/>
<label>CREATE YOUR USERNAME</label> <input name="uname" type="text" /> <br/>
<label>CREATE PASSWORD</label> <input name="pass" type="password" />
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Here is the solution I came up with... but what does it do?
#Registercontainer needs to be on the center of the page. Meaning, your fixed with of 1200px is not going to work too well. I took the approach of reducing the size of your from container to give a better look and feel like this:
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
/* ... your other properties here ... */
}
Another note, your <label> needs the for attribute as specified in this article.
Let me know if you have any questions, FYI there are many ways to make this work for you.
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
padding: 15px;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> Register With NackStack</h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label for="fname">FIRST NAME</label>
<input type="text" name="FName" id="fname" />
<br/>
<label for="sname">LAST NAME</label>
<input type="text" name="SNAME" id="sname" />
<br/>
<label for="email">EMAIL ADDRESS</label>
<input id="email" name="email" type="text" />
<br/>
<label for="uname">CREATE YOUR USERNAME</label>
<input name="uname" type="text" id="uname" />
<br/>
<label for="password">CREATE PASSWORD</label>
<input name="pass" type="password" id="password"/>
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Add margin:auto and a fixed width to the parent <div>. Example:
<div id="Registercontainer" style="margin-left:auto;margin-right:auto;width:250px">
Fiddle:
https://jsfiddle.net/mwatz122/g9ay26x3/
#Registercontainer {
text-align: center;
}
Please try this. It might help.
Put your form within a <div> like this:
<div align="center">
<!-- insert code here -->
</div>
Then in the CSS, add
form {
text-align: left;
}