Horizontal Mailchimp Signup Form

[danpal]

I’m having a hard time getting the Mailchimp signup form to line up horizontally like the form in the footer. I used the “naked” embed code provided on the Mailchimp site.

Thanks for your help!

[danpal]

Also, the “Get Notified” button isn’t responding when it’s pressed.

[Kyle – SUPPORT]

Hi

What code have you used? Some things need taking out

– Kyle

[Mohammad – SUPPORT]

Hi,
You should use the same code like footer to look perfect as footer.
Thanks
Mohammad

[danpal]

This is the “naked” code from Mailchimp.

<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="//highpulp.us8.list-manage.com/subscribe/post?u=a621de139dae5d7ee4bdd069c&id=c871c83c98" 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 Address </label>
	<input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL">
</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_a621de139dae5d7ee4bdd069c_c871c83c98" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Get Notified" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

Here’s the CSS I copied from the footer signup form:

input#mce-EMAIL{
    float:left !important;
    width:62% !important;
    margin-top:0px !important;
    height:46px !important;
    padding:5px 38px 0px 10px !important;
    display: block;
    color: #999;
}
input#mc-embedded-subscribe{
    background: #f15e4a;
    color: #ffffff;
}

I’m using the Mailchimp for WordPress plugin for the form in the footer area. The other one is embedded.

[danpal]

What do you mean? The CSS? I’m using the Mailchimp for WordPress plugin in the footer. I’m using a different list for the other signup form, which is why I’m embedding it instead. I can’t have two different forms on the same page with this plugin.

[David Martin – Support]

Hi,

The footer form is working for me, the form with the page is not as mentioned.

How are you insert the code into the page, I suspect WordPress is removing the JS code from the form.

Can you add a WP login so we can check this?

Is the “naked” code from Mailchimp complete, have you remove any JS from that also?

– David.

[danpal]

This reply has been marked as private.

[Kyle – SUPPORT]

You need to use exactly the same code you’re using in the footer, go to the footer widget and copy the html

– Kyle

[danpal]

Thanks Kyle, but that doesn’t help me.

[Kyle – SUPPORT]

So even with that code it’s not side by side?

– Kyle

[danpal]

The form in the footer is created with a shortcode from the Mailchimp for WordPress plugin. The other form is embedded using the code generated from Mailchimp’s site. The reason I’m doing it this way is because I’m using two separate lists for each. This is the only workaround I found.

Somehow the code for the “naded” form gets stripped when I embed it in a text block using the Swift Builder. The “Get notified” button isn’t responsive. I tested the code from Mailchimp in another page using the Classic Editor and the button works. I just can’t everything on one line horizontally.

Here’s the test page: http://highpulp.com/test/

[Kyle – SUPPORT]

Instead of the code your currently using, use this:

<form method="post"><input type="email" required="" placeholder="Email Address" name="EMAIL" id="mc4wp_email"><input type="submit" value="Subscribe"><div style="position: absolute; left: -5000px;"><input type="text" autocomplete="off" tabindex="-1" value="" name="_mc4wp_h_eff26cc3edc69ddfbf621add8b8b922f"></div><input type="hidden" value="1444335183" name="_mc4wp_timestamp"><input type="hidden" value="0" name="_mc4wp_form_id"><input type="hidden" value="mc4wp-form-1" name="_mc4wp_form_element_id"><input type="hidden" value="1" name="_mc4wp_form_submit"><input type="hidden" value="717c273bba" name="_mc4wp_form_nonce"></form>

– Kyle

[danpal]

Thanks Kyle. Sorry for getting back to you so late. The code you provided corrected the layout, but nothing happens when I hit the submit button. I noticed that the embed code from Mailchimp gets stripped and the action URL is missing.

Do you know why? I’m using the swift page builder.

[danpal]

This reply has been marked as private.