Answered

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

K
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

13 replies

mathio
Rank
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.

Liz
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.
barriebramley
Userlevel 3
Badge +2

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

Let's keep on learning as we go :-)
A
Rank
Userlevel 3
Badge +3

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

A
Rank
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

A
Rank
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/

A
Rank
Userlevel 3
Badge +3

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

H

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

V
Userlevel 5
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.

V
Userlevel 5
Badge +2

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

T

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.

S

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

A

@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


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs