17 November 2016 update: Updated the code to make it work on mobile devices as well.

Giving your users the possibility to record videos directly on your website can be a real game changer for your business.

Here at Pipe we’re always looking for ways on how to make this process easier and faster.

Today we’ll show you how to create a contact form on WordPress using Ninja Forms that also allows the user to record a video message.

1. Create a new form and add name and email fields

The first step is to create a form within the Ninja Forms interface (Forms > Add New). We should now add some fields in order to identify the person trying to contact us:

  1. Add a Textbox field and label it Name
  2. Add an Email field and label it, guess what? Email!
  3. Save and give your forma  title

Screen Shot 2016-07-11 at 16.04.35

2. Add the Pipe Video Recorder

Now it’s time to add the pièce de résistance, the actual video recording form element.

We will get the embed code from addpipe.com and add it to a Text element in Ninja Forms.

  1. Log in to your Pipe account at https://addpipe.com/signin (if you don’t have an account click this link and create one )
  2. Go to the Embed Video Recorder tab, click the 720p (HD) option, generate the embed code and copy the new embed code from the lower right part of the page
    Screen Shot 2016-07-11 at 13.14.01
  3. Add a new Text field from the Layout Elements section and put the text editor in Text mode
  4. Paste the Pipe embed code and Save your form
    Screen Shot 2016-07-11 at 16.09.39

Your form now contains an HD video recorder input. Here’s how it’ll look:

Visitors will now be able to type in their email, name and record a quick video, using their webcam, to be submitted together with the form.

But to link each video with each form submission we’ll have to store the actual video URL. For that we’ll use a 4th input which can be hidden.

4. Add a (Hidden) Video URL Field

Add a new Hidden Field from the Template Fields section:

Screen Shot 2016-07-11 at 16.38.55

This field will store the video URL and will be saved together with our form submission thus allowing us to view the video attached to the form submission from the WP admin area.

5. Fill the Video URL with the actual URL

The video recorder now needs to populate the above field with the actual URL to the newly recorded video.

For that we’ll be using Pipe’s onSaveOk function (part of Pipe’s Java Script Desktop Events API) which is called by Pipe after a video is recorded and gives us the name of the recorded video. Using the name we’ll generate the full URL.

Apart from the name, the function gives us a lot of information about the new video:

  • video name (without extension)
  • duration
  • device names (camera, microphones) if available
  • audio and video codecs
  • container type

We’ll only be using the video name in our example but you can include any other video information with the form submission.

To meet our use case we’ll be extending  onSaveOk to:

  1. generate the absolute URL, including the extension, based on the video name
  2. populate the (hidden) video URL field with the actual URL.

To make it work on mobile devices  we’ll also be using Pipe’s onVideoUploadSuccess function (part of Pipe’s Java Script Mobile Events API).

We’ll start with the following code which we’ll change a bit to make sure it works properly with your own Pipe account and your own Ninja Forms form:

<script>
formFieldId="ninja_forms_field_ID"; //hidden NF field
accountHash="ACCOUNT_HASH"; //Pipe account hash
urlBase="https://addpipevideos.s3.amazonaws.com/";

function onSaveOk(streamName, streamDuration, userId, cameraName, micName, recorderId, audioCodec, videoCodec, fileType, videoId){
    //onSaveOK is part of the JS desktop events API
    document.getElementById(formFieldId).value = urlBase+accountHash+"/"+streamName+".mp4";
}

function onVideoUploadSuccess(filename,filetype){
    //onVideoUploadSuccess is part of the JS mobile events API
    document.getElementById(formFieldId).value = urlBase+accountHash+"/"+filename+".mp4";
}
</script>

Here’s what you have to do:

  1. Replace ACCOUNT_HASH in the code above with your own Pipe account hash (it’s in your Pipe Account > Settings)
    Pipe Account Hash
  2. Replace ID with the id of the field as given by Ninja Forms:
    Screen Shot 2016-07-11 at 16.55.07
  3. Paste the modified code at the bottom of your Text Layout Element (after the existing video recorder code):
    Screen Shot 2016-07-11 at 17.22.42

 

Done! 

6. Testing and Submitting the First Video Contact Form

Copy the shortcode generated by Ninja Forms for your form and paste it in any page or blog post:

Screen Shot 2016-07-13 at 12.25.45

Your website visitors, when presented with this form will be able to type their name, email and record a video using their webcam.

6.Viewing Form Submissions and Videos

All form submissions will be shown in your WP admin area under Forms > Submissions:

Screen Shot 2016-07-13 at 12.34.17

You can see the video_url in the 4th column. This is the direct link to the video and you can copy/paste that address in your browser to view it.

That’s it!

You’re now recording high quality video from your website visitors through a simple form created with Ninja Forms and Pipe Video Recorder.

Not using Pipe yet? Get started today to capture relevant, emotion rich video content from your website visitors.

Download Exported Ninja Forms

Ninja Forms has a cool feature where you can export your form to a file and import it in another WP website with the Ninja Forms plugin. Click here to download the exported version of the form described in this post. make sure you update the ID value in ninja_forms_field_ID since exporting and importing NF does not keep the original id’s of fields.