Step By Step Guide to Embedding TypeForms in WordPress

Typeform is one of the best surveying tools on the market today. It delivers some of the most visually pleasing and professional surveys out there. This is the reason why so many users agree that using Typeforms can indeed increase the completion rate of your surveys.

Typeform allows you to white-label your surveys with its premium membership. However, it can seem a bit limiting if your goal is to completely white label your surveys. This is because within the platform it only allows you to remove the “powered by Typeform” branding and the spinning loading logo, and that’s about it.

If you want to do any further white labeling to your surveys such as a custom website URL or favicon, you’ll have to embed your Typeform onto a page on your website. This may sound difficult but it’s quite easy when using WordPress. In this article, I’ll take you through the three ways in which you can embed your Typeform surveys on your website.

How to Embed Typeform in WordPress

Ways to embed a Typeform In WordPress

  • Drawer
  • Popup 
  • Within content
  • Full page embed

The fastest and easiest way to embed your Typeform survey onto a page on your WordPress website is to use the Typeform plugin. 

Method 1 – Embed a Typeform in WordPress Using a Plugin 

Step 1: Start by installing and activating the Typeform plugin.

Embedding a Typeform using a plugin step 1

Step 2: Then go to the page where you would like to add your Typeform survey. 

Step 3: In the WordPress, editor click on the plus then search for and select the Typeform block. 

Embedding a Typeform using a plugin step 2

Step 4: Next you can either copy your custom Typeform survey link into the space or simply log in to your Typeform account and select the survey that you would like to embed.

Embedding a Typeform using a plugin step 3
Copying your Typeform link
Embedding a Typeform using a plugin step 4
Login into your Typeform account

Step 5: Then select how you would like to embed your survey. You can choose from either standard or popup.

Embedding a Typeform using a plugin step 5

Step 6: The standard option allows to embed your survey within your content and allows you to set custom dimensions (width and height).

Embedding a Typeform using a plugin step 6

Step 7: Popup, as the name suggests, is a popup. You can have your popup be full-screen or have it slide out from the left or right sides of the page. 

Embedding a Typeform using a plugin step 7

Method 2 – Embed a Typeform in WordPress Using HTML

If for some reason you don’t want to use the plugin then you can embed your Typeforms surveys using HTML. 

Step 1: Log in to your Typeform account find the form that you want to embed and click on the ellipsis (the three dots) on the bottom right then click share.

Embedding form with HTML step 1

Step 2: On the share page you will see two options “share your Typeform” and “Embed in a web page”. Under the “Embed in a web page” option select one of the six options available. (Keep in mind that the full-page embed won’t work with this method). 

Embedding form with HTML step 2

Step 3: After selecting your preferred display option you can preview it and make changes to its size.

Embedding form with HTML step 3

Step 4: When you’ve finalized your preferred design and embed mode click on the “Get the code” button and copy the code that appears in the popup.

Embedding form with HTML step 4

Step 5: Return to the page that you would like to embed your survey on and click on the plus sign, then search and select the custom HTML block.

Embedding form with HTML step 5

Step 6: Paste in the HTML code that you copied into the block and you would have successfully embedded your survey.

Embedding form with HTML step 6

Method 3 – Full-page Embed a Typeform in WordPress

First off to achieve this you will need to create a custom page template in WordPress. For you to do this you will at least need some basic knowledge of HTML, CSS, and PHP.

Step 1: First you would need to open a plain text editor like notepad or Visual Studio Code and copy the following code into the blank document.

<?php /* Template Name: MyCustomPage */ ?>

You can change the part that reads “MyCustomPage” to any name that you like. I would recommend giving it the same name as your survey. This first code is used to tell WordPress that the file is a page template and the name is “MyCustomPage”

Step 2: Next, return to Typeform and select the survey that you want to embed and click on the ellipsis (the three dots) on the bottom right then click share.

Embedding form with HTML step 1

Step 3: On the share page under the “embed in a web page” section select “full-page”. 

How to embed your form full screen in WordPress step 3

Step 4: Next on the preview page click on get code.

How to embed your form full screen in WordPress step 4
How to embed your form full screen in WordPress step 4a

Step 5: Copy the HTML code and paste it below the first line in your custom page template.

How to embed your form full screen in WordPress step 5

Step 6: Save the file on your computer as YourSurveyName.php so you can easily find it.

Step 7: Next, go to your website file manager and navigate to your theme folder. This folder should also contain the page.php.

Step 8: If you are hosting your website with Siteground your theme folder should be located here: YourDomainName > public_html > wp-content > themes > YourThemeName.

Step 9: In this folder upload the file we just created YourSurveyName.php

Step 10: Next return to WordPress create a new page give it a title I suggest the same name as the survey 

Step 11: In the menu to the right choose the template you just made 

How to embed your form full screen in WordPress step 4

Other Interesting Articles