[Support request] Custom CSS for Email Field and Subscribe Button

[Andrew]

Hello.

I looked through quite a bit here, and could not find anything that covers exactly what I am trying to do.

I would like for my email field and submit button to look like the one of this page: https://www.readthepeak.com/

I don’t know what to call this, so it’s difficult to even explain.

I have found CSS code to make curved corners for the buttons and the field, but not the way The Peak is doing it. NOTE: when the site is in mobile, the submit button moves down and then has rounded corners on both side. I’d love to have exactly what they’re doing. Is this possible?

[Leo]

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 🙂

[Andrew]

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.

[David]

Hi there,

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

[Andrew]

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.

[David]

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

[Andrew]

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.

[David]

Can you remove any CSS you have currently added ?

[Andrew]

Done. Thank you.

[David]

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

[Andrew]

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.

[David]

Form plugins really like to overcomplicate there HTML… which makes it a CSS minefield 🙂

Glad to be of help!!

[Author]

Posts