Avery email form

[Thassia]

Hi, I am using the Avery theme and I love how the mailchimp form looks. I use convertkit instead of mailchimp. I tried to style my form to look like the demo by tweaking the CSS code but I can’t get it working. In my homepage you can see both the mailchimp and the convertkit forms (one below the other). Could you help me with some css code to get the convertkit form looking like the one from mailchimp?

[David]

Hi there,

do you want it looking exactly the same e.g button colors and submit below fields?

The button colors are coming directly from the form – i assume someone there is a setting to change them ?

let me know

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

[Thassia]

I set the colors on my GP customize page, the button changes color as you hover over it. The mailchimp form just follows what I have set on my theme but the converkit doesn’t. Also I am not able to put the form on the center.
I see on the CSS that there is some code for this mailchimp style, I tried to exchange for the convertkit but it didn’t work. I would love the form to be on the center and the button to change color as the rest of the theme. Thank you.

[David]

Try this CSS:

.formkit-form {
    margin-left: auto;
    margin-right: auto;
}
.formkit-submit {
    background-color: #e9bb66 !important;
    border-radius: 0 !important;

}
.formkit-submit:hover {
    background-color: #e8b4b7 !important;
}

.formkit-form .formkit-field input,
.formkit-submit {
    font-size: 18px !important;
}

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

[Thassia]

Worked perfectly! Thank you so much David, I appreciate your help!

[David]

You’re welcome

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

[Author]

Posts