How to Embed Typeform Form in Elementor

Here is what happens when you try to embed your form on your website using elementor

After you create your new form on Typeform, you are given the choice to share it.

1. Head to left panel and hit the ’embed in a website’ tab.

2. Copy the embed code and paste it on your elementor page with the HTML widget:

				
					<div data-tf-widget="ZWzs6Ceu" data-tf-opacity="100" style="width:100%;height:100%;"></div><script src="//embed.typeform.com/next/embed.js"></script>
				
			

But here what happens when you paste the provided code in an html widget:

You would think thats enough, however on some hosting providers such as Cloudways, you would nothing but an empty space (I’ve outlined the widget so you can actually see something)
you would end up looking for a plugin to do that correctly. And you may be right – it may be the easiest solution for your case.

However the only plugins available at the moment is either the official plugin “Typeform” available here

or 

 

A quick google search will tell you that “Essential Addons” has a feature to embed Typeform.
(available here

If you are already using Essential Addons, then you are in luck! Just go ahead and follow their documentation. You will be sorted in no time!

But for those like me who already use their favorite Elementor “Addon” Plugin. Having to install another one just to embed a form is an issue: bloating the website with unnecessary addition plugins.

 

3. So here is the solution that requires no plugin at all.
Add an HTML widget as specified in point 2…

However, instead of copying the embed code provided by Typeform, use this one and replace the form URL and ID:

				
					
<div style="width: 100%; height: 500px; color: #ffffff; font-size: 20; border-radius: 100; popup-type: button;" data-tf-widget="xxxxxxxx" data-tf-opacity="100" data-tf-button-color="#0445AF" data-tf-button-text="Launch me" data-tf-medium="embed-wordpress"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

				
			

Here is the result:

Sponsored ads:

Et Voila!

 

Here is how you get the correct URL and ID: 

1. Click on ‘View’ button on the top right of the screen.

2. Copy the URL from the address bar field (keep only the part before ‘?’ mark:

3. Paste it over the example address showed in the HTML widget called ‘url’ (keep it between the ” ” symbols)

4. The ID is just the last part 8 character line after the ‘/’ symbol.
Just paste it back in the ‘formId’ field and ‘data-tf-widget’ field (keep it between the ” ” symbols)

Hopefully this simple tutorial can help you save some time on your next typeform integration. If you have any questions or tips, leave them in the comments below!
Sponsored ads:
Almost done, but…

If you Found this article interesting or Need help, please comment below…

Cheers! Ludovic

Credits

You might be interested in hiding Google ReCaptcha badge on your website. Here is a guide on how to do it right.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I live for Design and Technology as a Graphic and Web Designer. You can contact me through the contact page for your new project!

The latest on what’s moving the web, in your inbox every morning
*This site is protected by hCaptcha and the hCaptcha Privacy Policy and Terms of Service apply.
Other Article that might interest you

Woocommerce Automatically Create Account On Checkout

With these settings a WooCommerce account will automatically be created for all customers during check out. WooCommerce will automatically send an email to the customer with an auto-generated user name and password. Step 1. Login to WordPress and navigate to WooCommerce > Settings. Step 2. Select Accounts & Privacy. Step 3. UNcheck “Allow customers to […]

Read More »