2.5 years ago we wrote our first article covering how to integrate the Pipe video recorder with Formstack. Even though it was very good and many Formstack clients and users got a lot of value from it it had one major problem: it did not allow for multiple video recorders to be placed on the same form or page. Thanks to the new 2.0 embed code which we released in beta almost 1 year and a half ago one can now add as many recorders to the page or form as needed.
Table of contents
- Creating a form with Formstack
- Adding an Embed element to the form
- Using the Pipe 2.0 HTML Embed Code
- Integrating Pipe's Embed Code in your form
- Getting the video URL when users submit answers
- Testing your form
- Adding multiple video recorders to your form
1 - Creating a form with Formstack
From your Formstack dashboard click Create, select Form and click on Next Step. In the next step, you will be able to set the name of your new form. For the purpose of this tutorial, I am going to select a blank template, but if you want to use a template go-ahead with that and make sure to add the embed element where you want to have your video question in the form as explained in the next section.
2 - Adding an Embed element to the form
On the left panel, there are many elements you can choose in order to create your form. To add the Pipe Video Recorder you need to add the Embed element from the Advanced fields list, which we will use later to create the question that will collect your video answers. Just drag the element from the left panel and drop it where you want to record the video in your form.
3 - Using the Pipe 2.0 HTML Embed Code
In order to use the Pipe 2.0 HTML Embed Code in your form, you need to create an account with Pipe. If you haven’t signed up already you can use this link to get access to 14 days free trial. The process is pretty straight-forward, it takes just 1 minute - no credit card required.
Once you have access to your account, go to your account area. The Embed code is on the right side of the page. Select the 2.0 HTML tab, there you will find the code you need to insert within the Embed element in your form on Formstack.
4 - Integrating Pipe’s Embed Code in your form
In your Pipe account area copy the code in both sections. Once you copied the code go back to Formstack, click on the Embed Element, paste the code in the editor on the left and click on the View live form button on the top right.
This is the code you should have in your Embed element:
In this code, there are 2 variables you should be aware of:
- id: the default value is “custom-id”. We will change this value when we want to add multiple video recorders to the form.
- pipe-accounthash: this is the access key to your Pipe Account and we will use it in the next section to retrieve the URL of the answers provided by the users.
5 - Getting the video URL when users submit answers
Having the Video Recorder in your form will allow you to collect video answers. These answers will be saved by default in your Pipe account. While this is great, ideally you want your video answers to be stored in your Formstack account as well in order to have all your form’s answers in one place. To do that, we will need to add another field in our form and apply a little trick to make it invisible to the users. Once we have this field set up, it will receive automatically the video URL of the answer and when the user submits the form, it will be saved together with the rest of your answers in your Formstack account. Let’s go step-by-step.
First, you need to add a Short Answer Field to your form
Second, you need to get the ID of this new field from the browser. To do that, click the View live form button and, in the form page, go with your mouse on the Short Answer field, right-click on it and select Inspect. You should see a new section popping up on your right with the HTML code of this field highlighted. There you will find the ID of the field, which you should copy. My Id, in this case, is field86150057.
Back in the Formstack builder edit the Embed element and paste the JS code from here at the bottom of the existing code.
The JS code covers 3 situations:
- New video recorded from the camera using the desktop recorder
- Existing video uploaded through the desktop recorder
- New or existing video uploaded through the mobile (native) recorder
In the pasted code replace the ACCOUNT-HASH string with your real account hash, which should be in the piece of code we pasted in the Embed element in the beginning. Once you are done with the ACCOUNT-HASH, you should replace the string HTML-FIELD-ID with the real string you just copied from the browser (field86150057 in my case).
6 - Testing your form
Great! Everything should be in place now to test our form, so let’s click on the View live form button and in the page that will be opened, you should see the Pipe Video Recorder and all the other fields you have in your form, including the Short Answer field where we will collect the video URLs. Before hiding this field let’s test if everything works correctly. Just record a short video, when you stop recording, you should see the URL of the video in the Short Answer field.
Now that everything is working correctly, we can go back to the Formstack editor and hide the Short Answer field to the users because we don’t want them to have access to their video answers’ URL.
When a user submits the form you will see the video answers’ URL as in the picture below.
7 - Adding multiple video recorders to your form
In order to add multiple video recorders to our form, we need to make some changes first. For this reason, let’s assume that you need to add 3 video recorders to your form, but the same logic applies for as many recorders as you like.
The first change to make it is in the structure of the Pipe 2.0 HTML embed code within our form.
When we added just one video recorder we put all the code within the same Embed element, but now that we need to manage multiple videos it is better to structure the code in a way that it’s easier to maintain. Let’s start by adding a new Embed element at the very beginning of our form and pasting the first 2 lines of the 2.0 HTML embed code in it.
Back in the initial Embed element where you want the first video recorder in your form, paste the line 4 of the 2.0 HTML embed code and change the id from “custom-id” to “question-1”.
Now make sure to rename the Short Answer field to something that makes sense for you and make it visible again if it was still set up as hidden. I have renamed it Video Question 1.
To add a new video recorder to your form now you just need to duplicate the Embed and Short answer (or Video Question 1) fields. Make sure to change the ID in the Embed field and to rename the Short answer field in order to link them to the right answer. I used “question-2” for the ID and Video Question 2 for the Short Answer.
Once you added all the video recorders you need, click View live form to retrieve all the IDs of the Video Question fields where we will store the video URLs when the user submits the form. I have added 3 video recorders so I will have 3 fields with 3 different IDs:
- Video Question 1 ID: field86156407
- Video Question 2 ID: field86159124
- Video Question 3 ID: field86163799
Now we have all we need to adapt the script we used before to retrieve the video URL of one video, the only difference is that now we will need to tweak it a bit to make it work with multiple videos in order to place the right video URL in the right field.
This is the original code we used before
And this is the new code we will place in a new Embed element at the very end of the form.
The last step is to go back to the Formstack editor and hide all the fields where we will store the video URLs so that the users won’t see them.
Finally, it’s time to test our form with multiple video recorders. After recording the videos and submitting the forms you should see something similar to the image below in your Formstack account.
We are done! Please let us know what you think about the new Pipe Video Recorder and if you have any questions don’t hesitate to drop us an email at firstname.lastname@example.org. We’ll be happy to help you!