Feedback
Answered

Typeform full page embed, not filling full page on my wordpress site


Userlevel 2
Badge

When I add the embed typeform (full page) code onto my Wordpress site via (custom html) the type from is not filling the full page. 

 

Anybody had this issue?

icon

Best answer by mathio 8 March 2022, 09:47

View original

12 replies

Userlevel 7
Badge +5

Hello @kylefuller 

your Wordpress page is most likely displaying other HTML content before and after your embedded typeform. For best results make sure the only content in your page is the embed code. Otherwise you will need some custom CSS to make sure your typeform fits with those other elements you have in your page.

Userlevel 7
Badge +5

Hi @kylefuller Were you able to update the code on your page? :grinning:

Userlevel 2
Badge

Hi @kylefuller Were you able to update the code on your page? :grinning:

I can’t get the full-page code to work on Wordpress. Whether I use DIVI (blockbuilder) or not, it only shows a small fraction of the Typeform. I can get a ‘pop-up’ to fill the screen, but not the full-page code. I really hope someone can assist?

 

Thanks

 

Barrie

Userlevel 3
Badge +3

Hi @barriebramley can you share the code you are using and your website? I can have a look at it

Userlevel 3
Badge +3

@barriebramley the full page code from our share section assumes that you are using a single html page, this might be the reason that is not working for you. If you share your code I can help you out and give you a correct snippet to make it work with Wordpress

Userlevel 3
Badge +3

@barriebramley this is an example of html code that you can use for showing the typeform in full page 

<style>
#wrapper {
width: 100%;
height: 100%;
min-height: 100vh;
}
iframe {
border-radius: 0 !important;
width: 100%!important;
height: 100vh!important;
}

</style>
<div id="wrapper" class="alignwide" data-tf-widget="bUfkO2GI" data-tf-inline-on-mobile data-tf-medium="snippet"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Where in the part with data-tf-widget="{here your form id}" you replace it with your form id (you can get it from the Url or in your admin page).

Notice the alignwide class assigned to the wrapper, this is because Wordpress uses these classes to determine the width of the element. If you use this code you should get something like this https://s-q6wy22md663ll.eu1.wpsandbox.org/hello-world/

Userlevel 3
Badge +3

If you need the access code to see the website is 523

Hi all! I am facing the exact same issue - was wondering if you guys found a fix?

Userlevel 4
Badge +2

Yeah, seems like there are problems with this part in wordpress, there is no clear way to make it full page typeform, and needs plenty of workarounds, very innefective, and plugin also doesnt seem to support this.

Userlevel 4
Badge +2

Actually @Antonio method is really working, thanks for a solution!

When I add the embed typeform (full page) code onto my Wordpress site via (custom html) the type from is not filling the full page. 

 

Anybody had this issue?

 @kylefuller Your Wordpress place is most likely displaying other HTML content before and after your embedded typeform. For best results make sure the only content in your page is the embed code. Otherwise you will need some custom CSS to make sure your typeform fits with those other elements you have in your page.

@barriebramley this is an example of html code that you can use for showing the typeform in full page 

<style>
#wrapper {
width: 100%;
height: 100%;
min-height: 100vh;
}
iframe {
border-radius: 0 !important;
width: 100%!important;
height: 100vh!important;
}

</style>
<div id="wrapper" class="alignwide" data-tf-widget="bUfkO2GI" data-tf-inline-on-mobile data-tf-medium="snippet"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Where in the part with data-tf-widget="{here your form id}" you replace it with your form id (you can get it from the Url or in your admin page).

Notice the alignwide class assigned to the wrapper, this is because Wordpress uses these classes to determine the width of the element. If you use this code you should get something like this https://s-q6wy22md663ll.eu1.wpsandbox.org/hello-world/

This is perfect, thank you. 

Reply