Menu icon Foundation
Inline Email List Signup Form (Mailchimp)

Using Foundation 5, I'm trying to make this simple Mailchimp signup form:

Fixed email form

It's a panel containing a name field, email field and submit button.

But I'm having some difficulty taking this Mailchimp Embedded Form code:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//a-bunch-of-mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</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="some-important-stuff" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->
            

         

And turning it into some nice, sweet Foundation 5 markup.

So far, this is what I have:

<div class="row">
  <div id="mc_embed_signup" class="small-12 medium-6 columns panel radius end">
    <div class="row">
      <form action="//a-bunch-of-mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="medium-5 columns">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="medium-5 columns">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="medium-2 columns">
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </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>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="some-important-stuff" tabindex="-1" value="">
        </div>
      </form>
    </div> <!-- /row -->
  </div> <!-- /mc_embed_signup -->
</div> <!-- /row -->
            

         

But as you can see below, the submit button is hanging halfway out of the panel.

(Pay no attention to the shadow at the top of the image–it's from the CodePen screenshot).

Screenshot 2014 08 26 17.55.20

I feel like this should be easy, that it's not an SCSS matter, but that there's just something up with the way I'm structuring my HTML rows and columns.

Any help is appreciated. Here it is on CodePen to make playing around easier.

mailchimpsignup formforms

Using Foundation 5, I'm trying to make this simple Mailchimp signup form:

Fixed email form

It's a panel containing a name field, email field and submit button.

But I'm having some difficulty taking this Mailchimp Embedded Form code:

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//a-bunch-of-mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address </label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name </label>
	<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</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="some-important-stuff" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

<!--End mc_embed_signup-->
            

         

And turning it into some nice, sweet Foundation 5 markup.

So far, this is what I have:

<div class="row">
  <div id="mc_embed_signup" class="small-12 medium-6 columns panel radius end">
    <div class="row">
      <form action="//a-bunch-of-mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="medium-5 columns">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="medium-5 columns">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="medium-2 columns">
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </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>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="some-important-stuff" tabindex="-1" value="">
        </div>
      </form>
    </div> <!-- /row -->
  </div> <!-- /mc_embed_signup -->
</div> <!-- /row -->
            

         

But as you can see below, the submit button is hanging halfway out of the panel.

(Pay no attention to the shadow at the top of the image–it's from the CodePen screenshot).

Screenshot 2014 08 26 17.55.20

I feel like this should be easy, that it's not an SCSS matter, but that there's just something up with the way I'm structuring my HTML rows and columns.

Any help is appreciated. Here it is on CodePen to make playing around easier.

Andy Wallace almost 5 years ago

Bryan,

In short, your submit button is too large to fit into your 2 column cell in what is already a 6 column parent.

You've got a few options here. The first is to shorten the text (value) of your submit button so that the button itself is shorter.

Or:
Either give the nested row more column width, or steal some columns from the preceding input fields, i.e.

name: medium-4
email: medium-4
submit: medium-4

For small screens, you'll probably have to use something like
name: small-6
email: small-6
submit: small-12

But you'll have to play around to see what works best!

fourhexagons almost 5 years ago

Oh, okay. This is great. Thank you Andy.

It sounds to me that the best option for finer control of the elements in the panel is to set up a custom grid inside that panel. It sounds like I should use @include grid-column and @include grid-row.

This is beginning to stretch the bounds of my Sass understanding. My Sass-derstanding.

What I'm trying to do is set up a 24-column grid inside the panel for finer control of the spacing. I've attempted this, but my input elements still stretch far over the bounds of the div.

<div class="row">
  <div id="mc_embed_signup" class="small-12 medium-6 columns panel radius end">
    <div class="signup-row">
      <form action="//mailchimp-stuff" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="small-24 medium-9 col24">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="small-24 medium-9 col24">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="small-24 medium-6 col24">
          <label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </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>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="mailchimp-stuff" tabindex="-1" value="">
        </div>
      </form>
    </div> <!-- /row -->
  </div> <!-- /mc_embed_signup -->
</div> <!-- /row -->
.mce-labels {
  display: none;
}

.signup-row {
  @include grid-row();
  margin: 0;
}

.col24 {
  $column-gutter: rem-calc(7.5);
  $column-width: remcalc(15);
  @include grid-column(
    $columns:24,
    $center:true
  );
}

I get the feeling that I'm either missing something simple or there's a simpler way to achieve this.

Thanks again.

fourhexagons almost 5 years ago

To further update, I decided to use a hammer instead of a nailgun, so to speak.

Here it is on CodePen: http://codepen.io/fourhexagons/pen/vokLu

<div class="row signup">
  <div class="medium-6 columns end">
    <form action="//mailchimp-code" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
      <div class="row panel radius">
        <div class="medium-4 columns">
          <label for="mce-FNAME" class="mce-labels">First Name</label>
          <input type="text" value="" name="FNAME" class="required radius" id="mce-FNAME" placeholder="First Name" required pattern="[a-zA-Z]+">
        </div>
        <div class="medium-5 columns">
          <label for="mce-EMAIL" class="mce-labels">Email Address</label>
          <input type="email" value="" name="EMAIL" class="required email radius" id="mce-EMAIL" placeholder="Email" required>
        </div>
        <div class="medium-3 columns">
          <label for="mc-embedded-subscribe" class="mce-labels">Subscribe</label>
          <input type="submit" value="Yes, please!" name="subscribe" id="mc-embedded-subscribe" class="button tiny radius signup-btn">
        </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>
        <div style="position: absolute; left: -5000px;">
          <input type="text" name="mailchimp-number" tabindex="-1" value="">
        </div>
      </div> <!-- /row panel radius inputs -->
    </form>
  </div>
</div> <!-- / row signup -->
.mce-labels {
  display: none;
}

.signup {
  margin-top: 30px;
}

.panel {
  margin: 0;
  padding: 3px 5px;

  .columns {
    padding: 5px;
  }

  input {
    margin: 0;
  }

  .signup-btn {
    font-size: 14px;
    height: 36px;
    padding: 10px;
    width: 100%;
  }
}

The rem-calc's were being weird with CodePen, so I switched to pixels.

If anyone has any comments or suggestions, I'm open to them.