Embedding Videos, Maps, Widgets and Other Content Into Forms

Written by Formstack on November 19, 2008

Posted in Form Hacks, Form Optimization

Note:  This blog post was written before we added the Embed Code field type to the form builder.  You would now want to use the embed code field for this purpose.

A powerful feature of Formstack that many people don’t take advantage of is the ability to place HTML into sections on your forms.  Now, just because you don’t know HTML, doesn’t mean you can’t use this feature.  Many websites give you embed codes for videos, maps and widgets that you can place on your own site.  These embed codes will work on your forms as well, if inserted correctly.

The possible uses are endless, but one likely scenario is an RSVP form that includes a map to your location.  Another would be a form that includes a Youtube video and asks you to answer several questions about the video.  A third possible use would be including a widget in a holiday-themed form.  For example, you might want to throw a flash widget of some dancing, singing elves onto your Christmas pitch-in dinner sign-up form.  Let’s walk through the steps of Youtube example.

Okay, the first step for embedding a Youtube video on your site is to go to the page for the video you want and look for the embed code found to the right of the video.  Go ahead and copy and save this code.

Next, log into Formstack and start building your form.  You’ll want to add a Section wherever you’re planning on embedding your video.  On your section field, you will see a button in the text editor labeled “HTML”.  Click on this button and window will pop up that says “HTML Source Editor”.

Paste your video embed code from Youtube in this window and click “Update”.  You won’t see your video on your form inside the form builder admin, but it will show up once you click on the Use link for your form and view the form itself.

Click here for an example of a Youtube video embedded in a form.

Now, if you want to embed anything else in your form, such as a widget or map, it works exactly the same way.  You grab the embed code and paste it into a section on your form (in HTML view).  Click here for a silly example of a widget embedded in a form that I created using one of the thousands of free widget s you can find at Widget Box.