[Resolved] Display Single Line Optin Form With MailChimp

Home Forums Support Display Single Line Optin Form With MailChimp

  • This topic has 20 replies, 2 voices, and was last updated 4 months ago by David.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1291829
    Amit

    I want to display the MailChimp optin form in a Single Row With Grey #333 background color to be displayed in front page
    First Name – Email – Subscribe Button
    I tried but can’t come out of any solution as the code seems complicated. I want things to be responsive when in mobile too.
    There was a solution you guys have already answered, but the things were not from beginning (https://generatepress.com/forums/topic/single-line-mailchimp-subscription-code/)
    Please help achieve this.

    #1291873
    David
    Staff
    Customer Support

    Hi there,

    where on the front page do you want it displayed?

    #1291911
    Amit

    I am trying right now at a simple test page – https://www.friedcoffee.com/test/ If talking about the front page, it’s just after the header.
    I exactly need something like that – https://joshhall.co/how-to-create-a-sleek-mailchimp-signup-in-divi/.
    Tried this code but their are some overlapping problems showing up.

    #1292399
    David
    Staff
    Customer Support

    Try this

    1. Create a new Hook Element:
    https://docs.generatepress.com/article/hooks-element-overview/

    1.1 Add this HTML to the hook with your Mailchimp script inside it:

    <div class="mailchimp-container">
    <!-- Optional add your Title or other text here -->
    <!-- Add your mailchimp script here -->
    </div>

    1.2 Select the after_header hook
    1.3 Set your Display Rules

    2. Add this CSS to your Site:

    .mailchimp-container {
        background-color: #ccc; /* Add background color here */
        padding: 80px; /* Space around form */
        display: flex;
    }
    
    .mc4wp-form-fields {
        display: flex;
    
    }
    
    .mailchimp-container .mc4wp-form {
        margin-left: auto;
        margin-right: auto;
    }
    
    .mailchimp-container .mc4wp-form input {
        border-radius: 4px;
        margin: 1%;
        flex: 1;
    }
    
    @media(max-width: 860px) {
        .mc4wp-form-fields {
            display: flex;
            flex-wrap: wrap;
        }
    }
    #1293250
    Amit

    Thanks David for the code. Unfortunately, some things worked but after some tweak, it was figured out.
    The Display:block; is working fine to stay correct at mobile and tablets. I added some space between fields too.
    Now, one problem that remains is the alignment at the front page. The fields are more aligned to the left side whereas the same form is in the posts page, but it’s all good there.
    Now what I need is to squeeze or short the input boxes (only in the front page at desktop) so that they look more beautiful and the proper alignment at the center.

    #1293349
    David
    Staff
    Customer Support

    That form on your front page is not the mailchimp form ?

    #1293382
    Amit

    It is MC4WP, by plugin …

    #1293413
    David
    Staff
    Customer Support

    If you Right Click and Inspect the form you will see it doesn’t have any of the MailChimp markup – also if you try and use the form it doesn’t do anything. Something isn’t right – best to fix that first then we can fix the CSS issues.

    #1293422
    Amit

    Which form code should I embed – Classic or Unstyled?

    #1293441
    David
    Staff
    Customer Support

    Unstyled would probably be easier for us to make it look the way you want it

    #1293464
    Amit

    Done, please check this link https://www.friedcoffee.com/test/

    #1293466
    Amit

    I need – Name – Email – Subscribe button in one line and on tablet Name- Email on one and Subscribe button on second. On Mobile – Each element on a separate line. Each element should have a space of 10 px from each other, especially when on mobile and tablet.

    #1293535
    David
    Staff
    Customer Support

    I am not seeing it on your test page ?
    There is a very badly formatted from on your home page though….

    #1293549
    Amit

    I have nothing on the front page. It’s only on the test page…I am now really getting sick of this change. We are not even getting to the start of the thing properly…
    Where it is coming from, I too checked it’s weird and I can’t find out were it’s called…

    #1293564
    Amit

    Yep Now check, I guess it was some cache issue. Anyways, I created a new hook for the test page and now that bad formatted form is at test page.

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