labels to right

Hi @ner

Unfortunately there is no way to achieve that.

Are you using the plugin on a RTL language site? I have not yet done any explicit RTL support. Sorry about that.

Thanks,
Angus

@gusruss89 I use this plugin on a rtl site and would really like an option to change label direction ??

awesome plugin, thank you

@ner by the way,

I did manage to cusotmize it with the following css rules:

.wpcf7 {
  direction: rtl;
}

#cf7md-form .mdc-textfield__label {
    right: 0;
    transform-origin: right top;
}
#cf7md-form .mdc-textfield {
  padding-bottom: 0;
}
#cf7md-form .wpcf7-not-valid-tip {
  margin-bottom: 7px;
}

#cf7md-form .mdc-textfield__label--float-above {
  transform: translateY(-110%) scale(0.75, 0.75);
}

@vertigoooo, thanks! Champion! It helped to a simple form.
A form with additional field types – still a mess(https://cf7materialdesign.com/demos/all-field-types/)
Anything else to change?

@gusruss89
thank you very much for the quick answer.
Your plug-in is a great idea
And Yes, I’m using a RTL language site

@ner
hey there, glad to help..
what exactly type of fields are you having problems with?
my form has only text fields hence my solution targets those type of fields but
if you added

.wpcf7 {
  direction: rtl;
}

other static elements (not like the textfield placeholder which had transform on focus) like the helper text and static labels to check boxes and switches should align right just fine

and perhaps I can take a look on your page (you need to upload it maybe to some sort of hosting) and help you fixing the alignment (maybe the theme is overriding css rules and messing with it)

@vertigoooo
Multiple choice and check box – The selection options are displayed on the right, but the labels themselves are displayed to the left

The same applies to the “I agree to the Terms & Conditions”

@gusruss89
“I’m not a robot” – not shown. The text of the short code is displayed,

Appreciate your help

@ner
Hey again, use this:

#cf7md-form .mdc-form-field > label {
    margin-right:4px;
    margin-left:auto;
}
#cf7md-form .mdc-form-field > .cf7md-switch-label{
    margin-right:16px;
    margin-left:auto;
}

this will fix label alignment

wonderful!
You did it!
Appreciate

.