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

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

Home Forums Support Button on right of signup form in desktop, below in mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2283356
    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.

    #2283481
    David
    Staff
    Customer Support

    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

    #2284223
    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!

    #2284301
    David
    Staff
    Customer Support

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

    #2284921
    Joey

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

    #2285128
    David
    Staff
    Customer Support

    Glad to be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.