Embed your typeform on WordPress
If you have a WordPress site and want to use typeforms, we have great news: you can use our WordPress plugin or embed code to seamlessly incorporate a typeform into your pages.
You can either use the Typeform WordPress plugin or Typeform's own HTML embed code to embed forms into Wordpress.org. This article goes over both options.
If you're using a WordPress page builder like Elementor or Divi, you can also check out these links for specific instructions:
- Elementor: https://essential-addons.com/elementor/docs/typeform/
- Divi: https://www.elegantthemes.com/documentation/divi/code/
Embed your typeform using the Typeform WordPress plugin
You can use the Typeform WordPress plugin to embed an existing typeform into your WordPress page. For this, all you need is the URL of the typeform you want to embed, so you won’t have to fiddle with HTML embed codes.
To embed your typeform with the plugin:
1. Install the plugin. You can download it here. Log in to your WordPress.org account and follow these instructions.
Warning! Using a WordPress.com site? Sorry, but due to their restrictions on external code, this plugin won’t work. It’s just for WordPress.org folks.
2. Now you’ll see the Typeform option in WordPress when adding a block:
Click this button to open the plugin and add a typeform to your page.
3. Paste in your typeform's share URL in the Typeform URL field - remember that your typeform must be published first - and click Embed:
You can now specify if you'd like your typeform to appear in Standard, Popup, Slider, Popover or Sidetab mode.
In Standard mode, you can change the width and height of the embed, toggle the background transparency switch or choose between showing or hiding headers. If you’re an advanced user, you can also add additional CSS classes.
In Popup mode, you can choose the popup size (large, medium, or small), update the button text and font size, choose the button color and button text color, adjust the border radius, and toggle the change button to text and hide header switches.
You can also choose between custom launch options (on page load, on exit intent, after a set time, or after scrolling), and toggle the show launch button switch or the close on submit switch and set a delay time in seconds. If you’re an advanced user, you can also add additional CSS classes.
You can also check out what your typeform will look like by clicking the launch button. Below is an example of a small popup:
Note! You can't view custom launch options in preview mode. If you want to test what your form will look like with these settings, make sure to publish your site first.
In Slider mode, you can select the slider position (right or left), change the button text, font size, button color, button text color, and border radius. You can toggle the change button to text and hide header switches, and choose between custom launch options (on page load, on exit intent, after a set time, or after scrolling), show or hide the launch button, or toggle the close on submit switch and set a delay time in seconds. If you’re an advanced user, you can also add additional CSS classes.
Note! You can't view custom launch options in preview mode. If you want to test what your form will look like with these settings, make sure to publish your site first.
You can also check out what your typeform will look like by clicking the launch button. Below is an example of a slider position on the left:
In Popover mode you can change the button color, add a custom chat icon, and choose to show or hide headers. You can also choose between custom launch options (on page load, on exit intent, after a set time, or after scrolling), or toggle the close on submit switch and set a delay time in seconds.
Note! You can't view custom launch options in preview mode. If you want to test what your form will look like with these settings, make sure to publish your site first.
In Sidetab mode, you can change the button color, add a custom chat icon, choose to show or hide headers, and edit the button text. You can also choose between custom launch options (on page load, on exit intent, after a set time, or after scrolling), or toggle the close on submit switch and set a delay time in seconds.
Note! You can't view custom launch options in preview mode. If you want to test what your form will look like with these settings, make sure to publish your site first.
4. Make sure to save and/or publish all changes!
Warning! Due to how WordPress is designed, it’s not possible to use the plugin to embed your typeform as a full page. Instead, you will need to create a new page and paste the embed code there (see instructions above).
Embed your typeform on WordPress using the Typeform embed code
1. Grab your form's HTML embed code from Typeform using the embed feature in the Share panel. Click Copy to do just that.
2. Open the WordPress Editor for the page where you'd like to embed the typeform. Add a block and choose the Custom HTML option.
3. Paste in your typeform embed code:
4. You can toggle between the HTML and Preview modes to see how your typeform will look on your page:
5. Make sure to save and/or publish all changes!
If you run into any issues using Typeform's embed code, check out our troubleshooting guide for embeds, or contact Support using the button at the bottom of the article.