Question

Typeform embed code not displaying properly on the website

  • 30 October 2022
  • 6 replies
  • 270 views
E

Hi, 

I’m trying to embed a typeform form into a drupal website (Go Daddy website builder) and the form is only showing part of the form with a scroll bar to the right of it (see attached image).

I’ve copied the embed code for standard and full screen but getting the same issue regardless.  This is the code it gave me to paste:

<div data-tf-widget="SZMm2N7s" data-tf-opacity="100" data-tf-hide-headers style="width:100%;height:100%;"></div><script src="//embed.typeform.com/next/embed.js"></script>

I’ve tried adjusting the pixel height manually but that just makes the gap underneath bigger and the form issue stays the same.

My trial on the website builder runs out in a couple of days and getting this working determines whether I sign up with them or not so I’d be really grateful if anyone can help please.

Thanks!

Emma 

 

6 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @ems Could you send the URL where you have the form embedded? Thanks!

Life is a series of awkward moments separated by snacks.
E

Hi Liz, 

Thanks for getting back to me.  I’m afraid the site isn’t live yet so I don’t have a url.

It seems to be putting in an additional scroll bar on the right as per screenshot below.  If I change the height to say 500px it improves it a bit but there are more empty white gaps on some pages and there’s always this duplicate scroll bar.

I’ve contacted Typeform about it as well but so far their customer service responses are pretty disappointing.

Thanks again, 

Emma

 

 

Liz
Rank
Userlevel 7
Badge +5

Hi @ems Without being able to see the form live, it’s difficult to tell what the issue is. Is there a test page you could embed the form on? 

Life is a series of awkward moments separated by snacks.
john.desborough
Userlevel 7
Badge +6

@ems - looks like you have both the embedded height scroll bar and the ‘question specific’ scroll bar showing due to the number of options that are showing in the quiz frame.. one is from the widget of your site and the other is the typeform-on-mobile presentation.. 

maybe cut down on your choice numbers and it will eliminate the scroll bar for the question - not perfect but an option.. 

 

 

If your third coffee of the day is not helping you with your Typeform, maybe we can help you find your answers...
E

Thanks Liz, here’s a url, the 2nd question shows the problem well with 3 scroll bars and a big white gap at the top - https://mydrinktype.com/take-the-quiz.

 

Thanks John.  On some questions there is 3 scroll bars like the above example - 2 from Type form plus the 3rd website one.  If it’s a full page embed, I don’t understand why there’s a scroll bar when there is still plenty of space on the website page without scrolling the question could use?  I don’t want an embedded height scroll bar, I’d just like the form to embed in the whole website page so there’s only a question scroll bar needed if there is a genuine need to scroll down.

I’ve been given 3 different codes now from Typeform, none of which have solved the problem :(.

This is the code Typeform site gives me: 

<div data-tf-widget="SZMm2N7s" data-tf-opacity="100" data-tf-hide-headers style="width:100%;height:100%;"></div><script src="//embed.typeform.com/next/embed.js"></script>

This is the latest their CS team has given me (which errors):

<div data-tf-widget="ADD_FORM_ID_HERE" style="width:100%;height:100vh;color:#FFFFFF;"></div>

<script src="//embed.typeform.com/next/embed.js"></script>

Thanks again

Liz
Rank
Userlevel 7
Badge +5

Thanks, @ems ! I wasn’t able to see three scroll bars when I tested this. What device/browser are you seeing this on? 

Life is a series of awkward moments separated by snacks.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs