How to add a custom form to a Wistia video

What you can do

Why this is useful

Wistia is a wonderful choice for hosting video for your business.

One powerful feature for marketers is the ability to ask for information from someone watching your video. This lets you turn drive-by visitors into high-quality leads.

If all you need to capture from a visitor is their email address, the Turnstile feature is everything you need. Head to Wistia's Turnstile documentation and get started.

However, if you'd like to capture more than just a name and email address, Turnstile doesn't support this.

Fortunately, FormKeep (that's us) has you covered. We make it simple to add a custom form to Wistia videos, so you can capture whatever information is important for your sales and marketing efforts.

Information you can capture

That's totally up to you! FormKeep forms are completely customizable.

However, here are a few ideas to get you started:

  • Name and phone number
  • Email address and job title
  • Feedback about your video
  • Email address and company size

How to do it

Adding a custom form to your Wistia video is fairly simple.

Let's imagine we want to capture the name and phone number of everyone who views one of our videos. Here's the process:

  1. Create an account on FormKeep.

    Signup is super quick. You can get started with just an email and password.

    The link above will open in a new tab so you can continue following these directions.

  2. Create your form on FormKeep.

    Immediately after you sign up, you'll be asked to create your first form. Here's what that screen looks like:

    New form

    The only required field is the first one, Name. Choose a descriptive name like we've done here ("Name and phone number capture for landing page video").

    After you've chosen a name, click "Create Form".

  3. Add a Call to Action to your Wistia video

    Now we need to add a Call to Action on your Wistia video.

    Open a video and click the blue Video Actions button.

    Then, click Customize.

    Click Timeline Actions, and then Add Call to Action.

    Finally, select HTML from the Type dropdown.

    The left side of your screen should look something like this:

    Call to action
  4. Paste the following code into the HTML input

    This might look a bit scary, but don't worry! You don't need to understand what everything is.

    
    
    <form accept-charset="UTF-8" action="https://formkeep.com/f/XXXXXXXXXXX" 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>
        

    Here's where to paste that code:

    Code goes here
  5. Check out your sweet form!

    Notice that as soon as your paste that code, your video now has a custom form asking for name and phone number. Just what we wanted!

    Form in video

    You're almost done.

  6. Copy your unique form id

    Your Wistia video now has a nice form in it, but we have one last bit of configuration to do. We need to tell Wistia where to send your form's data.

    We need to copy the unique id from the form that we created a few steps ago.

    Go to your tab that's opened to the FormKeep site and copy your unique id. It's an 11-character code consisting of numbers and letters.

    In the screenshot below, it's highlighted in yellow. Note: your code will be different!

    Form id
  7. Replace XXXXXXXXXXX with your unique code

    Scroll to the top of the HTML input and change "XXXXXXXXXXX" to the value you copied in the last step.

    Id pasted in
  8. Save your video

    Save the changes we just made by clicking Save. You're done!

    Click save
  9. BONUS: Set up your form to submit without refreshing or redirecting page

    At this point, when your visitors click the submit button the form will submit and redirect to the address you've specified in formkeep's "Redirect URL" configuration. If you would like to submit the form in the background and continue watching the video after submission, here's what you need to do.

    If you are using the Wistia javascript embed code, you can update the snippet of code on the page where your video is embedded to resemble the following:

    
    <script>
      window._wq = window._wq || [];
      _wq.push({
        id: "_all",
        onHasData: function(video) {
          video.addPlugin("formkeep", { src: "https://formkeep.com/wistia-plugin.js" });
        }
      });
    </script>
    <script src="https://fast.wistia.com/embed/medias/##########.jsonp" async></script>
    <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
    

    Don't forget to change the ##########.jsonp in the above to your actual video embed ID!

What it looks like when someone submits your form

When someone submits your form, that data will appear in FormKeep instantly.

Imagine someone filled in your form like this:

Enter data

(Note: this form is different than the one we just created earlier.)

When they submit the form, your FormKeep dashboard will update like this:

Data in fk

If you like, you can have FormKeep email you this data every time someone submits your form. Additionally, you can use our Zapier integration to send this data to Trello, Slack, Salesforce, Google Docs, etc.

How to collect other kinds of data

The example above works great if you want to collect a name and phone number.

If you have different information you'd like to collect, you just need to change the form data that we pasted into the HTML input.

If you know a bit of HTML, you can dive in and make whatever changes you want. Simply change the name and placeholder attributes. FormKeep will happily accept whatever data you want to send it.

If you're not comfortable with HTML, we've provided a few ready-made examples below that you can simply copy and paste (don't forget to change the XXXXXXXXXXX part!)

Form for collecting first name and email


<form accept-charset="UTF-8" action="https://formkeep.com/f/XXXXXXXXXXX" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <input type="text" name="first_name" placeholder="First 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="favorite_color" placeholder="Email?"
  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>

Form for collecting name, email, and job title


<form accept-charset="UTF-8" action="https://formkeep.com/f/XXXXXXXXXXX" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <input type="text" name="name" placeholder="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="email" placeholder="Email?"
  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="job_title" placeholder="Job title?"
  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>

Form for asking what someone thought of your video


<form accept-charset="UTF-8" action="https://formkeep.com/f/XXXXXXXXXXX" method="POST">
  <input type="hidden" name="utf8" value="✓">
  <input type="text" name="feedback" placeholder="What did you think of this video?"
  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>

Need help?

Have questions? Need a custom form that you don't see here? No worries! Just drop us a line at support@formkeep.com and we'll help you out.

Ready to start?

Get started by creating your FormKeep form now!

Looking for something else?

Email us @formkeep