Custom CSS for Email Field and Subscribe Button

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Thank you for following up, Leo.

My site is not on a public server at the moment, so I can't link to what I am doing on my own site...but that text box and submit button I am trying to replicate can be seen here: https://www.readthepeak.com/

I like how the email text box and subscribe button are connected, with the submit button being rounded on the right side only. I also like how when the site is viewed in mobile, the submit button responds by dropping below the text box and then being rounded on both sides.

Hi there,

What plugin is being used for the subscribe form ? And did this come with a Site from our GP Site Library?

Hi David, I am using a plugin called Easy Forms for Mailchimp to add the form to the page. I also have Simple CSS installed. Maybe this is not possible.

It should be possible, its just that we need to see the site so we can inspect the forms HTML, and from that we can write the CSS.
If it had been a form plugin I was familiar with ( never used Easy Forms unfortunately ) then we could probably have made a blind stab at it.

If you want to wait until the site is in a public server then we can take a look then.
If it is on a server and you can provide us a login then we can do that too.

Any private info such as logins can be shared in the private information field

Thanks, David.

I put the site over on the server: https://islandedition.ca - once you inspect it, I will need to put maintenance mode back on.

Thanks for the reply, I appreciate this.

Can you remove any CSS you have currently added ?

Done. Thank you.

Try this CSS:

.yikes-easy-mc-form.yikes-mailchimp-form-inline {
    display: flex !important; 
}
.yikes-easy-mc-form label.label-inline {
    padding-right: 0 !important;
    width: unset !important;
    flex: 1 0 auto;
}
.yikes-easy-mc-form input,
.yikes-easy-mc-form button {
    line-height: 2.5em
}
.yikes-easy-mc-form .submit-button-inline-label  {
    flex: 0 1 150px;
}
.yikes-easy-mc-form .submit-button-inline-label .yikes-easy-mc-submit-button {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
@media(max-width: 768px) {
    .yikes-easy-mc-form .submit-button-inline-label .yikes-easy-mc-submit-button {
        border-radius: 50px;
    }
    .yikes-easy-mc-form.yikes-mailchimp-form-inline {
        flex-direction: column;
    }
}

Oh man, that's fantastic! Thank you so much, David. I spent a couple hours yesterday trying to figure that out.

I really appreciate this.

Form plugins really like to overcomplicate there HTML... which makes it a CSS minefield :)

Glad to be of help!!