Help with Email Form Css Code

[Ryan]

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 :

https://prnt.sc/tnnbi7

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?

https://prnt.sc/tnncmy

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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ryan]

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?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ryan]

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.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts