Last time we covered how to use HTML in order to include hyperlinks and images into your forms. This time we explore some types of embeddable media that just might be going places on this fair Internet of ours… streaming video and interactive maps.
The key in making this work is the inline frame element, more commonly referred to as the iFrame tag. Inline frames can be used to embed not only content like videos, maps, & even Wufoo forms within an HTML file, but you can even embed other HTML files.
Sites like YouTube & Vimeo offer the ability to access and copy iFrame codes. By copying these code snippets and pasting them into your Section Break field you can display the video right inside your form.
Here’s an example on how to locate the embed code in YouTube:
Just below the video title and view count you’ll see a row of links. Click the “Share” link. This will present a shortened link to the video on YouTube as well as sharing options for various social media sites.
Mouse over, and click the “Embed” link.
Ta-da! It’s iFrame time. Here you’ll find the default iFrame embed snippet. YouTube will even allow you to customize features of the embedded video. Allowing you to adjust parameters such as display size and whether or not to have the video be served over https:// protocol.
In Part 1 we covered how embedding non-https:// content in a form that is being served over https:// can trigger security errors in most major web browsers. In some cases even preventing the embedded content from loading. To remedy this you’ll want to make sure to check the https:// box before copying your embed code, especially if you’re on our Bona Fide or higher level plans.
Select & copy the iFrame embed code and then paste it within the instruction section of your Section Break field.
Click ‘Save’ and you’re good to go!
To embed an interactive map is pretty much the same process! You’ll just want to be on the look out for the Share/Embed links, or even an image of a chain link. Here are some visual aids on where to find the embed snippets for the 3 major players in the Map game.
Just as with the video embed, copy & paste the code into the instruction area of your Section Break. Save those edits, and bang-zoom you’re golden!
For more ideas on the types of forms you could use maps, you can head on over to our form gallery.
Feel free to leave a comment below or reach out to your friendly, neighborhood Wufoo support team!