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.
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.
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.
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.
Step 5: Then select how you would like to embed your survey. You can choose from either standard or popup.
Step 6: The standard option allows to embed your survey within your content and allows you to set custom dimensions (width and height).
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.
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.
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).
Step 3: After selecting your preferred display option you can preview it and make changes to its size.
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.
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.
Step 6: Paste in the HTML code that you copied into the block and you would have successfully embedded your survey.
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.
Step 3: On the share page under the “embed in a web page” section select “full-page”.
Step 4: Next on the preview page click on get code.
Step 5: Copy the HTML code and paste it below the first line in your custom page template.
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
Other Interesting Articles
