Wix: Set dynamic height on embedded forms

  • Profile Image
    PRAPS
    Asked on June 03, 2020 at 01: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

  • Profile Image
    JohnRex
    Answered on June 03, 2020 at 05: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. 

  • Profile Image
    PRAPS
    Answered on June 03, 2020 at 06: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?

  • Profile Image
    JohnRex
    Answered on June 04, 2020 at 05: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:

    15913037912365822.png

    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 

  • Profile Image
    PRAPS
    Answered on June 04, 2020 at 05: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.

  • Profile Image
    JohnRex
    Answered on June 04, 2020 at 09: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