FormKeep EduLog #7: Web forms with Wistia
Using Wistia’s marketing integrations to deliver web forms
Welcome back to the final EduLog
You heard that right. FormKeep’s own white-knuckle thriller of an educational log is coming to a close. Since the EduLog began, you have integrated your first web form into Squarespace, protected it against spam, used it to create an email campaign, piped your data into G Suite, studied a real estate use-case, a school administrator use-case, and finally, this week we’ll hook our trusty web form into the Wistia video player.
In the weeks since our last technical EduLog, our fictional business, the San Jose Veterinary Group, has started posting vlogs to YouTube to help grow their customer base. They’ve seen a lot of viewership, but very few new customers are visiting their lobbies. The VG wants to reap more from their vlogs, and so they turn to the new video hosting SaaS on the block...
So, without further adieu, what is Wistia?
Wistia
Simply put, it’s corporate YouTube 2.0. Wistia is a video hosting service aimed at small business owners and marketing professionals which offers a suite of tools to extract the maximum amount of data from a web video. To learn more about their offerings, check out their homepage.
We think their software is especially relevant to FormKeep users because it is the perfect platform to deploy web forms on. The combination of FormKeep and Wistia allows users to turn a passive watcher into a new prospect.
Wistia has a native web form component called Turnstile which you can use to collect some basic data. However, if you want to collect kinds of data other than the usual name and email, or you want to use FormKeep’s robust data storage and integration solutions, we’ve got you covered.
Adding your Web Form
First, create a free Wistia account. I elected just to borrow one of their videos for this but you can also upload your own content. You’re immediately thrown right into the Wistia deep end, so check out their onboarding documents to get a solid handle on the basics.
Now you’ll be presented with your first video.
To start adding your FormKeep web form, click the “Customise” tab to the right of the videoplayer, and then click the “Call To Action” tab.
You’ll now see an HTML box for your web form and the player will have grayed over. Most importantly, a little tab will have appeared by the bottom of the video, you can use this to select when you want the form to be displayed. It can be a prerequisite to viewing, an end-card, or anything between. You’ll see your selection represented above the HTML box to the left.
Now we have to fill out that HTML box. It may seem intimidating, but I promise that all we have to do is some copy and pasting. As a proof of concept, we will start out with a simple name and email form. Copy the HTML below into the box on the Wistia website.
<form accept-charset="UTF-8" action="https://formkeep.com/f/exampletoken" method="POST">
<input type="hidden" name="utf8" value="✓">
<input type="text" name="first-name" placeholder="What is your name?" style="height: 60px; line-height: 36px; font-size: 24px; font-family: WistiaOpenSans, Helvetica, Arial, sans-serif; padding-right: 12px; padding-left: 12px; width: 500px">
<br />
<input type="text" name="phone-number" placeholder="What is your phone number?" style="height: 60px; line-height: 36px; font-size: 24px; font-family: WistiaOpenSans, Helvetica, Arial, sans-serif; padding-right: 12px; padding-left: 12px; width: 500px">
<br />
<button type="submit" style="margin-top: 30px; background-color: rgb(123, 121, 106); color: rgb(255, 255, 255); font-family: WistiaOpenSans, Helvetica, Arial, sans-serif; font-size: 24px; border-radius: 0px; font-weight: 600; border-style: none; height: 50px; width: 130px;">SUBMIT</button>
</form>
You should see two fields pop up.
Your first Wistia-integrated form lives! However, we still need to connect it to your account and specific web form. Open FormKeep, select your form, and click on the “Setup” tab.
Scroll down to the “If you already have a form” heading and copy the 11 character long code that comes after “/f/”. I.E. “https://formkeep.com/f/XXXXXXXXXXX”
Paste it into the Wistia HTML box by replacing the “sampletoken” phrase at the top of the code you entered. Make sure to scroll all the way up within the box so that you can see it!
Once that code is in place of the placeholder phrase, click save, and your FormKeep web form is now set to display at the time of your choosing! Users can fill it out and submit it into your FormKeep Inbox just like any other entry.
Wistia-Web-Form Enlightenment
And that concludes our final EduLog! I hope that through this tuition, that you, reader, whomever you are, have become a FormKeep Pro. I’ve tried to balance the requisite technical know-how with an easy-to-understand explanation of how all of the different parts of FormKeep work, and package it within an easily consumable word count.
As always, you can check out our traditional documentation on Wistia integration here, for information on how to customize your Wistia form and for basic troubleshooting needs. Of course, you can also always shoot us an email at support@formkeep.com.
It has been a seven week journey towards ultimate web form enlightenment, and while we have yet to reach web form nirvana, we’re well on our way. Feel free to stay tuned to this blog, as we’ll have plenty of non EduLog-related content coming down stream soon, and of course our trusty engineers are working on even more FormKeep features as we speak.
And with that, Joe out!