Embedded form is too narrow and has scroll bars

  • Brenda_Williams_brendaw
    Asked on April 23, 2024 at 4:40 PM

    We are testing out Jotform as a possible form builder for our department. I've created one from blank and when previewing it in jotform, it looks fine. But when embedding it in our wordpress site, it's really narrow and has horizontal and vertical scrollbars. I went into the Designer and changed the width to 800px, but I don't see where I can adjust the height and indicate "no scrollbars". I want the whole form to show.

    https://taxschool.illinois.edu/chapter-licensing/

    Jotform Thread 14191451 Screenshot
  • Jovanne JotForm Support
    Replied on April 23, 2024 at 4:52 PM

    Hi Brenda,

    Thanks for reaching out to Jotform Support. Can you try embedding the form using the IFrame code? You can check this guide on how to get the IFrame code of your form. also, make sure that the embedded form is placed on a full-width container so it can occupy the webpage properly and not on a very limited width. If the issue remains, you may send us a screenshot of how you embedded the form on your webpage so we can check it on our end. This guide will show you how to do that.

    Once we hear back from you, we'll be able to help you with this.


  • Brenda_Williams_brendaw
    Replied on April 24, 2024 at 10:03 AM

    Hello, I did what you suggested and copied the embed/iframe code from my jotform publish options. I was hopeful this was the answer because from the backend, the form was showing. But when I selected "view page block" so I could see if from the front end, it just show code. I am attaching three screenshots: 1) pasting the iframe code into the content of the page block - Text showing 2) same backend page block but Visual tab selected 3) this screenshot is when I select "view page block". I also put the page block in a page and it views the same way. I also tried just pasting the embed code in the content portion of a page instead of a page block and it views the same on the front end.Embedded form is too narrow and has scroll bars Image 1 Screenshot 40Embedded form is too narrow and has scroll bars Image 2 Screenshot 51Embedded form is too narrow and has scroll bars Image 3 Screenshot 62

  • Afzal JotForm Support
    Replied on April 24, 2024 at 10:21 AM

    Hi Brenda,

    Thanks for getting back to us. I embedded your form on a WordPress site and tested it to see if I could replicate the issue, but everything was working properly. Check out the screencast below to see my results:

    Embedded form is too narrow and has scroll bars Image 1 Screenshot 30

    I recommend you to change the embed code to iframe embed code as this is the most recommended embed option. Embedding your form on a webpage using iframe embed code is really easy. Let me show you how:

    • In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
    • In the menu on the left side of the page, click on Embed.
    • Now, click on the iframe option you want to use, and copy the code.
    • That's it. Embed your link on your webpage and you're done.

    Embedded form is too narrow and has scroll bars Image 2 Screenshot 41

    Reach out again if you have any other questions.

  • Brenda_Williams_brendaw
    Replied on April 24, 2024 at 10:35 AM

    That works if you embed in the content portion of a wordpress page. But it doesn't work if you do so in a 2-column text page block.

  • Brenda_Williams_brendaw
    Replied on April 24, 2024 at 10:37 AM

    Here's a url: https://taxschool.illinois.edu/chapter-licensing/

    1. Top form is iframe embedded in the page
    2. Next level is a page block within the page and I embedded the iframe code into the second column of the 2-column page block
    3. The last level is the page block (2 column text) with text on left and a Ninja form on right.
  • Christopher JotForm Support
    Replied on April 24, 2024 at 10:40 AM

    Hi Brenda,

    Could you share with us the link of your webpage where the form is embedded so that we can check it out? I tried accessing the site shown in your screenshot and the webpage was not found.

    Once we hear back from you, we'll be able to help you with this.

  • Brenda_Williams_brendaw
    Replied on April 24, 2024 at 10:41 AM

    Hi Christopher, I did share the link in the thread above yours. I'll recopy and put here:

    Here's a url: https://taxschool.illinois.edu/chapter-licensing/

    1. Top form is iframe embedded in the page
    2. Next level is a page block within the page and I embedded the iframe code into the second column of the 2-column page block
    3. The last level is the page block (2 column text) with text on left and a Ninja form on right.


  • Christopher JotForm Support
    Replied on April 24, 2024 at 11:05 AM

    Hi Brenda,

    Thanks for getting back to us. Please use the Custom HTML in Columns as shown in the screenshot.

    Embedded form is too narrow and has scroll bars Image 1 Screenshot 20

    As you can see from the 2nd column on the screenshot, the form is loaded successfully.

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

 
Your Answer