- This topic has 20 replies, 2 voices, and was last updated 3 years, 10 months ago by David.
-
AuthorPosts
-
May 19, 2020 at 6:36 am #1291829Amit
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.May 19, 2020 at 7:10 am #1291873DavidStaffCustomer SupportHi there,
where on the front page do you want it displayed?
May 19, 2020 at 7:31 am #1291911AmitI 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.May 19, 2020 at 10:16 am #1292399DavidStaffCustomer SupportTry 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 Rules2. 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; } }
May 20, 2020 at 12:34 am #1293250AmitThanks 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.May 20, 2020 at 1:59 am #1293349DavidStaffCustomer SupportThat form on your front page is not the mailchimp form ?
May 20, 2020 at 2:36 am #1293382AmitIt is MC4WP, by plugin …
May 20, 2020 at 3:08 am #1293413DavidStaffCustomer SupportIf 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.
May 20, 2020 at 3:16 am #1293422AmitWhich form code should I embed – Classic or Unstyled?
May 20, 2020 at 3:37 am #1293441DavidStaffCustomer SupportUnstyled would probably be easier for us to make it look the way you want it
May 20, 2020 at 3:46 am #1293464AmitDone, please check this link https://www.friedcoffee.com/test/
May 20, 2020 at 3:49 am #1293466AmitI 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.
May 20, 2020 at 4:32 am #1293535DavidStaffCustomer SupportI am not seeing it on your test page ?
There is a very badly formatted from on your home page though….May 20, 2020 at 4:37 am #1293549AmitI 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…May 20, 2020 at 4:49 am #1293564AmitYep 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.
-
AuthorPosts
- You must be logged in to reply to this topic.