hoping someone could point me to the right direction as I have spent way too long on this issue. I added a Mailchimp form to my website but I'd like the 'enter email' form field to be on the same line as the button. Essentially, the 'join waitlist' button should be on the right on the 'enter email' form field. I have tried a few things but can't seem to get it to work. Thanks in advance for your help.

First image is how I'd like the form to look like. Second image is the current state. Thanks in advance for your help!

HTML code:

<!-- Begin Mailchimp Signup Form -->
        <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">
        <div id="mc_embed_signup">
        <form action="https://tretuser.us20.list-manage.com/subscribe/post?u=1197d33bb52c8de2a2747b690&amp;id=8a796eb2c8" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="form_fields">
            <div id="mc_embed_signup_scroll">
            <label for="mce-EMAIL">Sign up for early access</label>
            <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter Email" 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;" aria-hidden="true"><input type="text" name="b_1197d33bb52c8de2a2747b690_8a796eb2c8" tabindex="-1" value=""></div>
            <div class="clear foot">
                <input type="submit" value="Join Waitlist" name="subscribe" id="mc-embedded-subscribe" class="button">
            </div>
            </div>
        </div>
        </form>
        </div>

CSS code:

/* Mailchimp form */
 #mc_embed_signup {
color: white;
justify-content: center;
text-align: center;
}

#mc_embed_signup label {
font-size: 3em;
 }

#mc_embed_signup_scroll .email {
width: 50%;
margin-top: 1.5em;
}

.form_fields {
display: inline-block;
}

.button {
background-color: #FAE105;
border: none;
padding: 15px 30px;
border-radius: 5px;
letter-spacing: 1px;
font-size: 16px;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
}

button:hover {
transform: translateY(-2px);
 }

 .email {
border: 1px solid #b4becb;
padding: 15px;
width: 30%;
font-size: 16px;
margin-right: 8px;
border-radius: 5px;
 }

.email input:focus {
outline-color: #FAE105;
 }

CodePudding user response：

It's always a good idea to take a look at the CSS provided by for example Mailchimp and change that to your likings and remove the linked CSS in the embed code.

So if you remove the link to the Mailchimp css:

<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7_dtp.css" rel="stylesheet" type="text/css">

And replace your css with the following it almost ends up like your design:

#mc_embed_signup form {
  text-align:center; 
  padding:10px 0 10px 0;
}
.mc-field-group { 
  display: inline-block; 
} /* positions input field horizontally */

#mc_embed_signup input.email {
  font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
  border: 1px solid #b4becb;
  padding: 15px;
  width: 30%;
  font-size: 16px;
  margin-right: 8px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px; 
  color: #343434; 
  background-color: #fff; 
  box-sizing:border-box; 
  display: inline-block; 
}
#mc_embed_signup input.email:focus {
  outline-color: #FAE105;
}
#mc_embed_signup label {
  display:none; 
  font-size:16px; 
  padding-bottom:10px; 
  font-weight:bold;
}

#mc_embed_signup .clear {
  display: inline-block;
}

#mc_embed_signup .button {
  background-color: #FAE105;
  border: none;
  padding: 15px 30px;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 16px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  color: #000; 
  box-sizing:border-box; 
  display: inline-block; 
  margin-left: 0.5rem; 
  transition: all 0.23s ease-in-out 0s;
}
#mc_embed_signup .button:hover {
  cursor:pointer;
  transform: translateY(-2px);
}
#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;
}
@media (max-width: 768px) {
  #mc_embed_signup input.email {
      width:100%; 
      margin-bottom:5px;
  }
  #mc_embed_signup .clear {
      display: block; 
      width: 100% 
  }
  #mc_embed_signup .button {
      width: 100%; 
      margin:0; 
  }
}