video guide

Embedding a Typeform with the Divi Builder

Embedding a Typeform with the Divi Builder
Userlevel 7
Badge +5
  • Tech Community Advocate
  • 12699 replies

Looking to embed your Typeform onto a Wordpress site using the Divi builder? Follow the steps below to add your form to your website!

 

 

To get started, copy the code for your form by going to Share → Embed. All forms of the embed will work except for the Full Page embed. To use the Full Page embed, the only code on the page can be the Typeform code, so this option won’t work with Wordpress builders. 

 

txZSdMeRO00FNDkIMHhsK8XT4ZAD8TsHm0PBhha5sZketQIkJsSYc0rCiQa1ERhgKnAfmRk_RV6-FP8kPzBis6S5Y7L5fJv7brwihgLfdcVGk_vNJv_EsxFNtp_0dUtOCM3clOAa

 

Next, copy the code and head over to your website. Click the option to edit the page using the Divi builder.

 

Then, in a new row, search for the Code block.

 

2niy43yUDbUf-VK7s9YHl_ncmNpYtd2gEJZjvdolOcCysq8K2642GjxmOopvLmazdddL25nPWMkiEPAV_bIBp2TcendpaBo1zMg-Lpgwp21EZtnp0ZUXVQjHH_JqzhWuP-iJMbLE

 

Finally, add your Typeform code into the block, and then click Save Draft. And voila! Your typeform is now added to your website using the Divi builder. 


19 replies

Userlevel 7
Badge +6

@Liz 

 

Userlevel 7
Badge +5

@john.desborough 

 

Badge +5

Sweet. Thanks for posting @Liz You rock 🎸

Userlevel 7
Badge +5

@Gabriel :rofl:

 

This isn’t working for me. 

I followed the tutorial exactly. Help appreciated :)

 

Userlevel 7
Badge +5

Hi @c4444 If your website isn’t an HTTPS site, you’ll see the message like that one. The post below has a bit more information about this: 

 

Actually - ignore me. I’ve realised that it only applies site wide when it sits on the home page, and if it’s not on the home page, then you can choose the pages where it does sit. Thanks!

Hi Liz, this is great thank you. 
Is there a way to disable the embedded form from coming up on certain pages?
I have only added the code at the bottom of the home page and it’s coming up site wide. It’s helpful in most cases, but there’s one page (what is looking to become the new home page) which should not have it pop up at all. Any thoughts here would be massively appreciated!
Many thanks,

Martine

Userlevel 7
Badge +5

Ha glad to hear that you were able to figure it out, @MartineS ! Let us know if we can help with anything else. 😀

Hello,

The embedded protocol & code has changed : 

<div data-tf-live="01HA1WEG0DEFX4073KYY5FCTGW"></div><script src="//embed.typeform.com/next/embed.js"></script>

when previously it was 

<button data-tf-slider="SOzgvVLS" data-tf-position="right" data-tf-opacity="100" data-tf-iframe-props="title=Diagnostic sociologique de votre direction (site)" data-tf-transitive-search-params data-tf-medium="snippet" style="all:unset;font-family:,Arial,sans-serif;display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#ffffff;color:#0047b0;font-size:22px;border-radius:25px;padding:0 33px;font-weight:bold;height:50px;cursor:pointer;line-height:50px;text-align:center;margin:0;text-decoration:none;"> Testez notre diagnostic </button><script src="//embed.typeform.com/next/embed.js"></script>

 So we can’t anymore change some parameters as previously like font color, button description, etc. 
Why ? or How can we customize the aspect of the form ?

Thanks

Userlevel 7
Badge +5

Hi @Kant1 We recently posted about this new feature to the embed here. 😀

 

Hello! I've successfully integrated a Typeform into my Wordpress site using the Divi builder, and it displays beautifully on Desktop. However, I'm encountering an issue with the Mobile view: the Welcome Screen's button is missing. This problem persists across various browsers. Does anyone have suggestions for resolving this mobile display issue? Thank you for your help!

How it should look like

 

How it actually looks like

 

Userlevel 7
Badge +5

Hi @FinKratt I hope you’re having a lovely day so far! Could you please include the URL where the form is embedded so we can take a look? Thanks!

Hey @Liz ! Here’s the URL: https://finkratt.com/finkratt-poc/

Userlevel 7
Badge +5

Thanks, @FinKratt ! I believe the issue is caused because the form is being embedded as an iFrame instead of using the full-screen embed code we provide. 

@mathio would they be able to use the Embed SDK to essentially do the same thing without having to use the standard full-page embed code? 

Hello! I’m embedding my Typeform as a pop-up button in Divi builder, and the issue I’m having is that the container is loading but the javascript is not, and I’m left with an empty box. Any idea how I can tweak this to get it to work? 

 

Userlevel 7
Badge +5

Hi @garretcragun Do you mind sharing the URL where we can access the embed? Thanks in advance!

@Liz it’s not currently live on our site, but here’s a testing page where you can see it. It’s the button just beneath the title. (ignore the various design issues, it’s all a bit of a mess)

https://www.batemancollective.com/my-home-2/

Userlevel 7
Badge +5

Hello @FinKratt 

 

The Issue


I see you are overriding default typeform CSS and setting height to 100vh:

On mobile browsers, the height of 100vh also includes the space covered by navigation bars. This means the start button on your typeform is rendered under the navigation bar.

When the navigation bar is hidden, the button is visible:

 

How to fix this?


You will need to make sure the iframe has height if 100% instead of 100vh. You can use the data-tf-full-screen option of embed SDK and the SDK will try to automatically resize the form.

Or, if you need to set the height manually you could set it to 100%. However you need to make sure all parent elements heights are set to 100% as well.

Userlevel 7
Badge +5

@garretcragun I can see your typeform popup just fine:

 

Maybe you have some kind of adblock browser extension that prevents our embed SDK from loading? Most adblocks should not but you never know 🤔

Reply