Topic: mailchimp sign up form

nfedesign
July 27, 2024 at 12:31 am

Hi I am just wondering if there are anyways to set up mailchimp forms within GP/GB pro?
As in, to style them within call to actions and blocks to insert into pages

thank you
David
July 27, 2024 at 3:52 am

Hi there,

it is possible, but probably easier with some CSS as those forms HTML and CSS are not always that “clean”

If you can share a link to where I can see the mail chimp form on your site – we can take a look and advise.
nfedesign
July 27, 2024 at 3:37 pm

Ok I have popped it at the bottom of this blog post for now.
https://nfebranding.co/flat-lay-photography/

The fields can either be added via shortcode block, or can paste the full code

Essentially what I would like to know is if I can force the fields to be horizontal. You can see I have put it in a container, auto margin either side, given it a background colour and a heading within the container. So I think I can style in a way that could work, if it were possible to code it to tell the fields to only stack on mobile.

What do you think?

thanks 🙂

David

July 28, 2024 at 2:00 am

So the HTML is lightweight but has some oddities, such as the email field is inside its label. Which adds a little more hoop jumping.

Try this CSS:


/* desktop align fields horizontally and reset spacing */
.mc4wp-form-fields {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    max-width: max-content;
    margin-inline: auto;
    gap: 8px;
    padding: 10px 20px;
}
/* remove unnecessary bottom margins */
.mc4wp-form-fields p {
    margin-bottom: 0;
}
/* set the form label font size and transform */
.mc4wp-form-fields label {
    font-size: 14px;
    text-transform: uppercase;
    font-size: 12px;
}
/* position the form labels above input */
.mc4wp-form-fields :is(p,label,input) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* set the input font size and height */
.mc4wp-form-fields p input {
    font-size: 14px;    
    line-height: 1;
    border-radius: 3px;
}
/* style the form input button */
.mc4wp-form-fields p input[type="submit"] {
    text-transform: uppercase;
    font-weight: 700;
    padding-block: 11px;
    border-radius: 20px;
}

/* stack the fields on mobile */
@media(max-width: 768px) {
    .mc4wp-form-fields, .mc4wp-form-fields :is(p, label ) {
        flex-direction: column;
    }
    .mc4wp-form-fields p:last-of-type, input[type="submit"] {
        width: 100%;
        align-items: center;
        margin-top: 2px;
    }
}

It gives the row layout for desktop and stacked for mobile.
I also added a smaller radius corner to the input fields, and styled the submit to match your site buttons

Let me know

nfedesign
July 28, 2024 at 3:39 am

Oh wow thank you so much for all the effort!
Does this go in additional css in the customiser?

I did that and cleared cache and it does not seem to have done anything, so I might have done something wrong. I will check in tomorrow morning as it is late here in AU

thanks Renee

David

July 28, 2024 at 4:22 am

Yes in the Customizer > Additiobal CSS>

See here:


/* End remove alt text on hover */

body.single #comments {
    max-width: 900px;
    margin: auto;
	
.comment-content {
   padding-top: unset;
   padding-bottom: unset;
}

That is the CSS before it. And its. missing a closing }

That CSS needs to be replaced with:


/* End remove alt text on hover */

body.single #comments {
    max-width: 900px;
    margin: auto;
}	
.comment-content {
   padding-top: unset;
   padding-bottom: unset;
}

That will fix the error and then the CSS below it will work.

nfedesign
July 28, 2024 at 3:29 pm

Perfect – that is great and works now.
Now I can style it, thank you so much for the help 🙂
David
July 29, 2024 at 1:01 am

You’re welcome

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

mailchimp sign up form