I have a form validation using the html5, but when the form is inside a certain div, the validation doesnt work.
The div:
div class="slide story" id="slide-6" data-slide="6">
...
</div>
If the form is out of this div it works fine! But when this div surround the form the validation doens't work.
The Css:
#slide-6 {
background-color: #00387F;
color: #e4e6e5;
padding-bottom: 350px;
padding-top: 90px;
}
.contact-info .contact-content{
margin-bottom: 30px;
}
.contact-info p{
margin-bottom: 20px;
}
.contact-info p i{
font-size: 16px;
margin-right: 10px;
}
.contact-form{}
.contact-form input[type="text"],
.contact-form input[type="email"]{
border: 1px solid #E8E8E8;
padding: 8px 14px;
width: 100%;
margin-bottom: 20px;
}
.contact-form textarea{
border: 1px solid #E8E8E8;
padding: 8px 14px;
width: 100%;
margin-bottom: 20px;
}
#media (max-width: 767px) {
#slide-6 {
background-image: none;
}
}
#slide-6 .line-row .hr {
background-color: #FFFFFF;
color: #FFFFFF;
}
#slide-6 a {
color: inherit;
outline: none;
text-decoration: none;
}
#media (max-width: 767px) {
.with-hover-text{
margin-bottom: 2em;
margin-top: 1em;
}
}
#contact-row-4 {
padding-top: 125px;
}
#contact-row-4 .col-12 {
height: 175px;
overflow: hidden;
padding-top: 20px;
transition: all ease-in .5s;
}
#contact-row-4 img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#contact-row-4 .col-12:hover {
height: 175px;
padding-top: 0;
}
#contact-row-4 .col-12 .hover-text {
display: none;
font-size: 20px;
}
The form:
<div class="slide story" id="slide-6" data-slide="6">
<div class="col-sm-7 col-sm-offset-1">
<form action="php/send-contact.php" class="contact-form" name="contact-form" method="post">
<div class="row">
<div class="col-sm-6">
<input type="text" name="name" required="required" placeholder="Name*">
</div>
<div class="col-sm-6">
<input type="email" name="email" required="required" placeholder="Email*">
</div>
<div class="col-sm-6">
<input type="text" name="subject" placeholder="Subject">
</div>
<div class="col-sm-6">
<input type="text" name="website" placeholder="Website">
</div>
<div class="col-sm-12">
<textarea name="message" required="required" cols="30" rows="7" placeholder="Message*"></textarea>
</div>
<div class="col-sm-12">
<input type="submit" name="submit" value="Send Message" class="btn btn-send">
</div>
</div>
</form>
</div>
</div>
Can you please help me?
Related
Im building a website that is like an airport booking's website
it has this table
i don't know how can I style it as shown in the photo
this is what I did
<div className="section>">
<div className="content">
<div className="container">
<div className="row">
<div className="planner">
<form>
<div className="checkbox">
<div className="row">
<label>
<input
className="checkbox-round"
type="checkbox"
defaultChecked={checked}
onChange={() => setChecked(!checked)}
/>
Türkiye'den Gönder
</label>
</div>
<label>
<input
className="checkbox-round"
type="checkbox"
defaultChecked={!checked}
onChange={() => setChecked(!checked)}
/>
Türkiye'ye Getir
</label>
</div>
<div className="form">
<div className="row">
<label htmlFor="">Kurye Taşıması</label>
<label> Nereye</label>
</div>
<div className="row">
<select>
<option value="">Almanya</option>
<option value=""></option>
</select>
</div>
<div className="labels">
<div className="inputs">
<label>AĞRILIK</label>
<input type="weight" placeholder="KG" />
<label>UZUNLUK</label>
<input type="height" placeholder="CM" />
<label>CENSLIK</label>
<input type="height" placeholder="CM" />
<label> YUKSELIK</label>
<input type="height" placeholder="CM" />
</div>
</div>
<div className="row">
<div className="total">
<h2>ODENECEK TUTAR</h2>
</div>
<button>DEVAM ET</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
and this is the CSS file
.checkbox{
margin: 0px 5px 0px 0px;
padding: 10px;
align-items: center;
justify-content: center;
}
.checkbox-round {
display: inline-block;
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
body{
overflow: hidden;
background-color: #2a3541 !important;
}
.dot{
color: rgb(236, 5, 5);
}
.container{
max-width: 100%;
margin: 0;
padding: 0;
background-color: #2a3541;
} .planner{
margin: 22px 200px 20px 20px !important;
border:2px #ddd;
border-radius:10px;
background-color: #f1f1f1;
padding: 1rem;
margin: 0;
max-width: 100%;
}
.row{
float: right;
width: 40%;
display: inline-flex;
flex-direction: row;
}
.inputs{
display: inline;
max-height:100%;
max-width: 100%;
margin: 0;
padding: 0;
border: none;
background-color: #f1f1f1;
border-radius: 10px;
color: #2a3541;
}
.labels{
display: block;
}
div label{
display:block;
}
so basically, what I can't figure out is how to put the inputs beside each other just like the given photo with saving the positions of other divs
I have a quick question. How can I move my login form div to the left and have a vertical separator in the center of the page and still be able to place content on the right side of the page as well? What I thought of doing is using display: inline but when I use display: inline in my wrapper div it ruins the setup of the page. Thanks!
Code
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
body {
background-color: #ced4da;
}
.wrapper {
height: 100vh;
position: relative;
background-color: red;
}
.login-form {
background-color: green;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
<div class="splitter"></div>
</div>
</body>
Relatively simple using Flexbox, we don't set a flex value on the div.leftside so it's width stays dependent on the content, the splitter can be represented by a border, however having it being a separate element opens more styling possibilities
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
.main {
display: flex;
height: 100vh;
}
.rightSide {
flex: 1 0 0%;
background: #7e7eff;
}
.leftSide {
background: #262658;
padding: 0 20px;
display: flex;
align-items: center;
}
.splitter {
background: grey;
width: 10px;
}
.login-form {
background-color: #1d1f20;
border: 1px solid;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<div class="main">
<div class="leftSide">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
<div class="splitter"></div>
<div class="rightSide">
</div>
</div>
Same can be achieved using CSS Grid
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
.main {
display: grid;
height: 100vh;
grid-template-columns: auto auto 1fr;
}
.rightSide {
background: #7e7eff;
}
.leftSide {
background: #262658;
padding: 0 20px;
display: flex;
align-items: center;
}
.splitter {
background: grey;
width: 10px;
}
.login-form {
background-color: #1d1f20;
border: 1px solid;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
width: 250px;
padding-left: 50px;
color: grey;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
<div class="main">
<div class="leftSide">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
</div>
<div class="splitter"></div>
<div class="rightSide">
</div>
</div>
EDIT :
The way we align stuff inside a flexed container is : align-self on the flex items or aling-items on the flexed container, Now since flexbox only goes in one direction either vertically or horizontally, we change that using flex-direction property, we put one vertically and align the items as we like, then put another one horizontally and align the items as we like.
I tried to make my own example to make it somewhat clean ?
It's better if you would find a course about flexbox, google it or look for it on youtube (which where i learned everything i know)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #1d1f20;
color: #FFF;
}
.main {
height: 100vh;
background-color: pink;
display: flex;
}
.main>.left {
flex: 1;
display: flex;
background: brown;
}
.main>.left>.form-wrapper {
flex: 1;
background: orange;
padding: 10px;
align-self: center;
display: flex;
flex-direction: column;
}
.main>.left>.form-wrapper>form {
background: #1d1f20;
padding: 10px;
width: 200px;
align-self: flex-end;
}
.main>.left>.form-wrapper>form>input {
margin-bottom: 5px;
width: 100%;
}
.main>.split {
width: 5px;
background: #00ff74;
}
.main>.right {
flex: 1;
background: purple;
display: flex;
}
.main>.right>.welcome {
flex: 1;
background: #2d162d;
align-self: center;
display: flex;
flex-direction: column;
}
.main>.right>.welcome>h2 {
background: #9a7d9a;
align-self: center;
}
<div class="main">
<div class="left">
<div class="form-wrapper">
<form>
<input type="text" placeholder="Name" name="">
<input type="text" placeholder="Email" name="">
<input type="button" value="Done !" name="">
</form>
</div>
</div>
<div class="split"></div>
<div class="right">
<div class="welcome">
<h2>Welcome !</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>
</div>
</div>
I used flex to create what you required. You will have to check the new CSS and HTML(separator and right-side part) to completely understand what I did.
* {
margin: 0;
padding: 0;
}
*:focus {
outline: none;
}
::placeholder {
color: grey;
}
body {
background-color: #ced4da;
}
.wrapper {
height: 100vh;
position: relative;
background-color: red;
display: flex;
justify-content: space-around;
}
.wrapper .login-form,
.wrapper .right-side {
width: 45%;
}
.login-form {
background-color: green;
padding: 10px;
}
.email-input-field,
.password-input-field,
.submit-button {
display: block;
}
input[type="email"],
input[type="password"] {
border: none;
background: white;
height: 40px;
font-size: 12px;
margin-bottom: 8px;
color: grey;
width: 100%;
}
input[type="submit"] {
border: none;
background-color: #3DBB96;
height: 40px;
width: 100%;
font-size: 15px;
font-weight: lighter;
color: white;
}
.separator {
width: 0px;
border: 2px solid black;
}
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/Login.css">
</head>
<body>
<div class="wrapper">
<div class="login-form">
<form action="Login.php" method="POST">
<div class="email-input-field">
<input type="email" name="emailPost" placeholder="Email" required>
</div>
<div class="password-input-field">
<input type="password" name="passwordPost" placeholder="Password" required>
</div>
<div class="submit-button">
<input type="submit" value="Login">
</div>
</form>
</div>
<div class="separator"></div>
<div class="right-side">Right side content</div>
</div>
</body>
You should probably look into Flexbox or other options. W3 has a couple of ways to setup a two column layout in their howto article: https://www.w3schools.com/howto/howto_css_two_columns.asp
Also checkout the complete guide to flexbox from css-tricks
Here I made two simple input fields, but when I zoom in and zoom out on the page (Ctrl + Mouse wheel) somehow the input fields change places, input goes down and up, why it is doing this? How to have them at the same place whether I zoom in or out?
body {
width: 870px;
}
#col3 {
width: 400px;
float: left;
/*background-color:#383838;*/
margin: 20px 10px 10px 30px;
}
form {
width: 380px;
margin: auto;
padding: 5px;
border: solid 1px white;
}
fieldset {
margin: auto;
border: solid 1px #E37222;
padding-left: 19px;
padding-top: 15px;
background-color: #EEEEDD;
}
label {
display: block;
width: 70px;
float: left;
margin-left: 10px;
}
span {
margin-left: -16px;
}
legend {
background-color: #E37222;
color: white;
}
input.tt {
outline: 1px solid #909090;
}
.tt {
margin-top: 8px;
}
<div id="col3">
<form>
<fieldset>
<legend>eeeee</legend>
<label for="name">
<span>rrr:</span>
</label>
<input class="tt" type="text" size="34" />
<br />
<label class="tt" for="email">
<span>ttt:</span>
</label>
<input class="tt" type="text" size="34" />
</fieldset>
</form>
</div>
..........................
Remove float:left for <label>
label{
display:block;
width:70px;
margin-left:10px;
}
Try with This
.youclassname{
display:flex;
}
<div class="yourclassname">
<label for="name"><span>rrrrrr rrrrrr:</span></label>
<input class="tt type="text" size="34" />
</div>
Either change your markup a little like that, or use flexbox/grid.
<style>
body{
width:870px;
}
#col3{
width:400px;
float:left;
/*background-color:#383838;*/
margin:20px 10px 10px 30px;
}
form{
width:380px;
margin:auto;
padding:5px;
border:solid 1px white;
}
fieldset{
margin:auto;
border:solid 1px #E37222;
padding-left: 19px;
padding-top: 15px;
background-color: #EEEEDD;
}
label{
display:block;
width: 100%;
}
label div{
padding-right: 5px;
width: 68px;
display: inline-block;
}
legend{
background-color:#E37222;
color:white;
}
input.tt{
outline: 1px solid #909090;
}
.tt{
margin-top:8px;
}
</style>
</head>
<body>
<div id="col3">
<form ">
<fieldset >
<legend>eeeee</legend>
<label for="name"><div>rrr:</div><input class="tt type="text" size="34" /> </label>
<br/>
<label class="tt"for="email"><div>ttt:</div><input class="tt" type="text" size="34" /></label>
</fieldset>
</form>
</div>
</body>
I need to do mobile version of this page.(code below) But I receive the result such as on screenshot see my mobile version What i have do?
P.S. if not difficult couple of words about the html structure and css (I just started to learn how to make websites)
.row-wrap-left,
.row-wrap-right,
.row-wrap-bottom,
.field-wrap {
float: none;
width: 100%;
}
.request-input {
width: 90%;
}
textarea {
width: 98%;
}
.button-submit {
float: none;
width: 100%;
margin-bottom: 20px;
}
.button-cancel {
float: none;
width: 100%;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
body {
background: #282828;
font-family: 'Montserrat', sans-serif;
}
.container {
background: #27292b;
max-width: 636px;
}
.request {
text-align: left;
position: relative;
overflow: hidden;
}
.wrapper {
padding: 36px 85px 60px 85px;
}
.row-wrap-left {
float: left;
width: 50%;
overflow: hidden;
}
.row-wrap-right {
float: right;
width: 50%;
overflow: hidden;
}
.row-wrap-right .field-wrap {
float: right;
}
.row-wrap-bottom {
float: left;
width: 100%;
overflow: hidden;
}
.field-wrap {
position: relative;
}
form {
overflow: hidden;
}
.request-head h1 {
font-size: 29px;
text-transform: uppercase;
color: #fff;
padding-bottom: 25px;
border-bottom: solid 1px #47494b;
margin-bottom: 36px;
}
.request-input {
width: 195px;
height: 12px;
font-size: 18px;
padding: 14px;
background: none;
border: 1px solid #47494b;
border-radius: 2px;
margin-top: 17px;
margin-bottom: 44px;
}
.request-country,
.request-code {
width: 33px;
}
.request-number {
width: 58px;
}
.request-input:focus,
textarea:focus {
outline: none;
color: #fff;
border-color: #fff;
}
.request-input:focus ~ label,
.request-input:focus + span,
textarea:focus + label {
color: #fff;
}
.field-wrap label {
color: #434546;
font-size: 13px;
display: block;
position: absolute;
top: 0;
}
.field-wrap .icon {
position: absolute;
top: 30px;
margin-left: -40px;
padding-left: 10px;
color: #434546;
}
textarea {
width: 460px;
height: 150px;
font-size: 18px;
background: none;
border: 1px solid #47494b;
border-radius: 2px;
margin-top: 17px;
margin-bottom: 28px;
}
p {
font-size: 13px;
color: #434546;
}
a {
font-size: 13px;
text-decoration: none;
color: #fff;
}
.agreement {
margin-bottom: 30px;
}
.button-submit {
background: #5d9f81;
color: #fff;
border: none;
padding: 14px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
margin-right: 18px;
}
.button-cancel {
background: none;
color: #434546;
border: 1px solid #47494b;
padding: 14px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
border-radius: 2px;
}
.button-submit:hover {
background: #4c876c;
color: #fff;
cursor: pointer;
}
.button-cancel:hover {
background: #5d9f81;
color: #fff;
cursor: pointer;
}
input:focus:invalid,
textarea:focus:invalid {
border: 1px solid #e7635e;
}
input:focus:invalid ~ label {
color: #da5f5b;
}
input:focus:invalid + span {
color: #da5f5b;
}
textarea:focus:invalid + label {
color: #da5f5b;
}
input:required:valid,
textarea:required:valid {
border: 1px solid #6abd97;
color: #6abd97;
}
input:required:valid + label,
textarea:required:valid + label{
color: #6abd97;
}
input:required:valid ~ label {
color: #6abd97;
}
input:required:valid + span {
color: #6abd97;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register form</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/small.css" media="(max-width:600px)">
</head>
<body>
<div class="container clearfix">
<div class="wrapper clearfix">
<div class="request clearfix">
<div class="request-head">
<h1>Request a demo</h1>
</div>
<form action="/" method="post">
<div class="row-wrap-left">
<div class="field-wrap">
<input type="text" name="form_data[first_name]" id="fname" class="request-input request-fname" required autocomplete="off">
<label for="fname">First Name</label>
</div>
<div class="field-wrap">
<input type="email" name="form_data[email]" id="email" class="request-input request-email" required autocomplete="off">
<label for="email">Email *</label>
</div>
<div class="field-wrap">
<input type="text" name="form_data[school_organization]" id="school-org" class="request-input request-school" required autocomplete="off">
<span class="icon"><i class="fa fa-search"></i></span>
<label for="school-org">School/Organization *</label>
</div>
</div>
<div class="row-wrap-right">
<div class="field-wrap">
<input type="text" name="form_data[last_name]" id="lname" class="request-input request-lname" required autocomplete="off">
<label for="lname">Last Name</label>
</div>
<div class="field-wrap">
<input type="tel" name="form_data[phone][country]" id="tel" class="request-input request-country" required autocomplete="off" pattern="[0-9]{3}">
<input type="tel" name="form_data[phone][code]" id="tel" class="request-input request-code" required autocomplete="off" pattern="[0-9]{2}">
<input type="tel" name="form_data[phone][number]" id="tel" class="request-input request-number" required autocomplete="off" pattern="[0-9]{7}">
<label for="tel">Phone Number</label>
</div>
<div class="field-wrap">
<input type="text" name="form_data[role]" id="role" class="request-input request-role" required autocomplete="off">
<label for="role">Role on Campus *</label>
</div>
</div>
<div class="row-wrap-bottom">
<div class="field-wrap">
<textarea name="form_data[goals]" id="goals" class="label-goals" required autocomplete="off"></textarea>
<label for="goals">What are your goals for DemoSystem? *</label>
</div>
<p class="agreement">
<input type="checkbox" name="checkbox" id="checkbox" checked>
<label for="checkbox">
I agree to the DemoSystem
<span>
Terms of Service
</span>
and
<span>
Privacy Policy
</span>
</label>
</p>
<div class="field-wrap">
<button class="button-submit">Submit</button>
<button class="button-cancel">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
You can use media query in your css.
Media query allowed you to change css depending on the screen size.
#media screen and (max-width: 750px) {
/* your new Css here */
}
Right after the max-width parametre you put the desired width.
If the max-width parameter is set to 750px the code will be active whenever the screen size is bellow 750px.
Then you can put all the existing css selector already used for higher screen and make them have new value.
Put the media query code at the bottom of you css style sheet.
You can use several media query in the same code.
Example:
#media screen and (max-width: 1150px) {
/* your new Css for tablet here */
}
#media screen and (max-width: 750px) {
/* your new Css for smart phone here */
}
Also it's strongly advise to add the code below on the head of your html code
<meta name="viewport" content="width=device-width, initial-scale=1">
Feel free to ask if needed.
In the small css you have to specify a new width for input #id:
#tel{
width:25%;
}
Result: jsfiddle
On my MailChimp form I would like to have the form and submit the button inline with one another.
I have been trying several different variations of float and display but none of them have the desired effect.
Here is the original code. Anyone have any suggestions on how to align the form and the button?
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
#mc_embed_signup .mc-field-group input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
<!-- Begin MailChimp Signup Form -->
<style type="text/css">
/* 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>
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
</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> <!-- 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_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"><input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
In newsletter is recommended use "old style" code, with <table> and inline style. If you use table can have the form next to each other and it will be compatible on most devices.
Live example on the jsFiddle
button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
margin: 10px 0px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
width: auto;
}
input {
display: block;
width: 100%;
padding: 8px 0;
text-indent: 2%;
}
<table>
<tr>
<td><input type="text" placeholder="name#name.com" /></td>
<td><button>Send</button></td>
</tr>
</table>
I made some changes to your code for inline elements:
#mc_embed_signup .button {
clear: both;
background-color: #aaa;
border: 0 none;
border-radius: 4px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: bold;
height: 32px;
line-height: 32px;
/*margin: 10px 0px 10px 0;*/
/*padding: 0 22px;*/
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
/*width: auto;*/
}
#mc_embed_signup .mc-field-group input {
/*display: block;*/
/*width: 100%;*/
/*padding: 8px 0;*/
text-indent: 2%;
}
#mc_embed_signup input.mce_inline_error {
border-color: #6B0505;
}
#mc_embed_signup input {
border: 1px solid #999;
-webkit-appearance: none;
}
#mc_embed_signup .mc-field-group label {
display: block;
margin-bottom: 3px;
}
#mce-EMAIL{
padding: 8px 0;
display: inline-block;
width: 70%;
}
#mc-embedded-subscribe{
display: inline-block;
width: 20%;
margin: 0;
padding: 0;
}
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//utz-benkel.us10.list-manage.com/subscribe/post?u=9684bbce9ec8413a5614ca7c3&id=116fd11541" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Addresse </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="name#domain.de">
<input type="submit" value="Senden" name="subscribe" id="mc-embedded-subscribe" class="button">
</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> <!-- 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_9684bbce9ec8413a5614ca7c3_116fd11541" tabindex="-1" value=""></div>
<div class="clear text-center"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
http://jsfiddle.net/mitsuru/3Lusbvjx/1/
You should put the submit input near the email from input, then "inline-block" and "width" in % do the magic.
It doesn't use tables, !importants, nor needs to fix or apply tricks. It's just CSS.
Cheers.