How to Embed TypeForms in WordPress

woman's hands typing on typewriter

Most WordPress websites need at least one kind of form. Whether it’s to support a survey, quiz, feedback submission, contact page, or contest, form creation is an integral aspect of site building. 

If you don’t know how to add a form to your WordPress site, don’t worry. Typeform is a piece of software that specializes in helping you build forms stylishly. No matter what you need to create, Typeform can get you there. 

In this article, we’ll first discuss why you may want to use Typeform. Then we’ll go over how you can install the plugin and use it to create new content. Let’s dive right in!

Why Use Typeform?

Do you want to create an easier way for clients to submit payments? Or would you like to build a personality quiz, or a contact form so users can leave feedback? Either way, Typeform may be the solution you need:

Typefrom website

As a WordPress website owner, you probably want to know more about the people who visit your pages. Through Typeform, you can encourage greater user engagement, and glean valuable data that lets you better optimize your website and its content.

Let’s take a closer look at some of the reasons your WordPress site might benefit from Typeform:

  • A persona survey could encourage lead generation, by enabling you to better understand your audience or customers.
  • Having a ‘get in touch’ contact form can nurture stronger relationships with visitors and customers.
  • You can offer entertainment through quizzes and the like, improving engagement.

Of course, poorly-designed forms won’t do your website any good. That’s why you need the right kind of tool, one that provides the flexibility and features you’ll require to create conversational WordPress forms.

The Typeform WordPress Plugin

So, why opt for the Typeform plugin in particular? While there are many excellent solutions for creating forms in WordPress, this specific plugin does have some advantages.

Chiefly, it enables you to create more ‘conversational’ forms. These are interactive and guide the user through a series of steps, rather than simply providing a bunch of forms on a single page. The experience is not unlike using a chatbot, and can be clearer and more engaging for visitors:

typeform exampls

Fortunately, this feature doesn’t come at the expense of simplicity. In fact, the Typeform plugin makes embedding forms on your site an intuitive process. Next up, we’ll take a look at how that process works.

How to Install the Typeform WordPress Plugin

Your first step will be to download the plugin from WordPress.org or the developer’s website. This will provide you with a .zip file, which you can upload by going to Plugins > Add New in your WordPress dashboard. Then, select the Upload Plugin button:

plugins section of wordpress admin

After installing and activating the plugin, visit any post or page (and make sure you’re using the Block Editor). A new Add Typeform option will appear when you click on a block in the editor:

Typeform block

In the next section, we’ll see how you can use this option to add forms to your website.

Add an Existing Typeform to WordPress

If you’ve already created a form via Typeform (for example, through the developer’s website), you may simply want to embed it on your WordPress site. To do so, follow these three steps.

Step 1: Log In

First, click on the Typeform button while editing a post or page. You’ll be prompted to log in to your Typeform account:

login to typeform from wordpress

This will result in a login popup appearing. Your next step will be to select your form.

Step 2: Choose Your Form

Once you’re logged in, you’ll see which forms are available to embed. These are accessible via a drop-down menu next to My Typeforms

You’ll have the option to sort through whatever forms you’ve created. After selecting one, you can pick a delivery method. 

Step 3: Decide Between Standard and Popup Delivery

You can choose for your form to be standard, which will load it directly onto the page. Or you can set it to be a popup that users will need to click on. Either option can be a great choice, and the best one for you will depend on the type of form you’re creating.

After making this final selection, you’re all set! All that’s left for you to do is to publish the post or page. Then, your new form will be available to visitors on the front end of your website.

Create a New Typeform Contact Form

Of course, you may also want to create a new form from scratch. Whether that’s because an existing Typeform doesn’t fulfil your needs, or because you haven’t created one yet, getting started is a quick and painless process.

Step 1: Switch the Plugin’s Mode

First, you’ll need to visit the Typeform plugin menu in your dashboard. Then select View Typeform in the top right-hand corner of the plugin’s interface.

Doing so will switch the plugin’s mode, and enable you to start building a new form.

Step 2: Start the Form Creation Process

Next, click on the Start button to answer one of Typeform’s example questions:

create typeform from

It’s a quick step, and then you can start building your form by selecting Create a typeform. This will take you through a short questionnaire that will lead you to your Typeform workspace:

Typeform form creation

Once you’ve gone through Typeform’s questions, you’re ready to get to work.

Step 3: Select Your New Typeform and Template

In the workspace, you’ll see the option to create a New typeform:

Typeform settings

As a free user, you’ll get access to three typeforms. Other options are available only through the plugin’s premium version.

After selecting a typeform, you’ll be taken to the template gallery:

typeform template gallery

You can select a template here to get the ball rolling quickly. Alternatively, you can build a new form from scratch.

Step 4: Create Your Form

At this point, you’re ready to start building your new form. As an example, let’s scroll down the left-hand menu and check out the contact form template on the Quick-Start page:

create form on typeform quick-start page

When you choose a template, Typeform will present a preview of what it will look like. This preview can be edited, enabling you to customize your form’s appearance and functionality:

Typeform form customization

After that, it’s just a matter of building your new contact form (or whatever type of form you’re looking to create). Once it’s finished, you can publish the form, and follow the steps detailed above for adding an existing Typeform to your WordPress site.

Learn More With WP Engine

Engaging visitors to your website and helping them get in touch easily can help you build a stronger audience fast. Of course, to keep those visitors happy, you’ll also need to provide them with an excellent site-wide experience.

That’s why at WP Engine, we point the way towards the best resources for website builders and developers alike. What’s more, we help our users create an incredible digital experience for their customers. Check out our plans to get started today!

Get started.

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.