Home/Integrations/Forms/Custom form
A recorder in a form you built yourself.
No plugin, no form builder. Drop the recorder into your markup, catch the recording name when the upload finishes, and submit it in a hidden field with everything else.
Your form stays your form
No iframe wrapping the whole page, no builder to migrate into. The recorder is one element among your existing fields, styled with your own CSS.
No video through your backend
The upload goes from the browser to AddPipe. Your form handler receives a short string, so nothing about your request limits, timeouts or storage has to change.
Works with any stack
The integration is a hidden input and one callback. Whatever renders your form, server-rendered or a single-page app, the pattern is the same.
Three pieces of code.
Get the embed code from your dashboard under Embed, then wire it to a hidden field.
AddPipe dashboard → Embed
Copy your 2.0 embed code
It carries your account hash and environment. The HTML version is a <piperecorder> element with pipe- prefixed attributes; the JavaScript version calls PipeSDK.insert(). Either works here.
Your form markup
Add a hidden field
One hidden input per recorder. This is what carries the recording name to your server.
Your page script
Fill it in on onSaveOk
Bind inside PipeSDK.onRecordersInserted, which fires once the recorder exists. Keep submit disabled until the event arrives, so nobody posts an empty field.
<form method="post" action="/apply"> <input name="name" required> <input name="email" type="email" required> <!-- the recorder, from your dashboard --> <piperecorder id="pipe-1" pipe-width="640" pipe-height="390" pipe-accountHash="YOUR_HASH" pipe-eid="1"></piperecorder> <!-- what actually gets submitted --> <input type="hidden" name="recording" id="recording"> <button id="send" disabled>Send</button> </form> <script> PipeSDK.onRecordersInserted = function () { var rec = PipeSDK.getRecorderById('pipe-1'); rec.onSaveOk = function ( recorderId, streamName, streamDuration, cameraName, micName, audioCodec, videoCodec, filetype, videoId, audioOnly, location ) { // streamName is the recording name, no extension document.getElementById('recording').value = streamName; document.getElementById('send').disabled = false; }; }; </script>
What to do with the name.
Your form handler receives one short string. Everything else happens through AddPipe.
Store it
Save the name on the submission row. It is the stable identifier for that recording, and it is all you need to find the files later.
Wait for the webhook
onSaveOk means uploaded, not transcoded. The video_converted webhook is what tells you the mp4 exists and is playable.
Pass your own ID through
Send an identifier of your own as custom data on the recorder. It comes back on the webhook, so the recording arrives already linked to your user record.
A complete working page is at the custom form demo, with more variations in the JavaScript API reference.
Details.
What actually gets submitted with the form?
The recording name, a short string AddPipe assigns. The video itself never passes through your form handler. You store the name and use it to build a playback URL or to look the recording up over the REST API.
How do I stop someone submitting before the recording finishes uploading?
Disable the submit button until onSaveOk fires, as in the example above. That event means the recording has been fully streamed to AddPipe's media servers, so the name you hold is real.
When is the mp4 actually ready to play?
onSaveOk means uploaded, not transcoded. The video_converted webhook is what tells you the mp4 exists. If your form leads straight to a playback screen, wait for that webhook rather than for onSaveOk.
Can I have several recorders on one form?
Yes. Give each <piperecorder> element its own id, fetch each with PipeSDK.getRecorderById(), and write each streamName into its own hidden field.
How do I tie the recording back to the person who submitted it?
Pass your own identifier through the recorder as custom data. It comes back on the webhook, so the recording arrives already linked to your user or application record.
Which embed code should I use?
The 2.0 embed code. The 1.0 embed code was deprecated in March 2024. The HTML version uses a <piperecorder> tag with pipe- prefixed attributes; the JavaScript version calls PipeSDK.insert().
Related integrations.
One hidden field, and you are done.
Every recorder, API and webhook is open during the 14-day trial. No card required.