But Typeform is a separate service from WordPress, so how do you add your Typeform form to your WordPress site? <\/p>\n\n\n\n
In this article, we’ll teach you how to use Typeform with WordPress in three steps. <\/p>\n\n\n\n
Let’s get to work!<\/p>\n<\/div>\n\n\n\n
A quick introduction to Typeform<\/h2>\n\n\n\n
In contrast to most WordPress form plugins<\/a> that create static forms, Typeform lets you create unique conversational forms like this one:<\/p>\n\n\n\n This offers a much more interactive experience than most form plugins for WordPress.<\/p>\n\n\n\n One caveat is that Typeform hosts forms on their own servers. As such, if you want to integrate Typeform with WordPress, you’ll need to jump through a couple of hoops.<\/p>\n\n\n In this tutorial, you’ll learn how to set up your first Typeform form and add it to WordPress. First off, you’ll want to set up an account.<\/p>\n\n\n\n Typeform is a premium service although they do offer a limited free plan<\/a>. The free plan lets you host unlimited forms but you can only process up to ten responses each month – making the “unlimited” aspect of the forms more of a marketing trick than a practical feature.<\/p>\n\n\n\n You also get access to multiple ending screens, hidden fields, templates, and integrations with tools such as Zapier, Automate.io, Slack, Mailchimp, and HubSpot.<\/p>\n\n\n\n If you have a small blog then you can still get some limited use out of the free plan. Otherwise, if you want to accept more than the monthly ten responses, you’ll need to upgrade to at least the entry-level plan. That will up your limit to 100 per month.<\/p>\n\n\n\n Whichever plan you opt to go with, once you set up your account, you’ll be ready to build your first form.<\/p>\n\n\n When your account is ready, you’ll get access to the Typeform dashboard. From here, you can jump straight into the form builder by clicking on the New typeform <\/em>button:<\/p>\n\n\n\n You’ll get to decide whether you want to use a template or design a form from scratch. You should choose Start from scratch<\/em> for the purposes of this tutorial.<\/p>\n\n\n\n On the pop-up form, set a name for your project and select what type of form you’re going to build. For this example, create a simple feedback form:<\/p>\n\n\n\n You then get access to the form builder, where you can set up your first question. If you’re going to collect feedback, you’ll want to start by asking for the submitter’s contact information.<\/p>\n\n\n\n When you click on Add new question, <\/em>Typeform shows you a list of the elements you can use. Here, choose Welcome Screen<\/em>:<\/p>\n\n\n\n You can add text to your new element, and if you click on the image icon, Typeform enables you to upload your own or choose one from a library of stock graphics:<\/p>\n\n\n\n Moving on, it’s a smart move to collect email addresses as soon as possible. With Typeform, you can configure your form so it won’t let users proceed unless they enter a valid address. In this example, it’s left up to our imaginary users:<\/p>\n\n\n\n Moving on, you could maybe add an Opinion Scale <\/em>so users can score your imaginary products on a scale of one to ten:<\/p>\n\n\n\n Finally, a nice “Thank you” message is always a great way to conclude a form. If you use the pre-built Thank You <\/em>section Typeform offers, you’ll notice it even includes social media sharing buttons<\/a>, which is an excellent touch:<\/p>\n\n\n\n Your brief survey is ready now, but it looks a bit ‘barebones.’ If you want to play around with your form’s style, you can jump to the Design <\/em>tab within your form’s settings:<\/p>\n\n\n\n When you’re ready, check out your preview:<\/p>\n\n\n\n At this point, there’s only one step left: adding the form to WordPress.<\/p>\n\n\n Typeform offers an official WordPress plugin that makes embedding forms into your website simple. With the plugin, you get access to a new editor block<\/a> that you can use to quickly add forms anywhere on your site.<\/p>\n\n\nHow to add Typeform forms to WordPress (three steps)<\/h2>\n\n\n\n
\n
Step 1: Set up a Typeform account<\/h3>\n\n\n\n
Step 2: Create a new form<\/h3>\n\n\n\n
![\"Creating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/my-workspace.png\")
<\/figure>\n\n\n\n![\"Selecting](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/scratch-template.png\")
<\/figure>\n\n\n\n![\"Choosing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/client-feedback.png\")
<\/figure>\n\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/welcome-screen.png\")
<\/figure>\n\n\n\n![\"Editing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/welcome-edit.png\")
<\/figure>\n\n\n\n![\"Asking](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:227\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/email-edit.png\")
<\/figure>\n\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:269\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/scale-satisfaction.png\")
<\/figure>\n\n\n\n![\"Adding](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:198\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/thank-you.png\")
<\/figure>\n\n\n\n![\"Tweaking](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/design-tab.png\")
<\/figure>\n\n\n\nStep 3: Install the Typeform WordPress plugin and embed your form<\/h3>\n\n\n\n