Mobile view: Scrolling issue with embed form

  • DigiCoppeConsulting
    Demandé le 9 décembre 2023 à 01:02

    question 2 : j'ai intégrer un iframe d'un formulaire dans un editeur de site limite a 10 000 px de hauteur, en version mobile le scroll se bloque et il faut scroller à l'intérieur du formulaire ce qui n'est pas ergonomique, est ce qu'il y a une solution en mettant du code pour régler cela?


    L ia de l'éditeur m'a propose cela :

    ```css iframe { width: 1px; largeur minimale : 100 % ; *largeur : 100 % ; hauteur : automatique ; bordure : aucune ; } ```

    Qu'en pensez vous ?

  • Rahul Jotform Support
    Répondu le 9 décembre 2023 à 01:13

    Hi DigiCoppeConsulting,

    Thanks for reaching out to Jotform Support. Unfortunately, our French Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

    Now, let me help you with your question. Yes, you can try adding CSS code for height as your editor suggested. It will automatically adjust the height of the iFrame on smaller screens.

    Alternatively, you could add scrolling ="Yes" to the iFrame code, which will allow you to scroll the iFrame instead of the form scroll.

    We also have a guide explaining Embedding a Form Into a Web Page that you can check out.

    Let us know if you have any other questions.

  • DigiCoppeConsulting
    Répondu le 9 décembre 2023 à 05:08

    Bonjour

    pouvez vous m indiquer ou mettre ce code ?

    et quel est précisément le bon code pour cela ?

    Merci



  • Joshua_T Jotform Support
    Répondu le 9 décembre 2023 à 09:47

    Hi Denys,

    Thanks for getting back to us. You can add the suggested code of your publisher by modifying the embed code of your form. For example, if you embedded your form using the iFrame Code, you need to edit this part:

    Mobile view: Scrolling issue with embed form Image 1 Screenshot 20

    Give it a try and let us know how it goes.

  • DigiCoppeConsulting
    Répondu le 9 décembre 2023 à 10:59

    Ca ne fonctionne pas

    Au départ je scroll sur le formulaire et c'est le scrool de la page sur version mobile qui prendre le relais au moment ou le premier bloque

    Avez vous une solution à me proposer ?

  • Annaliza_O Jotform Support
    Répondu le 11 décembre 2023 à 07:18

    Hi Denys,

    Thanks for getting back to us. To further investigate, can you please provide us with the specific link where the form is embedded?

    Once we hear back from you, we'll be able to move forward with a solution.

  • DigiCoppeConsulting
    Répondu le 11 décembre 2023 à 08:41

    Voici des intégrations en code source et ifram

    https://codehtmltest123456789.now.site/iframe

    sur pc ou mobile vous verrez que l'on passe de la barre défilement du formulaire à celle de la page

    Et sur mobile ca fait un bloquage complet de la diffusion

    il faudrait pouvais faire defiler que l'intérieur de l'iframe ou du code source

    Merci

  • Rahul Jotform Support
    Répondu le 11 décembre 2023 à 08:57

    Hi Denys,

    Thanks for getting back to us. I’ll need a bit of time to look into this. I’ll get back to you shortly. Thank you for your patience and understanding.

  • Rahul Jotform Support
    Répondu le 11 décembre 2023 à 09:02

    Hi Denys,

    Thanks for patiently waiting. Can you try adding overflow-x: hidden; overflow-y: hidden; styles to the body tag of your external website page, as shown below:

    <body style="overflow-x: hidden; overflow-y: hidden; . . .

    Give it a try and let us know how it goes.


  • DigiCoppeConsulting
    Répondu le 11 décembre 2023 à 11:53

    A quel endroit faut t'il mettre ce code j'ai limpression de ne pas y avoir accès ?

  • Afzal Jotform Support
    Répondu le 11 décembre 2023 à 14:58

    Hi Denys,

    Thanks for getting back to us. I tested the form on your website to see if I could replicate the issue, and I ran into the same problem. When I looked at your site I found that the issue is specific to your website. Please note that the iframe embed code is responsive by default and does not require any modification to adjust the form on different devices. The reason your form is creating an extra scrollbar is that your site is adding the iframe embed code inside another iframe embed code. The disadvantage of having iframe embed code inside another is that the child iframe embed code will not be able to stretch to full width:

    Mobile view: Scrolling issue with embed form Image 1 Screenshot 30

    I embedded your form on a test site however I was not able to replicate the issue:

    Mobile view: Scrolling issue with embed form Image 2 Screenshot 41

    I recommend you to contact your web developer of the site builder to see if they can help you with this.

    Let us know if there’s anything else we can help you with.