[Resolved] Button on right of signup form in desktop, below in mobile

[Joey]

I’m trying to achieve something similar to this effect, where the “Subscribe” button is to the right of the signup form on desktop, but below, spanning the length of the page on mobile.

Is there a simpler way to do this? The above code isn’t working on my site and I’m not sure how to modify it—if I use !important on display: inline-block it screws up other aspects, like mobile view. I’m having trouble making it work on my site.

This is the code for my signup form, as can be seen at the bottom of the page on my website:

<div id="mc_embed_signup">
    <form action="https://simipress.us4.list-manage.com/subscribe/post?u=c9064154e2c953efbfd3787da&id=86cd4552bf" 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"><input type="email" placeholder="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>
        <div style="position: absolute; left: -5000px;"><input type="text" name="b_0b5586be71b0fee16a03f5684_e41ec18eab" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
</div>

Any help would be appreciated. Thank you.

[David]

Hi there,

is it possible to change the HTML ?
As its painful to make that happen, for example – try this CSS:

#mc_embed_signup_scroll {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
#mc_embed_signup .indicates-required{
    flex: 1 0 100%;
    order: 10;
    text-align: left !important;    
}
#mc_embed_signup .mc-field-group {
    flex: 1 1;
    padding-bottom: 0 !Important;
    margin-right: 5px;
}
#mc_embed_signup #mc-embedded-subscribe {
    line-height: 1.5em;
    font-size: 18px;
    padding: 8px;
    margin: 0 !important;
    height: auto;
}
#mc_embed_signup #mce-responses {
    order: 20;
}
.gb-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
}

But look what happens if you click and then click outside of the input field and the The field is required notice appears.

See here:

https://www.screencast.com/t/0IhDEkBln9D2

Ideally the submit button HTML should be inside the mc-field-group

[Joey]

Wow, thank you David, when I move the submit button to the mc-field-group, the CSS works really well, and it looks awesome.

I added this code to make it span the length in mobile, and it seems to be working well:

@media (max-width: 768px) {   
	#mce-EMAIL { 
		width: 100%;
	}
	.submit-button { 
		width: 100%;
}

I’m having one issue I can’t figure out. It looks like this in desktop and like this in mobile after I submit the form. Is there a way to put the “Thank you for subscribing!” message under the Subscribe button, or just somewhere more logical (in desktop)? I think I’m missing something simple. Thanks again!

[David]

With the Button moved inside the mc-field-group you shouldn’t need any of my CSS 🙂

[Joey]

Wow, I feel kind of dumb, you’re right. Thank you so much.

[David]

Glad to be of help 🙂

[Author]

Posts