Skip to main content
Answered

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


Forum|alt.badge.img

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?

Best answer by mathio-tf

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.

View original

mathio-tf
Typeform
Forum|alt.badge.img+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.


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • March 15, 2022

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


barriebramley
Forum|alt.badge.img+2
Liz wrote:

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


Forum|alt.badge.img+3
  • Typeform
  • May 9, 2022

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


Forum|alt.badge.img+3
  • Typeform
  • May 9, 2022

@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


Forum|alt.badge.img+3
  • Typeform
  • May 10, 2022

@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/


Forum|alt.badge.img+3
  • Typeform
  • May 10, 2022

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


  • Navigating the Land
  • June 9, 2022

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


Forum|alt.badge.img+2
  • Sharing wisdom
  • June 9, 2022

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.


Forum|alt.badge.img+2
  • Sharing wisdom
  • June 13, 2022

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


  • Navigating the Land
  • July 27, 2022
kylefuller wrote:

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.


  • Navigating the Land
  • October 7, 2022
Antonio wrote:

@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. 


  • Navigating the Land
  • November 6, 2023
Antonio wrote:

@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/

Thanks for this. Still very useful a year later


Reply