Archived topic
Help with Email Form Css Code
5 replies · Started by Ryan on July 23, 2020
Hello,
I am using generatepress with marketer site library, I create email signup form with MC4WP, I little bit know with CSS code and achieving this :
My css code :
.mc4wp-form-fields {
padding: 5%;
margin-top: 50px;
font-size: 0.9em;
background-color: #233c68;
}
.mc4wptitle {
color : #FFFFFF
}
.mc4wp-form-fields label {
color: #fff;
}
.mc4wp-form-fields input[type="submit"] {
background-color: #22c952;
}
Can you help me with CSS to get something like this and fit Generatepress Marketer Site Library?
I don't know if it's plugin territory, but if I see Access Generatepress Site Library, you are using an arrow icon and rounded subscribe button similar to the screenshot above. Help would be awesome!
Hi there,
i would recommend you remove all of the content from your form so it only displays the Fields and Submit.
Then place it inside a GenerateBlocks Container Block where you can add your other titles etc. and style it.
Then i can assist with styling the form fields if you want? Let me know.
I am using Element hook after content method, if I am using GenerateBlocks Container Block, I need to add on all post manually right? Is there a way to still use hook so it places automatically on all post?
Aah my bad - but GPP 1.11 just introduced the Block Element:
https://generatepress.com/gp-premium-1-11-0-block-elements/
But we're still in alpha version. So not recommended for live sites.
In the meantime you could sort out the form alignment with some CSS:
@media(min-width: 769px) {
.mc4wp-form-fields {
display: flex;
}
}
.mc4wp-form-fields {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.mc4wptitle {
flex: 1 0 100%;
text-align: center;
}Wow. So, my answer to generateblocks hook method is on the next update. Nice!
Thanks for your code, I will use it on my site for now.
You're welcome
