Mailchimp integration with group checkbox

Hi Victoria,

That would be great!!

I already set up the plug-in and created a test-site with the two newsletter boxes.
(link below in the private section).

I integrated them using the provided shortcode from the mailchimp-plugin.
For the upper box I used the code block from the content elements for integration.
For the sidebar box I just used the text widget and copied the code there.
(let me know if there are better ways to integrate the code.)

At the moment the boxes look like this:

I would like to have the following adjustments:

Upper box:
– the fields email, first name and the submit-button should be in one line (like this)
– the checkboxes with the text “choose your topics” should be below in one line, as they already are, but the text after the checkboxes should be a bit bigger and better aligned (more space between the groups)

side bar box:
– is basically ok, only the spacing between the check boxes is to big and the text too small

Thanks for your help!

BR
Flo

Hi Ismael,

that worked fine, thanks!

I have another issue with the checkboxes:
I want to make sure that at leaset one topic/checkbox is selected.
I succsesfully integrated that little script here, which works fine for the upper box, but does not work for the sidebar.

What is the problem?

BR
Flo

New update in this matter :)

I bypassed this problem by using a redirect to URL after successful sign-ups.

So it is solved for the moment, but I am still working on the whole newsletter build-up :)
Thank you guys for your support!

BR
Flo

Hi,

I encountered the following issue:
I want to use the newsletter-box in different locations.
Sometimes with a white background as shown here and, sometimes with a grey background as shown here.
In the case with a grey background I would like to change the background color of the input fields to a white (in order to have a contrast between background and input fields).

How can I do that?
(I already tried to do it by defining a custom css class and with following quick css, but also the submit-button was changed to a white background:)

}
.”CUSTOM-CSS-CLASS” input{
    background: white !important;
}

BR
Florian

Hello Mike,

“#element_avia_0_1 input, #element_avia_1_1 input” only works with the Enfold-sign-up-element, but I have to use the mailchimp-plugin because of the requirements I described in the earlier posts above.

See in the private content area an example where I want to use the newsletter-box with white input fields (at the bottom of the site).

BR
Florian

Hi,

I solved the problem with the ipad-resolution in the meantime by changing the used layout element from a 2/3 column to a 3/4 column.

So only the following 2 issues are still open (as already descibed above):

1. My newsletter signup-boxes have sometimes a white background as shown here and, sometimes a grey background as shown here.
In the case with a grey background I would like to change the background color of the input fields to white (in order to have a contrast between background and input fields).
But since I use the mailchimp-plugin I can not targed the fields with

#element_avia_0_1 input, #element_avia_1_1 input {
    background: gray !important;
}

2. Is it possible to keep the checkbox together with the related text in one line in case of a line break? (see here what I mean).

BR
Florian

Hi,

thanks for your constant support!

I would really appreciate to get your input on these 2 still open issues:

So only the following 2 issues are still open (as already descibed above):

1. My newsletter signup-boxes have sometimes a white background as shown here and, sometimes a grey background as shown here.
In the case with a grey background I would like to change the background color of the input fields to white (in order to have a contrast between background and input fields).
But since I use the mailchimp-plugin I can not targed the fields with

#element_avia_0_1 input, #element_avia_1_1 input {
background: gray !important;
}
2. Is it possible to keep the checkbox together with the related text in one line in case of a line break? (see here what I mean).

BR
Florian

Hi Ismael,

Thanks for your Input!
Point 2 is solved but unfortunately point 1 it is not working as I want.

The given CSS-code is addressing all input fields on the whole page, but I actually just need the white background for one signup-box (the rest of the input fields should be stay grey).
As you see here just below the newsletter box there is a contact-field where I want to keep the grey background.

How can I target the code only for the newsletterbox?
I defined a custom-CSS for the mailchimp code-block but it did not work (I am not sure how to put it in the quick CSS), the following did not work:
.

.custom-CSS #top.main_color input[type='text']  {
    border-color: #ebebeb;
    background-color: #ffffff;
    color: #919191;
}

Looking forward for your help.

BR
Florian

Hi Ismael,

that works now, but how can I apply this code only for one site-id or one defined custom-CSS-element?
(I have some cases where I want to keep the standard background-color.)

Where exactly in the code do I have to add the .page-id- or .custom-CSS for this case?

BR
Florian

It’s solved now, thanks a lot Ismael!!