Specific Jetpack Form labels not aligning correctly

Resolved samglass
(@samglass)

1 month, 1 week ago
I have been using Jetpack forms for a while on this site but no matter what I do, no matter what I try, the form field labels on this particular form are always center aligned. The preview of the form from the Jetpack Forms list appears correct with the labels left aligned, but as soon as I insert into the page, the show up in the center.
I’m using Google Chrome, on a MacBook Pro, and an Apache server.
WordPress, themes, and plugins are all updated to latest versions.
- I have tried creating a new form entirely.
- I have duplicated and edited a working form.
- I have tried copy and pasting label styles from the forms that are appearing correctly.
- I have tried inserting this form into a different page.
- I have tried comparing all the settings and styles between the working forms and this one.
And I’m just lost as to what to do next.

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Support Chatoxz (a11n)
(@chatoxz)

1 month ago
Hi Sam,

Sebastian here, I hope you are doing well.

That sounds frustrating, especially after going through every comparison and rebuild you can think of. Let’s get to the bottom of it.

The fact that the form preview shows the labels left-aligned but the page output centers them is a strong sign that something on the front end of your site, a theme stylesheet or another plugin, is overriding the form’s default styling on that specific page. The cleanest way to confirm this is a standard plugin and theme conflict test:
1. Switch your active theme temporarily to a default WordPress theme like Twenty Twenty-Four or Twenty Twenty-Five, then reload the page with the form. If the labels now render left-aligned, the active theme is adding the center alignment.
2. If the theme is not the cause, switch back to your default theme and deactivate all plugins except Jetpack. Reload the page. If the labels are now correct, reactivate the other plugins one at a time, checking the page after each, until the labels recenter. The last one you turned on is the one causing the conflict.
You can see these theme troubleshooting steps in detail in our Troubleshooting guide.

If you would rather not do this on the live site, you can use a staging copy or run the test in an incognito window so logged-in caching does not affect the result.

A couple of quick things worth checking in the editor before or during the conflict test, since they sometimes catch the issue without needing the full deactivation pass:
- Click the form block in the editor and look at the parent containers in the breadcrumb at the bottom (Group, Columns, Cover, Stack). Open each parent’s toolbar and check whether “Align Text” is set to center, since that cascades down to the form’s labels.
- Switch the page to the Code Editor view (top-right menu in the post editor) and look for “has-text-align-center” or an inline style=”text-align:center” on the wrapper around the Jetpack form.
If you can share the URL of the page once you have done a round of testing, I am happy to inspect the rendered markup and pinpoint exactly which stylesheet is adding the alignment.

Looking forward to your reply.
Thread Starter samglass
(@samglass)

3 weeks, 3 days ago

Hey there- thank you very much for the thorough breakdown of options. I did check all the containers (many of which don’t have alignment controls on their toolbars) and the code editor and didn’t find anything.

However, the heading above the form was properly aligned left and then applied the “wide-width” alignment to it and it went to the center, even though the justification still says left. So I’m suspecting something is awry in that style. Seems odd since I use that style throughout the site.

Anyway, I’m about to go test the default theme on the staging site as well as deactivating plugins and will report back.

Thread Starter samglass
(@samglass)

3 weeks, 3 days ago

Well, that was simple enough, I guess. Activating the default theme on the staging site made all the labels align left, so it seems like it’s the theme. I am not an expert in digging into theme code so your help would be greatly appreciated.

The page URL is https://wissmachglass.com/contact-us/

The staging URL in case it’s relevant is https://staging4.wissmachglass.com/contact-us/

Also in case its relevant, Jetpack is in Safe Mode on the staging site as per Jetpack’s recommendation.

Thanks in advance!

Sam
Plugin Support Chatoxz (a11n)
(@chatoxz)

2 weeks, 6 days ago
Hi Sam,

Sebastian here, I hope you are doing well.

Nice work running the default-theme test on staging, that narrowed this down quickly. You are right, the theme is doing it, and your “wide-width” clue was the giveaway.

I inspected the page’s stylesheet and found the exact rule responsible:
```
/* CSS */
.alignwide, .alignfull {
    max-width: none;
    text-align: center;
}
```
In WordPress core, .alignwide and .alignfull are intended to control width only, not text alignment. That extra “text-align: center” is added by the active theme (Responsive Brix Premium, based on your page’s template meta tag), and it cascades into anything you set to Wide width, including the Jetpack Form block, which is why your form labels (and the heading you tested) end up centered.

Since this lives in the theme’s stylesheet, the practical fix on your end is a small CSS override. Add this in Appearance > Customize > Additional CSS:
```
/* CSS */
.wp-block-jetpack-contact-form,
.wp-block-jetpack-contact-form label,
.alignwide .wp-block-jetpack-contact-form,
.alignwide .wp-block-jetpack-contact-form label,
.alignfull .wp-block-jetpack-contact-form,
.alignfull .wp-block-jetpack-contact-form label {
     text-align: left;
}
```
That re-asserts left alignment on the Jetpack form and its labels without touching any other wide-width content on the site, so your layout stays as-is. You can read more about adding custom CSS here: https://wordpress.com/support/custom-design/editing-css/

A couple of extra notes that might help:
1. Because the rule lives in the active theme’s stylesheet, the long-term fix really belongs on the theme side. I’d recommend reaching out to Brix Templates support and asking them to remove “text-align: center” from their .alignwide / .alignfull rules, since those classes are only supposed to control width in WordPress core. Feel free to point them at this thread.
2. The Jetpack Forms documentation, in case it helps for future reference: https://jetpack.com/support/jetpack-blocks/contact-form/
Looking forward to your reply.

Best,
Thread Starter samglass
(@samglass)

2 weeks, 6 days ago

THANK YOU THANK YOU THANK YOU!!!

Adding the CSS you provided has worked and at least temporarily solved a long time headache.

I’ve also submitted a ticket to the creators of the Responsive Brix theme requesting the change to the stylesheet and pointing them here for greater context.

Plugin Support Chatoxz (a11n)
(@chatoxz)

2 weeks, 3 days ago

Hi Sam,

Sebastian here, I hope you are doing well.

That’s wonderful to hear! Thank you for confirming the override is holding things in place.

It’s also great that you flagged this with the Responsive Brix team. A change on their side would be the proper long-term fix. Until that update lands, the CSS override will keep your form labels (and any future Jetpack Forms you add) aligned correctly.

If you have a moment, could you give us a 5-star review to help us spread the word about our plugin?

https://ww.wp.xz.cn/support/plugin/jetpack/reviews/#new-post

This will help us promote our product and the support we offer to our users. We appreciate your time in advance if you can spare a few minutes!

Thanks in advance if you spend some minutes of your time!

Warm regards,

Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.