I am using css from this Bootsnip and it is working well, however, when I try to add a help block with icon, it does not work as expected.
Help block w/o icon (added following code after input):
<label class="help-block">* Required Field</label>
Help block w/ icon (added following code after input):
<label class="help-block glyphicon glyphicon-info-sign">* Required Field</label>
Inside the css, it does clear the float, so not sure why it is still messing up.
.icon-addon:after { clear: both; }
I figured it out. You are placing the label, right after the input field. This is wrong. You need to place the label after the <div class="icon-addon ... " ... > ... </div> element.
To show you: (JSFiddle)
.center-block {
float: none;
margin-left: auto;
margin-right: auto;
}
.input-group .icon-addon .form-control {
border-radius: 0;
}
.icon-addon {
position: relative;
color: #555;
display: block;
}
.icon-addon:after,
.icon-addon:before {
display: table;
content: " ";
}
.icon-addon:after {
clear: both;
}
.icon-addon.addon-md .glyphicon,
.icon-addon .glyphicon,
.icon-addon.addon-md .fa,
.icon-addon .fa {
position: absolute;
z-index: 2;
left: 10px;
font-size: 14px;
width: 20px;
margin-left: -2.5px;
text-align: center;
padding: 10px 0;
top: 1px
}
.icon-addon.addon-lg .form-control {
line-height: 1.33;
height: 46px;
font-size: 18px;
padding: 10px 16px 10px 40px;
}
.icon-addon.addon-sm .form-control {
height: 30px;
padding: 5px 10px 5px 28px;
font-size: 12px;
line-height: 1.5;
}
.icon-addon.addon-lg .fa,
.icon-addon.addon-lg .glyphicon {
font-size: 18px;
margin-left: 0;
left: 11px;
top: 4px;
}
.icon-addon.addon-md .form-control,
.icon-addon .form-control {
padding-left: 30px;
float: left;
font-weight: normal;
}
.icon-addon.addon-sm .fa,
.icon-addon.addon-sm .glyphicon {
margin-left: 0;
font-size: 12px;
left: 5px;
top: -1px
}
.icon-addon .form-control:focus + .glyphicon,
.icon-addon:hover .glyphicon,
.icon-addon .form-control:focus + .fa,
.icon-addon:hover .fa {
color: #2580db;
}
<!--LIBRARIES USED BY BOOTSNIP:-->
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--REQUIRED LIBRARY USED BY BOOTSNIP:-->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<div class="icon-addon addon-lg">
<input type="text" placeholder="Email" class="form-control" id="email"><label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
<!--HERE:-->
<!--HERE:-->
<div align="left">
<label class="help-block glyphicon glyphicon-info-sign">*<span style="font-family:Arial"> This is a Required Field (align="left")</span></label>
</div>
<!--HERE:-->
<!--HERE:-->
<div class="icon-addon addon-lg">
<input type="text" placeholder="Email" class="form-control" id="email"><label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
<!--HERE:-->
<!--HERE:-->
<div align="center">
<label class="help-block glyphicon glyphicon-info-sign">*<span style="font-family:Arial"> This is a Required Field (align="center")</span></label>
</div>
<!--HERE:-->
<!--HERE:-->
<div class="icon-addon addon-lg">
<input type="text" placeholder="Email" class="form-control" id="email">
<!--NOT HERE:-->
<!--NOT HERE:-->
<!--NOT HERE:-->
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
<!--HERE:-->
<!--HERE:-->
<div align="right">
<label class="help-block glyphicon glyphicon-info-sign">*<span style="font-family:Arial"> This is a Required Field (align="right")</span></label>
</div>
<!--HERE:-->
<!--HERE:-->
</div>
this could help
<label class="help-block"><span class="glyphicon glyphicon-info-sign"></span>* Required Field</label>
Related
I am doing a vue project,but I want to create a form to log in and put an image behind the form.
I tried, but when I put the image behind the form, it did not appear on the page.
What should I do to add a picture behind the form?
Html:Here in this section I wrote HTML code.
<template>
<div>
<div class="signup-form">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<title>Bootstrap Simple Login Form with Blue Background</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form action="/examples/actions/confirmation.php" method="post">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<hr>
<div class="form-group">
<div class="row">
<div class="col-xs-6"><input type="text" class="form-control" name="first_name"
placeholder="First Name" required="required"></div>
<div class="col-xs-6"><input type="text" class="form-control" name="last_name"
placeholder="Last Name" required="required"></div>
</div>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email"
required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password" placeholder="Password" `
required="required">`
</div>
<div class="form-group">
<input type="password" class="form-control" name="confirm_password" placeholder="Confirm
Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the
Terms of Use & Privacy Policy</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg">Sign Up</button>
</div>
</form>
<div class="hint-text">Already have an account? Login here</div>
</div> </div>
</template>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
export default {
data: {
counter: 0
}
};
</script>
Css:Here in this section i wrote Css Code.
<style scoped>
body {
color: #fff;
background: #3598dc;
font-family: 'Roboto', sans-serif;
}
.form-control{
height: 41px;
background: #f2f2f2;
box-shadow: none !important;
border: none;
}
.form-control:focus{
background: #e2e2e2;
}
.form-control, .btn{
border-radius: 3px;
}
.signup-form{
width: 390px;
margin: 30px auto;
}
.signup-form form{
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
.signup-form hr {
margin: 0 -30px 20px;
}
.signup-form .form-group{
margin-bottom: 20px;
}
.signup-form input[type="checkbox"]{
margin-top: 3px;
}
.signup-form .row div:first-child{
padding-right: 10px;
}
.signup-form .row div:last-child{
padding-left: 10px;
}
.signup-form .btn{
font-size: 16px;
font-weight: bold;
background: #3598dc;
border: none;
min-width: 140px;
}
.signup-form .btn:hover, .signup-form .btn:focus{
background: #2389cd !important;
outline: none;
}
.signup-form a{
color: #fff;
text-decoration: underline;
}
.signup-form a:hover{
text-decoration: none;
}
.signup-form form a{
color: #3598dc;
text-decoration: none;
}
.signup-form form a:hover{
text-decoration: underline;
}
.signup-form .hint-text {
padding-bottom: 15px;
text-align: center;
}</style>
You can use CSS' position property to stack an element on top of another. Here is an example.
/** GENERAL STYLES **/
* {
box-sizing: border-box;
}
form {
width: 300px;
margin: 1em auto;
border: 1px solid #eee;
}
form .form-group label,
form .form-group input {
width: 100%;
}
form h2 {
margin: 0 0 1em;
}
/** THE FIXES **/
.relative {
position: relative;
}
form .form-content {
padding: 1em;
position: relative;
}
form .behind-form {
position: absolute;
bottom: 0;
width: 100%;
}
form .behind-form img {
width: 100%;
display: block;
}
<form class="relative">
<div class="behind-form">
<img src="https://pixabay.com/get/52e8d3454e56a914f1dc8460da29317e173edce7545972_640.jpg" />
</div>
<div class="form-content">
<h2>Sign Up</h2>
<p>Please fill in this form to create an account!</p>
<div class="form-group">
<label>Name</label>
<input type="text" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" />
</div>
</div>
</form>
I have mocked up an example below, the first form works great, but I cannot change the markup on these forms or use JS hence trying to work out a CSS method. The CSS I managed to come up with in fiddle works but stuck with what to adjust to get it working for the 2nd example as the label comes before input which I need to work with and only managed to get working with them the other way around so hope this helps.
So guess need to reverse when focus on input for the label before rather than after but this is where I am stuck.
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: white;
}
form input:focus, form textarea:focus {
border-color: #f06d06;
}
form input:focus + label, form textarea:focus + label {
background: #f06d06;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form textarea {
display: block;
resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
form.go-bottom label {
top: 5px;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
.text-danger {
display: none;
}
<form class="go-bottom">
<h2>Label after input</h2>
<div class="form-group">
<span id="billing_address[first_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[first_name]" name="billing_address[first_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[first_name]">First Name<span>*</span></label>
</div>
<div class="form-group">
<span id="billing_address[middle_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[middle_name]" name="billing_address[middle_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[middle_name]">Middle Name<span>*</span></label>
</div>
<div class="form-group">
<span id="billing_address[last_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[last_name]" name="billing_address[last_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[last_name]">Last Name<span>*</span></label>
</div>
</form>
<form class="go-bottom">
<h2>Label after input (need with this markup)</h2>
<div class="form-group">
<label for="billing_address[first_name1]">First Name<span>*</span></label>
<span id="billing_address[first_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[first_name1]" name="billing_address[first_name1]" type="text" class="form-control" value="" validate="true">
</div>
<div class="form-group">
<label for="billing_address[middle_name1]">Middle Name<span>*</span></label>
<span id="billing_address[middle_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[middle_name1]" name="billing_address[middle_name1]" type="text" class="form-control" value="" validate="true">
</div>
<div class="form-group">
<label for="billing_address[last_name1]">Last Name<span>*</span></label>
<span id="billing_address[last_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[last_name1]" name="billing_address[last_name1]" type="text" class="form-control" value="" validate="true">
</div>
</form>
I don't think it's possible to do that in pure CSS, without tweaking the html a little bit. If you're using jQuery you can add this snippet, and if you don't, some native JS should do the job.
$("input[type=text]").focus(function(){
$(this).prev().prev().addClass("active");
}).focusout(function(){
$(this).prev().prev().removeClass("active");
});
* {
box-sizing: border-box;
}
html {
font: 14px/1.4 Sans-Serif;
}
form {
width: 320px;
float: left;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: white;
}
form input:focus, form textarea:focus {
border-color: #f06d06;
}
form input:focus + label, form textarea:focus + label {
background: #f06d06;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
}
form label {
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
}
form textarea {
display: block;
resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
form.go-bottom label {
top: 5px;
bottom: 0;
left: 0;
width: 100%;
z-index: 2;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
.text-danger {
display: none;
}
form label.active {
background: #f06d06;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
top: 100%;
margin-top: -16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="go-bottom">
<h2>Label after input</h2>
<div class="form-group">
<span id="billing_address[first_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[first_name]" name="billing_address[first_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[first_name]">First Name<span>*</span></label>
</div>
<div class="form-group">
<span id="billing_address[middle_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[middle_name]" name="billing_address[middle_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[middle_name]">Middle Name<span>*</span></label>
</div>
<div class="form-group">
<span id="billing_address[last_name].err" class="text-danger pull-right"> </span>
<input id="billing_address[last_name]" name="billing_address[last_name]" type="text" class="form-control" value="" validate="true">
<label for="billing_address[last_name]">Last Name<span>*</span></label>
</div>
</form>
<form class="go-bottom">
<h2>Label after input (need with this markup)</h2>
<div class="form-group">
<label for="billing_address[first_name1]">First Name<span>*</span></label>
<span id="billing_address[first_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[first_name1]" name="billing_address[first_name1]" type="text" class="form-control" value="" validate="true">
</div>
<div class="form-group">
<label for="billing_address[middle_name1]">Middle Name<span>*</span></label>
<span id="billing_address[middle_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[middle_name1]" name="billing_address[middle_name1]" type="text" class="form-control" value="" validate="true">
</div>
<div class="form-group">
<label for="billing_address[last_name1]">Last Name<span>*</span></label>
<span id="billing_address[last_name1].err" class="text-danger pull-right"> </span>
<input id="billing_address[last_name1]" name="billing_address[last_name1]" type="text" class="form-control" value="" validate="true">
</div>
</form>
I have this form. I would like that until 768px width the form is inline, and afterwords the form should be vertical.
I am a little bit in doubt, if I have to set up a breakpoint, or bootstrap has a function that does that? As it is now, the form keeps being inline.
Does anybody knows how I can do that?
HTML
<div class="sign-up">
<p class="sub-header">#Helpers.GetText(CurrentPage, "signupHeaderText", CurrentPage.Parent)</p>
<form id="signupForm">
<div class="form-group">
<label class="sr-only" for="name">#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)</label>
<input type="text" class="form-control" placeholder="#Helpers.GetText(CurrentPage, "signupNameFieldText", CurrentPage.Parent)" id="name" name="name" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="#Helpers.GetText(CurrentPage, "signupEmailFieldText", CurrentPage.Parent)" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">#Helpers.GetText(CurrentPage, "signupCtaButtonText", CurrentPage.Parent)</button>
</form>
</div>
SCSS:
.sign-up {
padding: $grid-gutter-width;
margin-bottom: $grid-gutter-width;
border-radius: 5px;
background-color: $white3;
.form-control {
box-shadow: none;
border-color: $white4;
}
.error {
border: 1px red solid;
}
label {
&#name,
&#email {
&-error {
display: none !important;
}
}
}
.btn {
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
border: none;
width: 100%;
}
}
.signup-wide {
padding-top:15px;
form {
display: flex;
justify-content: space-between;
.form-group {
width: 33%;
height: 40px;
max-width: 200px;
input {
height: 100%;
}
}
.btn {
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
width: 33%;
}
}
}
Bootsrap has system class for this, use <form class="form-inline">
I am currently working on creating a sign up form html/css. I realised that different browsers work differently on the width of inputs. How can i rectify this issue and make sure that my sign up form is compatible with all browsers. My sign up form works perfectly for chrome as it is where i do coding on.
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: auto;
position: relative;
top: 80px;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
height: 350px;
margin: auto;
position: relative;
top: 100px;
border: 1px solid #000;
}
.fname input[type="text"] {
position: relative;
left: 115px;
top: 30px;
padding: 8px;
}
.lname input[type="text"] {
position: relative;
left: 314px;
top: -5.5px;
padding: 8px;
}
.userid input[type="text"] {
position: relative;
left: 115px;
padding: 8px;
top: 10px;
}
.pwd input[type="password"] {
position: relative;
padding: 8px;
left: 115px;
top: 25px;
}
.email input[type="email"] {
position: relative;
padding: 8px;
left: 115px;
top: 40px;
}
.btn button[type="submit"] {
position: relative;
left: 115px;
top: 55px;
padding: 8px;
width: 382px;
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
}
div.btn button[type="submit"]:hover {
background-color: rgb(255, 0, 0);
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="fname">
<label>
<input type="text" placeholder="First Name" name="fname" size="20">
</label>
</div>
<div class="lname">
<label>
<input type="text" placeholder="Last Name" name="lname" size="20">
</label>
</div>
<div class="userid">
<label>
<input type="text" placeholder="Username" name="userid" size="50">
</label>
</div>
<div class="pwd">
<label>
<input type="password" placeholder="Password" name="pwd" size="50">
</label>
</div>
<div class="email">
<label>
<input type="email" placeholder="Email Address" name="email" size="50">
</label>
</div>
<div class="btn">
<button type="submit">Create Account</button>
</div>
</form>
</div>
It's always a good idea to use something like normalize.css or any other CSS reset code (eric meyer css reset is very popular too) to reset CSS across all browsers.
Any browser come with it's defaults values for padding's,margins,widths, heights etc...
I guess it won't be an 100% solution but it will defiantly will take you closer to what you're looking for.
Do not jump to position relative and absolute. If you are new to all this, I can understand it seems the most natural way to go about positioning elements; just using a top and left position and that's that. But this is not how you should do it on the web!
Below you can find how I would do it.
Matan G. is right in pointing out that a CSS reset/normalize is often used, and I do so myself as well. However, before you do that (and considering you're new) it would be wise to take a look at the code that I posted and see if it makes any sense to you. If not, ask.
It is important to note that you should avoid these things when possible:
setting a fixed width to text items such as headings, paragraphs, lists.
using relative/absolute positioning. They are very useful but only when necessary.
using too many divs/classes than actually needed. Don't overcrowd your HTML.
* {box-sizing: border-box;}
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: 80px auto auto;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
margin: 20px auto auto;
border: 1px solid #000;
padding: 20px;
}
label {
display: block;
}
.name::after {
content: "";
display: table;
clear: both;
}
.name label:first-child {
margin-right: 20px;
}
.name label {
width: calc(100% / 2 - 10px);
float: left;
}
input, [type="submit"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
}
[type="submit"] {
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
margin: 0;
}
[type="submit"]:hover {
background-color: red;
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="name">
<label>
<input type="text" placeholder="First Name" name="fname">
</label>
<label>
<input type="text" placeholder="Last Name" name="lname">
</label>
</div>
<label>
<input type="text" placeholder="Username" name="userid">
</label>
<label>
<input type="password" placeholder="Password" name="pwd">
</label>
<label>
<input type="email" placeholder="Email Address" name="email">
</label>
<button type="submit">Create Account</button>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
<style>
.container{
width: 45%;
margin: auto;
}
.form-content{
margin: 40px;
}
.form-content input{
width: 100%;
}
label{
font-weight: bold;
}
input[type=text],[type=email],[type=tel],[type=date],[type=password]{
font-size: 16px;
border-radius: 5px;
background: #D9F1F7;
border: #000000;
padding: 10px;
}
input[type=submit]{
background: #4C63ED;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover{
background: #330EEF;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "container">
<form name="signup" method="get" action="">
<div class="form-content">
<label>First Name : </label>
<input type="text" name="firstname" />
</div>
<div class="form-content">
<label>Last Name : </label>
<input type="text" name="lastname" />
</div>
<div class="form-content">
<label>E-Mail : </label>
<input type="email" name="email" />
</div>
<div class="form-content">
<label>Telephone : </label>
<input type="tel" name="telephone" />
</div>
<div class="form-content">
<label>Date of Birth : </label>
<input type="date" name="dob" />
</div>
<div class="form-content">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
I've found this q&a on stack but both solutions did not work..
How do I center a mailchimp embed form in a twitter bootstrap page?
centering input in form mailchimp
What I think these questions lack is both the code for the form and style code included (see below). How can I center both the content (text) and the div itself as a whole so it's responsively centered on the page?
<link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<center>
<div class="display:block margin:auto "id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</div>
</form>
</div>
</center>
You can see I've attempted the tags as well as altering the class within the form..
Any help is greatly appreciated :3
First - remove center tags and this "class":
class="display:block margin:auto"
Second - you can set input width to 100% and block width to 58%:
#mc_embed_signup input.email {
...
width: 100%;
...
}
#mc_embed_signup form {
...
width: 58%;
margin: auto;
}
Example:
<link href="https://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
#mc_embed_signup label {
text-align: center;
}
#mc_embed_signup input.email {
width: 100%;
}
#mc_embed_signup input.button {
margin: auto;
}
#mc_embed_signup form {
width: 58%;
margin: auto;
}
</style>
<div class="display:block margin:auto" id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
Also, this looks like ugly hack:
style="position: absolute; left: -5000px;"
Why u don't use hidden input or "display: none"? :)
You are using bootstrap. So how about wrapping that code inside the bootstrap's grid system.
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<center>
<div class="display:block margin:auto " id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label><br />
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
</center>
</div>
<div class="col-md-3"></div>
</div>
</div>
This article may help: Customize Your Own MailChimp E-Mail Newsletter Signup Form.
/** MailChimp Styles **/
#mc_embed_signup {
background: #fff;
clear: left;
font: 14px Helvetica, Arial, sans-serif;
text-align: center;
width: 350px;
margin: 0 auto;
}
/* MailChimp Form Embed Code - Slim - 08/17/2011 */
#mc_embed_signup form {
display: block;
position: relative;
text-align: center;
padding: 10px 0 10px 3%;
}
#mc_embed_signup h2 {
font-weight: bold;
padding: 0;
margin: 15px 0;
font-size: 1.4em;
}
#mc_embed_signup input {
border: 1px solid #ababab;
-webkit-appearance: none;
}
#mc_embed_signup input[type=checkbox] {
-webkit-appearance: checkbox;
}
#mc_embed_signup input[type=radio] {
-webkit-appearance: radio;
}
#mc_embed_signup input:focus {
border-color: #799877;
}
#mc_embed_signup .button {
display: block;
position: relative;
background-color: #266080;
padding: 0;
margin: 0 auto;
border: 0 none;
border-radius: 6px;
color: #fff;
cursor: pointer;
font-size: 14px;
width: 140px;
height: 36px;
line-height: 36px;
font-weight: bold;
text-align: center;
text-decoration: none;
vertical-align: top;
}
#mc_embed_signup .button:hover {
background-color: #f00;
}
#mc_embed_signup .button:active {
top: 2px;
border-bottom-width: 1px;
}
#mc_embed_signup .small-meta {
font-size: 11px;
}
#mc_embed_signup .nowrap {
white-space: nowrap;
}
#mc_embed_signup .clear {
clear: none;
display: inline;
}
#mc_embed_signup label {
display: block;
font-size: 13px;
text-transform: uppercase;
padding-bottom: 7px;
color: #616161;
font-weight: bold;
}
#mc_embed_signup input.email {
display: block;
padding: 8px 4px;
margin: 0 4% 10px 0;
text-indent: 5px;
color: #818181;
font-size: 1.0em;
background: #fff;
font-weight: bold;
width: 100%;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#mc_embed_signup input.email:focus {
color: #666;
}
#mc_embed_signup div#mce-responses {
float: left;
top: -1.4em;
padding: 0em .5em 0em .5em;
overflow: hidden;
width: 90%;
margin: 0 5%;
clear: both;
}
#mc_embed_signup div.response {
margin: 1em 0;
padding: 1em .5em .5em 0;
font-weight: bold;
float: left;
top: -1.5em;
z-index: 1;
width: 80%;
}
#mc_embed_signup #mce-error-response {
display: none;
}
#mc_embed_signup #mce-success-response {
color: #529214;
display: none;
}
#mc_embed_signup label.error {
display: block;
float: none;
width: auto;
margin-left: 1.05em;
text-align: left;
padding: .5em 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div id="mc_embed_signup">
<form action="//twitter.us11.list-manage.com/subscribe/post?u=b59cd34816a376a0c58945aee&id=2e74fec4e5" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b59cd34816a376a0c58945aee_2e74fec4e5" tabindex="-1" value="">
</div>
<div class="clear">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</div>
</form>
</div>
</div>
I only got it to work when I changed your code in the CSS stylesheet to:
#mc_embed_signup {
border-radius: 12%;
margin: auto;
padding: 15px;
text-align: center;
width: 58%;
}