> ## Content Index
> Fetch the complete content index at: https://blog.addpipe.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Capturing Videos With Pipe in a Jotform Contact Form
- URL: https://blog.addpipe.com/capturing-videos-with-pipe-in-a-jotform-contact-form/
- Published: 2026-06-24T07:58:19.000Z
- Updated: 2026-06-24T08:13:36.000Z
- Author: Iuliana
- Tags: Tutorials

Follow the steps below for the most basic integration between [Jotform](https://www.jotform.com/) and the [Pipe audio and video recorder](https://addpipe.com/). 

In this tutorial, we'll build a contact form that gives users two ways to reach you: fill out the standard fields, or record a video message. We'll use the [Jotform Iframe Embed Widget](https://www.jotform.com/widgets/iframe-embed) to embed a page running the [Pipe recording client](https://addpipe.com/recording-client/) — a pattern you can adapt for collecting video answers, testimonials, async interviews, and more.

**Step 1\. Get Your Pipe Recording Page URL**

We'll use this page in an iframe in Jotform. You can use your own self-hosted page, but for this tutorial and simplicity, we'll just use the one generated by Pipe.

Log into your [Pipe account dashboard](https://dashboard.addpipe.com/signin). Once logged in, go to the **Embed Recorder** tab**.** In the **Options** card, leave the defaults or make any changes if you wish, then inthe **Test it out card**,click **Generate Test Page** and copythe resulting URL to your clipboard.

**Note:** You can view all generated test pages by clicking the link [View all generated pages >>](https://dashboard.addpipe.com/pages). From there, you can copy a different generated page URL if needed.

![Generate Pipe Recording URL](https://blog.addpipe.com/content/images/2026/06/Generate-Test-Page.png)

Generate Pipe Recording URL

**Step 2\. Create Your Form in Jotform** 

 a. Go to your [**Workspace page**](https://www.jotform.com/myworkspace/) and click **\+ CREATE** in the top-left corner.

![Click the ‘+CREATE’ Button](https://blog.addpipe.com/content/images/2026/06/Create-a-form.png)

Click the ‘+CREATE’ Button

 b. In the window that opens, click **Form.** 

![Select the 'Form' Asset ](https://blog.addpipe.com/content/images/2026/06/Click-Form.png)

Select the 'Form' Asset 

 c. Then choose **Start from scratch** and select the **Classic form**.

![Select the 'Clasic form' Layout](https://blog.addpipe.com/content/images/2026/06/Select-the-layout.png)

Select the 'Classic form' Layout

 d. After that, you will be redirected to **Form Builder**, where you will see an Organization Settings prompt with the following information:

  - **Upload the Organization Logo** — You can upload a new logo to represent your organization.
  - **Organization Name** — Add the name of your organization.
  - **Don’t Show This Again** — Prevent the prompt from appearing in the future.

Click **Save** to confirm and save your updates.

![Organization Settings](https://blog.addpipe.com/content/images/2026/06/Organization-Settings-1.png)

Organization Settings

**Step 3\. Add Form Elements**

To build the form, add the fields from Jotform’s form elements menu. 

In **Form Builder**, click on **Add Element (+)** on the left side of the screen and under the **Form Elements**, choose the **Basic** tab. After that, drag and drop the elements: Full Name, Email, and Long Text.

![A simple contact form made using Jotform](https://blog.addpipe.com/content/images/2026/06/Add-Form-Elements-1.png)

A simple contact form made using Jotform

**Step 4\. Add the Iframe Embed Widget** 

To add the Iframe Embed widget, click the **Add Element (+)** on the left side of the screen and select the **Widgets** tab. Then, search for "Iframe Embed" in the search bar and drag and drop the *Iframe Embed* widget onto the form. I've added it under the Submit button so that, visually, it's not linked to submitting the contact form, and looks like a separate way to contact us.

![Add the Iframe Embed Widget ](https://blog.addpipe.com/content/images/2026/06/Add-the-iFrame-Embed-Widget--.png)

Add the Iframe Embed Widget 

**Step 5\. Configure the Iframe Embed widget**

The **Widget Settings** will open automatically after adding the widget to the form, with the following information that should be completed: 

- **Frame url:** Paste your Pipe recording page URL;
- **Transparent frame:**  Set it to **Yes** if you want the recorder to blend into your form's background;

Click **Update** at the bottom of the settings panel to save the configurations.

![Widget Settings](https://blog.addpipe.com/content/images/2026/06/Widget-Settings.png)

Widget Settings

**Step 6\. Adjust the Widget Size**

To ensure the full Pipe recording is visible without internal scrollbars, click the **Gear icon (Properties)** next to the widget to open its properties. After that, select the **General** tab and adjust the **Height** and **Width** values.

![Adjust the Iframe Widget Width and Height in Jotform](https://blog.addpipe.com/content/images/2026/06/Adjust-the-Widget-Width-and-Height.png)

Adjust the Iframe Widget Width and Height in Jotform

**Step 7\. Testing Your Form**

Before publishing the form, test it to make sure everything works as expected. In the orange navigation bar at the top right of the page, toggle **Preview Form** to **On**. Then fill out the form and click **Submit** to create a test entry, or record a video to confirm it is saved to your Pipe account. You should have received your test entries by email and can view the recordings directly [in the Pipe account dashboard](https://dashboard.addpipe.com/recordings).

**Step 8\. Publish and Share Your Form**

Once your form is ready, you’ll need to share it with your audience.

To do this, open the **Form Builder** and click **Publish** in the orange navigation bar at the top of the page. Then click **Copy link** and share it directly with your users via email or social media.

To embed the form on a website, select **EMBED** from the left-side menu, click the **IFRAME** card, then click **Copy Code**. You can then add the copied code to your website page.

![Publish and Share Your Form](https://blog.addpipe.com/content/images/2026/06/Publish-and-Share-Your-Form-1.png)

Publish and Share Your Form

**Limitations** 

Please note the following limitations when using the generic **Iframe Embed** widget:

1. You cannot directly capture or store the Pipe recording link inside the Jotform submission data.
2. Jotform cannot detect whether a user actually recorded a video inside the iframe;
3. A user may submit the form without recording a video;
4. By default, any recording will appear in your Pipe account even without the form being submitted.

For more advanced integrations, you need to create and host your own iframe and use *`postMessage`* to enable communication between the iframe that contains the Pipe recording client and the Jotform form.