Embed your form on WordPress

If you have a WordPress site and want to use forms, we have great news: you can use our WordPress plugin or embed code to seamlessly incorporate a form into your pages.

You can either use the Typeform WordPress plugin or Typeform's own HTML embed code to embed forms into Wordpress.org or Wordpress.com. 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 instructions

- Divi instructions 

Jump to a section by clicking one of the links below:

- Embed your form using the Typeform WordPress plugin

- Embed your form on WordPress using the Typeform embed code

Embed your form using the Typeform WordPress plugin

You can use the Typeform WordPress plugin to embed an existing form into your WordPress page.

The Typeform plugin lets you embed forms into WordPress in two ways:

- You can copy the URL of the form you want to embed, so you won’t have to fiddle with HTML embed codes.

- You can open the Typeform builder from the plugin to select the form you want to embed, or create a new form, or edit an existing one through the plugin.

To embed your form with the plugin:

1. Install the plugin in your WordPress account.

If you're using WordPress.org, you can download the plugin here and follow these instructions. 

If you're using WordPress.com, you can install the plugin here. Or log into your WordPress account, head over to the Plugins section, and select Add New Plugin. Then search for the Typeform plugin and click Install Now. 

Next, click the Activate button.

2. Head over to the WordPress Editor for the page you'd like to embed a form on. Click on the page where you'd like to place the form and type /typeform. A menu will appear where you can select Typeform to open the plugin and add a form to your page.

3. Decide how you'd like to embed a form. You can either create a new form, paste in the form's URL or select a form from your Typeform account. If you paste in the form's share URL, make sure your form is published first and then click Embed.

If you haven't created the form you want to embed yet, click Create new form. A pop-up will appear and you'll be prompted to log into your Typeform account. You can then select how you'd like to create your new form.

Once you are done with creating your form, click the Embed button to add it to your WordPress site.

If you've already created a form but haven't decided which form you want to embed yet, simply click Select form in WordPress and this will open up the Typeform builder for you in a pop-up window.

Here you can add new workspaces and create new forms, or switch between your organizations.

You can click the Embed form button to embed the selected form straight into WordPress...

...or you can also click on the three dots to open a form in the editor.

You can add, edit or remove questions, change the form's settings, design, or logic, and simply hit Embed in the top right corner to add it to WordPress whenever you're ready.

You can now specify within WordPress if you'd like your form 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 form will look like by clicking the launch me button. Below is an example of a small popup.

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.

You can also check out what your form 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.

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.

4. Make sure to save and/or publish all changes in WordPress!

Embed your form 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 form. Add a Custom HTML block by typing /custom HTML where you want your embed. A menu will appear where you can select Custom HTML.

3. Paste in your form embed code.

4. You can toggle between the HTML and Preview modes to see how your form will look on your page.

5. Make sure to save and/or publish all changes in WordPress!

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.