Wix: Set dynamic height on embedded forms

  • PRAPS
    Asked on June 3, 2020 at 1:27 PM

    Hi

    I have created a form that has some formatting issues when viewing on a mobile device. I have some questions/problems that I have listed here:

    MOBILE PROBLEMS:

    1) My form has scrolling issues when I select a certain field, it stops me scrolling the page properly. It is almost like it sticks. Can I change something so the focus/selected field stops being stuck? To reproduce, try and scroll after selecting a product option on page 2 of the form.

    2a) I have issues with the positioning of the Back and Next buttons on my form. They are in different places on different pages of the form. To reproduce, look at the positioning of the buttons on different pages of my form.

    2b) The formatting of the Save button is different to the Back and Next buttons. How do I style them all the same?

     

    DESKTOP PROBLEMS:

    1) I am not happy with the appearance of my form on mobile or desktop with regards to the sizing of the iframe. Is there a way of giving an iframe a dynamic height value that changes based on the size of the iframe content? I have tried to set a large height value to accommodate the different heights on different pages, but would prefer a dynamic value to get rid of the huge empty spaces on some pages. To reproduce, check out my form.

     

    Original form link: https://form.jotform.com/201536429751355

    Embedded form link: www.klayton.co.uk/clp (FYI, this is a Wix site)

     

    Thank you for reading and thanks in advance for your help and support.

    Jonny

  • John Support Team Lead
    Replied on June 3, 2020 at 5:46 PM

    Hello Jonny - Please allow me some more time to conduct a few tests on this and get back to you here with relevant information.

    Thank you for your patience. 

  • PRAPS
    Replied on June 3, 2020 at 6:54 PM

    Thanks, John. 


    In the meantime, I have solved problem 2b regarding the formatting of the Save button. 

    Another problem I have noticed is the price placeholder positioning is untidy and overlaps on the mobile version of the payment widget on page 2 of my form. Is there a way to customise the position of this text?

  • John Support Team Lead
    Replied on June 4, 2020 at 5:03 PM

    Thank you for waiting! Below are my findings:

    1) I am not happy with the appearance of my form on mobile or desktop with regards to the sizing of the iframe. Is there a way of giving an iframe a dynamic height value that changes based on the size of the iframe content? I have tried to set a large height value to accommodate the different heights on different pages, but would prefer a dynamic value to get rid of the huge empty spaces on some pages. To reproduce, check out my form.

    The iframe embed code that we provide already has auto-height adjustment scripts. This lets the iframe's height to adjust based on how you set a form's page in the FORM BUILDER.

    However, I think the issue is how Wix handles iframes. As you can see here, the Wix has another setting for the embedded page which I believe supersedes the height property we set in the embed code:

    Wix: Set dynamic height on embedded forms Image 10

    When I tried embedding a clone of your form to my test webpage (non-Wix), the iframe dynamically adjusts its height even when I left the height property untouched: https://shots.jotform.com/johnrex/2365822.html 

    So I suggest it best to consult this issue with Wix Support on how to set dynamic height values for embedded iframes.

    Also, I have moved these items to each separate tickets so we can discuss each further there:

    1) My form has scrolling issues when I select a certain field, it stops me scrolling the page properly. It is almost like it sticks. Can I change something so the focus/selected field stops being stuck? To reproduce, try and scroll after selecting a product option on page 2 of the form.

    https://www.jotform.com/answers/2369080 

    2a) I have issues with the positioning of the Back and Next buttons on my form. They are in different places on different pages of the form. To reproduce, look at the positioning of the buttons on different pages of my form.

    https://www.jotform.com/answers/2369081 

  • PRAPS
    Replied on June 4, 2020 at 5:47 PM

    Thanks for your support, John.

    Any idea what's going on with the formatting of my prod

    uct widget?

    It is extremely untidy and has lost its original formatting.

  • John Support Team Lead
    Replied on June 4, 2020 at 9:45 PM

    I have moved the concern about product items on a new thread.

    I will be posting my response here shortly: https://www.jotform.com/answers/2369577