Skip to main content
Answered

Embed Typeform on Wordpress/Divi


KarenB
Forum|alt.badge.img+2
  • Sharing wisdom
  • 17 replies

I must admit, I’m a bit disappointed. I thought the beautiful TypeForm would take up the whole page on Wordpress/Divi, but I’ve entered the standard embed code in a Divi module and the page is kinda short. Do I have to manually edit code to make it look good? I signed up for TypeForm thinking. it would look better than this on my site, to be honest.

 

Best answer by Antonio

Hi @KarenB are you using the Typeform wordpress plugin? I had a look and indeed the height isn’t working properly, I created a ticket for our team and we will look in to it as soon as possible.

Meanwhile if you are able to edit the generated html code, it will look like this 

<div data-tf-opacity="100" data-tf-medium="embed-wordpress" data-tf-widget="{your form id}" style="height:800;width:100%" id="widget" class="wp-block-typeform-embed-plugin"></div>

You could edit the part of code 

style="height:800;width:100%" and change it to style="height:800px;width:100%"

Or any height you need your form to be, if you want the typeform to take the whole page you could try using height: 100vh.

If you post the link to your website I can have a look and suggest a quick fix, meanwhile be reassured we are working on this and we will fix it ASAP.

Thanks!

View original

10 replies

Gabriel
Ex–Typefomer
Forum|alt.badge.img+5
  • Community Team
  • 858 replies
  • February 11, 2022
KarenB wrote:

I must admit, I’m a bit disappointed. I thought the beautiful TypeForm would take up the whole page on Wordpress/Divi, but I’ve entered the standard embed code in a Divi module and the page is kinda short. Do I have to manually edit code to make it look good? I signed up for TypeForm thinking. it would look better than this on my site, to be honest.

 

 

Agree it doesn’t look right that way. I’m sure @Liz will be able to advice once she gets back online. I really like your typeform’s background design by the way. 


KarenB
Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 17 replies
  • February 11, 2022
Gabriel wrote:
KarenB wrote:

I must admit, I’m a bit disappointed. I thought the beautiful TypeForm would take up the whole page on Wordpress/Divi, but I’ve entered the standard embed code in a Divi module and the page is kinda short. Do I have to manually edit code to make it look good? I signed up for TypeForm thinking. it would look better than this on my site, to be honest.

 

 

Agree it doesn’t look right that way. I’m sure @Liz will be able to advice once she gets back online. I really like your typeform’s background design by the way. 

Thanks. I’ve worked out that it’s mildly better if I add it as a full width code but it still doesn’t have the height. I wonder if it’s something we need to manually adjust each time, or if it’s something in the Typeform code?


Gabriel
Ex–Typefomer
Forum|alt.badge.img+5
  • Community Team
  • 858 replies
  • February 11, 2022

Ok. Liz will take a look once she’s back. In the meantime I encourage other community members to share their tips about this one. 

By the way @KarenB I created a new topic with your question as I believe it deserves its own space. 


Forum|alt.badge.img+3
  • Typeform
  • 30 replies
  • Answer
  • February 11, 2022

Hi @KarenB are you using the Typeform wordpress plugin? I had a look and indeed the height isn’t working properly, I created a ticket for our team and we will look in to it as soon as possible.

Meanwhile if you are able to edit the generated html code, it will look like this 

<div data-tf-opacity="100" data-tf-medium="embed-wordpress" data-tf-widget="{your form id}" style="height:800;width:100%" id="widget" class="wp-block-typeform-embed-plugin"></div>

You could edit the part of code 

style="height:800;width:100%" and change it to style="height:800px;width:100%"

Or any height you need your form to be, if you want the typeform to take the whole page you could try using height: 100vh.

If you post the link to your website I can have a look and suggest a quick fix, meanwhile be reassured we are working on this and we will fix it ASAP.

Thanks!


KarenB
Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 17 replies
  • February 11, 2022

Thank you so much, @Antonio. That’s super helpful. I didn’t realise there was a Typeform plugin! I just used the divi code module. Thanks! Will try editing that code first out of curiosity but hopefully the plug-in will be seamless anyway 


Forum|alt.badge.img+3
  • Typeform
  • 30 replies
  • February 11, 2022

@KarenB we will fix a small issue with the plugin and we are working on a brand new version of the plugin that will be easier to use and implement. Let me know if you got any issue. Thanks and have a great weekend!


KarenB
Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 17 replies
  • February 12, 2022

Oh whoops, I just noticed the ‘design’ drop down option under ‘embed in a web page’ and it lets you adjust the height! I didn’t see this before, and didn’t realise it would be necessary, but can see how to easily do it now. :) 

I’ve looked up some info about Divi and Typeform at Elegant Themes website, and they recommend using the Divi code option, rather than the Typeform plugin which requires the URL (and I can’t seem to access it in the Divi front end editor anyway, so I’ll try the code option again with the altered height. Fingers crossed!


KarenB
Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 17 replies
  • February 12, 2022

Oh my goodness, it worked and I’m so happy with it! This is a HUGE step up from Gravity Forms, which I was using. Now to work out the integration with MailerLite, so I can add people to more that one group/segment based on their answers etc. Fingers crossed! 


Gabriel
Ex–Typefomer
Forum|alt.badge.img+5
  • Community Team
  • 858 replies
  • February 12, 2022

Fantastic news @KarenB ! Feel free to share to share your website URL so we can see how it all looks. 

Enjoy your weekend. 


KarenB
Forum|alt.badge.img+2
  • Author
  • Sharing wisdom
  • 17 replies
  • February 13, 2022

Thanks @Gabriel - this is the page on my site where I’ve hosted the form. Looking forward to doing more again. Although I still need to work out how to add respondents to more than one segment in MailerLite (it’s such a pity we can only add them to one!) https://notmycloset.com/facebook-join-request/


Reply