Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #942003

    Hi,

    New site running latest Enfold version (4.2.6) on rtl mode (Hebrew).
    The contact form is showing squish to the left, but when Im changing the language system to ENG, its getting fixed.
    Any Idea ?

    Thx
    Tomer

    #942065

    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

    #942071

    Hi

    It did fix the row, but now the order of the fields is wrong.
    as you can see, the submit should be to the left when you using RTL, and now its at the right .

    Thx again
    Tomer

    #942078

    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

    #942239

    Hi Mike,

    now the row is by the right order but the spacing between the fields is not consistent.
    another side effect, is in the contact page where the form fields is appear diagonally.

    Tomer

    #942269

    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:
    2018-04-15_135150

    Best regards,
    Mike

    #942279

    Hi Mike,

    Did that but the result is still no good
    It does not seem normal yet. The spaces are uneven … something distorted/
    what is the root cause ?
    I dont want to improvise a solution for any form in the future …

    Thx
    Tomer

    #942316

    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

    #942428

    OK

    Did that
    check the links in the private section

    Tomer

    #942532

    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

    #942543

    Hi Mike,
    It seems to be OK.
    So what do I need to do in other page with contact form that are problematic..
    You can see example at the bottom of the homage

    I cant just create any form and it will be OK ?
    Ho do I solve this problem when I need a different form ?

    Thx
    Tomer

    #942862

    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

    #942995

    Hi Mike,

    I need to open ticket for any new page or any new site ?
    I have another 2 new website and I will need to create different forms for them too. ( I ha stated them and already see our problem )
    I have check other site (older site), I think that problem is the last version of Enfold.

    As I think you service is excellent, I cant work with the solution

    Tomer

    #943068

    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.
    2018-04-17_055204
    2: Then copy all the HTML for the form and paste in a plain text editor, such Sublime Text, NotePad++, Geany, etc.
    2018-04-17_055733
    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.
    2018-04-17_060202
    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

    #943235

    Thx For all

    #943321

    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

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.