Contact form on RTL languages come out with a messed up layout.

[OmarFPG]

Quick summary

Contact forms on sites with RTL languages such as Arabic or Hebrew have an off layout.,

Steps to reproduce

Set your site in an RTL language
Add a contact form block and publish it
See the results in the front end

What you expected to happen

The form should look good and properly layed out.be properly laid

What actually happened

Mess up layout, for instance:

Impact

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

No response

Logs or notes

Reported in 7632662-zen and 7559212-zen

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 7632662-zen
• 7559212-zen
• 8009203-zen
• 8244052-zen
• 9065838-zen
• 9176799-zen
• 9223463-zen

[rickmgithub]

📌 REPRODUCTION RESULTS

• Tested on Simple – Could Not Replicate
• Tested on Atomic – Could Not Replicate

📌 ACTIONS

• Author feedback

##Message to author##
Thanks so much for the report @OmarFPG I couldn't replicate the issue by adding a contact form to a simple and atomic site.
Looking at the screenshot it looks like this might be something to do with the theme maybe or the combination of blocks? If you have more info on how to replicate this then feel free to reopen this.

[filipanoscampos]

Reopening this issue as I was able to reproduce it with the Twenty Twenty-Four theme, which is also what the user is using.

Here is how the form is looking on my site when I change to Arabic:

And when I switch back to English:

With the help of the CSS inspector, we can see that the items are missing all styling :

The correctly formatted form:

[jp-imagines]

There's an open issue about this with more info here too: https://github.com/Automattic/i18n-issues/issues/612

[dolgelukkig]

user reported the issue here 8009203-zen , work around was creating the form manually.

[pauljacobson]

We have another report of this issue here: 8244052-zen

I tried applying a Custom CSS solution that was suggested here: 612-gh-Automattic/i18n-issues#issuecomment-2028789128 but this doesn't work with these elements.

[aisajib]

This came up again in 9065838-zd-a8c

The user's site uses the RTL language, Hebrew.

I couldn't figure out a workaround. A comment above mentions creating the form manually, which I couldn't do either. Would someone have any possible workarounds?

[arunsathiya]

9176799-zen; also reported with the StartFitter theme.

[arunsathiya]

I tested with Dadaist, Streamer and Professio themes too, same issue.

[jartes]

Another report on 9223463-zd-a8c

[mdtanjid0]

• Another one here: 9223463-zen (the user needs to be updated once the issue is resolved)