Contact form fix on RTL

Hey afektomer,
Try this code in the General Styling > Quick CSS field:

#top.rtl .avia_ajax_form .form_element_fourth {
    width: 23.4%!important; 
}
#top.rtl .avia_ajax_form .form_element_fourth {
    margin-right: 0 !important; 
}

Best regards,
Mike

Hi,
That is the order that the element is created, but I tried to help with this:

#top.rtl .avia_ajax_form .form_element_fourth {
    width: 23.4%!important; 
}
#top.rtl .modified_width {
    left: 0!important; 
}
#top.rtl #element_avia_1_1,#top.rtl #element_avia_2_1,#top.rtl #element_avia_3_1 {
    right: 20px!important; 
    float: right!important; 
}
#top.rtl #element_avia_3_1,#top.rtl .modified_width {
margin-right: 0px !important;
}

Best regards,
Mike

Hi,
Let’s try something a little different, I copied the code of your contact form and changed the order so the button was first, then I added a class “inline” so any css we add wouldn’t effect any other form.
Please add this code, your form, to a code block on your page:

<form action="https://getprint.co.il/%d7%a6%d7%95%d7%a8-%d7%a7%d7%a9%d7%a8/" method="post" class="avia_ajax_form av-form-labels-hidden   avia-builder-el-13  el_after_av_one_full  el_before_av_image  av-custom-form-color av-dark-form " data-avia-form-id="1" data-avia-redirect=""><fieldset>
	<p class="first_form form_element form_element_fourth modified_width inline"><input type="hidden" value="1" name="avia_generated_form1"><input type="submit" value="שלח" class="button" data-sending-label="Sending"></p>
	<p class="form_element form_element_fourth inline" id="element_avia_1_1"> <input name="avia_1_1" class="text_input is_empty" type="text" id="avia_1_1" value="" placeholder="שם מלא*"></p>
	<p class=" form_element form_element_fourth inline" id="element_avia_2_1"> <input name="avia_2_1" class="text_input is_phone" type="text" id="avia_2_1" value="" placeholder="טלפון לחזרה*"></p>
	<p class=" form_element form_element_fourth av-last-visible-form-element inline" id="element_avia_3_1"> <input name="avia_3_1" class="text_input is_number" type="text" id="avia_3_1" value="" placeholder="דואר אלקטרוני*"></p>
	<p class="hidden"><input type="text" name="avia_4_1" class="hidden " id="avia_4_1" value=""></p>
</fieldset></form>

then use this css:

#top .avia_ajax_form .form_element_fourth.inline {
    width: 23.4%!important; 
    margin-right: 0 !important; 
}

Expected results:

Best regards,
Mike

Hi,
Can you please place the code block form on a test page so I can see? When I tested this on my localhost there were no spacing issues, see screenshot above, I tried to place the code block on your site myself but the code was not pasting correctly, seems the RTL was mis-placing the code, I thought it was because I’m on LTR.

Best regards,
Mike

Hi,
Thank you for that, I found that you had added all of the css from all of my posts above, when only the css from the last post was needed. Sorry that I was not clear on that. I removed all other wrong css and it now works great on the test page & the contact page.
Please clear your browser cache and check.

Best regards,
Mike

Hi,
This test code block form is your homepage form that I copied the html code from, now you can use it to replace the homepage form.
Typically your forms will not have a issue because the button will be at the bottom, but if you wish to create a new form on one line, we will be happy to assist again. Sorry that I don’t have a better answer for your situation, but we are happy we could assist.

Best regards,
Mike

Hi,
You can add the links to the pages in this thread, as it will be for the same solution. We won’t need to login.
I will describe the steps for anyone to follow along.

1: Using the browser inspector, or developer tools, select the form and right click for the “Edit as HTML” option.

2: Then copy all the HTML for the form and paste in a plain text editor, such Sublime Text, NotePad++, Geany, etc.

3: Then move the last form element, the submit button, to the top of the others, and add “inline” to the classes, and paste the modified code into a “code block” element on your page.

4: Then use this css to make a inline contact form with the button first instead of last:

#top .avia_ajax_form .form_element_fourth.inline {
    width: 23.4%!important; 
    margin-right: 0 !important; 
}

Best regards,
Mike

Hi,
Glad we could help, Please let us know if you would like further assistance, or if we should close this thread.

Best regards,
Mike