wrapper because the form's locale is en_US, so the whole form renders left-to-right no matter what says. That reorders the Hebrew consent sentence and drops the checkbox onto its own line at the left as soon as the label wraps. Fix the consent row explicitly and keep the box at the RTL start (the right). -------------------------------------------------------------------------- */ .wpcf7 .wpcf7-list-item label { direction: rtl !important; align-items: center !important; } .wpcf7 .wpcf7-list-item label > input[type="checkbox"] { order: -1 !important; margin-right: 0 !important; } .wpcf7 .wpcf7-list-item label > span.wpcf7-list-item-label { order: 0 !important; display: block !important; flex: 1 1 auto !important; min-width: 0 !important; direction: rtl !important; text-align: right !important; } /* ----------------------------------------------------------------------------- 2. Validation messages assets/css/style.css gives the tip `line-height: 0.8vh` - a ~7px line box for 11.5px text - so the message is drawn across the bottom edge of the field it belongs to. Give it a real line box and a small gap; it stays in flow, so it can never be painted over the input or over the row below it. -------------------------------------------------------------------------- */ .wpcf7-not-valid-tip { position: relative !important; top: auto !important; display: block !important; line-height: 1.35 !important; margin: 2px 0 0 0 !important; padding: 0 !important; direction: rtl !important; text-align: right !important; } /* ----------------------------------------------------------------------------- 3. Success / error banner width The theme gives it `width: fit-content`, so the message sits in a narrow box and wraps into a column as soon as the text is longer. Let it use the form's full width. -------------------------------------------------------------------------- */ .wpcf7 form .wpcf7-response-output { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important; text-align: center !important; padding: 4px 8px !important; } /* ----------------------------------------------------------------------------- 4. Submit button height On mobile the fields are 46px tall (26px line + 9px padding x2 + 1px border x2) while the submit is 28px. Match the button to the fields. -------------------------------------------------------------------------- */ @media (max-width: 600px) { .cf7-vertical-layout .wpcf7-submit { height: 46px !important; min-height: 46px !important; line-height: normal !important; padding: 0 9px !important; box-sizing: border-box !important; } } /* ----------------------------------------------------------------------------- 5. Typed text inside the mobile fields At <=600px the fields become transparent with a white border, but the base rule still sets `color: #1e3040`, so what the visitor types is dark-on-dark. The placeholder is already white - match it. -------------------------------------------------------------------------- */ @media (max-width: 600px) { .cf7-vertical-layout input[type="text"], .cf7-vertical-layout input[type="tel"], .cf7-vertical-layout input[type="email"] { color: #ffffff !important; } }