CODEWITHSUNDEEP
htmlcsswordpressformsmailchimp
Dustin Lee
Dustin Lee

Reputation: 609

How do I get email input and submit button on same line in MailChimp?

I'm trying to get the "Email" input and "Submit" button to sit on the same line. Here's what it looks like:

It's on separate lines and looks awkward

So it should look like this (in regards to layout):

Both the email and submit on same line

You can see the actual page here: http://www.grainbeast.com/free-goods/

Can you tell me how to accomplish this?

Upvotes: 1

Views: 6154

Answers (2)

Michael Dudar
Michael Dudar

Reputation: 31

Here my solution:

https://jsfiddle.net/00adpdb1/

Just wrap your input with "overflow:hidden" and pull to right button with "floar: right"

 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

 input {display: block;
    width: 100%;
    height: 36px;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.57142857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #cfd3cc;
    border-radius: 2px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    margin: 0;
    }
    
    .btn {
    display: block;
    padding: 6px 14px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.57142857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid transparent;
    border-radius: 2px;
      background:red;
      color: #fff;
}

.pull-right {
  float:right;
}

.s-margin-left {
    margin-left: 10px;
}
<div class="form-group">
  <button class="pull-right btn btn-lg btn-primary s-margin-bottom s-margin-left" type="submit">send</button>
  <div style="overflow: hidden;">
      <input type="email" class="form-control" placeholder="Enter E-mail" value="" id="email" name="email">
  </div>
</div>

Upvotes: 0

zoranc
zoranc

Reputation: 2456

add the following css to style.css

#mc4wp-form-1 > input[type="email"] {
    display: inline-block;
}

and remove

float: left

from the submit button style so the html reads

<input type="submit" value="Get Free Access" />

Upvotes: 3

Related Questions