Je souhaite modifier l'apparence du formulaire qui ajoute une seconde scrollbar sur mon site

Bonjour,

Je souhaite modifier l'apparence du formulaire qui ajoute une seconde scrollbar sur mon site. J'ai modifie le CSS mais ça ne fonctionne pas. Pouvez-vous m'aider à solutionner ce problème?

Merci

Hi clicandbuzz,

Thanks for reaching out to Jotform Support. Our French Support agents are busy helping other Jotform users right now, so 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, it might take a while until they're available again.

Now, coming back to your question, I understand that you have embedded your form on your website, and now you are seeing a second scrollbar in it. Can you share your website URL where your form is embedded so we can check it and better understand what is going on?

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

hi

yes sure here is the link : https://www.labbayk.fr/formulaire-dinscription

i'd rather do it in english if i get help faster no worries.

Hi clicandbuzz,

When I inspected your website where the form is embedded, I could notice that you've placed the form inside a small iframe and the scrolling value is set to 'Yes', causing the scrolling bar to display. Check out the screenshot below to see my results:

As soon as you set the scrolling value of your website iFrame to off, the scroll bar disappears. Check out the screencast below:

That being said, to solve this issue, consider adjusting your website's code. In case you're not familiar about your website's code, you can hire a developer from our Partners Page to do it for you.

Give it a try and let us know if you have any other question.

I dont find this code. It's a google site i'll copy what i ave embeded :

<iframe

 id="JotFormIFrame-243311756907358"

 title="Formulaire de contact"

 onDISABLEDload="window.parent.scrollTo(0,0)"

 allowtransparency="true"

 allow="geolocation; microphone; camera; fullscreen"

  src="https://form.jotform.com/243311756907358"

 frameborder="0"

 style="min-width:100%;max-width:100%;height:539px;border:none;overflow:hidden;-webkit-overflow-scrolling: touch;"

 scrolling="no"

>

</iframe>

<style>

 iframe {

  overflow: hidden !important;

  -ms-overflow-style: none !important;

  scrollbar-width: none !important;

 }

 iframe::-webkit-scrollbar {

  display: none !important;

 }

</style>

<script src='https://cdn.jotfor.ms/s/umd/latest/for-form-embed-handler.js'></script>

<script>window.jotformEmbedHandler("iframe[id='JotFormIFrame-243311756907358']", "https://form.jotform.com/")</script>

Hi clicandbuzz,

The scroll bar is due to the height of the container where the form is embedded. Check out the screenshot below for your reference:

If the height of this container is increased to 1200 px, it will have enough height to accomodate the embedded form, removing the scroll bar. Check out the screenshot below showing this:

This height can be set in your webpage builder.

Give it a try and let us know if you need any help.

thank you it works fine for the laptop version but for the mobile one i stil have the scroll bar so should i change again the height bigger?

Hi clicandbuzz,

After making some tests on your website, the parent element below is restricting the form's height, resulting in the scroll bar.

#h\.222c5bf23866a50b_0 > div > div > div

If CSS styling is available on your web builder, you can try using the following codes:

#h\.222c5bf23866a50b_0 > div > div > div {

height: 1100px;

}

Otherwise, try to increase the parent element's height indicated through your website builder. Here's how it would work:

Give it a try and let us know if you need any help.