Button hover in contact form

Hi @claus90 – there are no contact forms built into either this theme or WordPress core, so you must be using a plugin for your form. Please provide a link to the page or post with the form, and I’ll be happy to try to point you in the right direction to get help.

Hi, I’m using Jetpack forms.

https://staging2.blog.trading-joe.com/

For help styling Jetpack contact forms, please post in their forums or via their support portal if you have a paid subscription. Be sure to link to a specific form example when you do.

Columns in my homepage are not responsive on mobile. How do I fix it?

URL: https://staging2.blog.trading-joe.com/

Columns are in orange

Hi @claus90 – could you please start a new topic for your new question? Thanks!

So Jetpack said that it is the theme css settings that are causing the form to behave like that and they said to reach out to you

Hey there @claus90 – you can try using this CSS to target buttons in a Jetpack form:

.wp-block-jetpack-contact-form .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
     border: solid 1px #000000;
     background-color: #ffffff;
}

You can modify the colour codes as you like.

That doesn’t work unfortunately. It looks like any change to CSS doesn’t affect the Jetpack form

That’s definitely odd. On my test site where Jetpack is the only active plugin, when I add that custom CSS to the Customizer’s Additional CSS panel, it works well to fix the border hover state.

To rule out a plugin conflict, is the issue present with all your plugins temporarily deactivated, except Jetpack? You can use the Health Check plugin’s troubleshooting mode for this, which will not change your live site. If the problem goes away, reactivate your plugins one by one (while still in troubleshooting mode) to find the culprit.

My colleague Gustavo figured out why this custom CSS isn’t working.

First, we need to add an !important on both property/value pairs, because there are competing !important s coming from somewhere else on your site, possibly a plugin but I’m not sure, as I can’t replicate it. (I cannot replicate this on my test site, where !important isn’t needed.)

Second, you are missing a few closing curly brackets on some of your media queries. This means that custom CSS added below the invalid code isn’t being applied at all, since the browser stops when it hits the invalid CSS.

So, first please try adding this at the top of your custom CSS editor, above all your other custom CSS:

.wp-block-jetpack-contact-form .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover {
    border: solid 1px #000000 !important;
    background-color: #ffffff !important;
}

You should see the button border and background colour now on hover.

Next, you can fix the rest of your custom CSS, either by adding in the missing closing curly brackets in each declaration. Better yet, combine the multiple media queries into one, since it’s not necessary to repeat the same breakpoint over and over.

So instead of these multiple media queries you currently have, with missing closing brackets in most of them:

@media (max-width: 651px) {
.home .wp-block-media-text .wp-block-media-text__content > *:first-child {
 padding-right: 40px;
}	

@media (max-width: 651px) {
.home .wp-block-media-text__media img, .wp-block-media-text__media video {
  padding-right: 50px;
}	
@media (max-width: 651px) {
.home.tw-header-bg:not(.page-template) .entry-content > .alignfull:first-child, .tw-no-title.tw-header-bg .entry-content > .alignfull:first-child {
  margin-top: calc(var(--global--spacing-vertical)*-7);
}
@media (max-width: 651px) {
.post-469 .wp-block-columns .wp-block-column > ol, .wp-block-columns .wp-block-column > ul, .wp-block-columns .wp-block-column p, .wp-block-media-text:not(.alignwide):not(.alignfull) p {
   padding-right: 0px;
}
@media (max-width: 651px) {
#post-4 .wp-block-columns .wp-block-column > ol,
#post-4 .wp-block-columns .wp-block-column > ul,
#post-4 .wp-block-columns .wp-block-column p,
#post-4 .wp-block-media-text:not(.alignwide):not(.alignfull) p {
  padding-right: 40px;
}
}

…you could combine them into something like this instead:

@media (max-width: 651px) {
    .home .wp-block-media-text .wp-block-media-text__content > *:first-child {
        padding-right: 40px;
    }	
    .home .wp-block-media-text__media img, .wp-block-media-text__media video {
        padding-right: 50px;
    }	
    .home.tw-header-bg:not(.page-template) .entry-content > .alignfull:first-child, .tw-no-title.tw-header-bg .entry-content > .alignfull:first-child {
        margin-top: calc(var(--global--spacing-vertical)*-7);
    }
    .post-469 .wp-block-columns .wp-block-column > ol, .wp-block-columns .wp-block-column > ul, .wp-block-columns .wp-block-column p, .wp-block-media-text:not(.alignwide):not(.alignfull) p {
        padding-right: 0px;
    }
    #post-4 .wp-block-columns .wp-block-column > ol,
    #post-4 .wp-block-columns .wp-block-column > ul,
    #post-4 .wp-block-columns .wp-block-column p,
    #post-4 .wp-block-media-text:not(.alignwide):not(.alignfull) p {
        padding-right: 40px;
    }
}

A tip: I’d suggest writing your code in a code editor in the future, as it’ll make syntax errors like this more obvious.

Let me know how it goes!

Great, that worked. Thank you very much for your help.

You’re very welcome!

Looks like the Jetpack folks are also working on a fix on their end, since the issue does only affect Jetpack form buttons. Once that’s been implemented and released in Jetpack, you’ll no longer need the CSS workaround.