The Wufoo Blog

The Secret Life of the Section Break - Part 2
Movies & Maps

By Mike Wong · May 10th, 2013

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.

Adding Video

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:

  1. 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.

    Is this the real life?

  2. Mouse over, and click the “Embed” link.

  3. 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.

    Is this just fantasy?

    Special Note
    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.

  4. Select & copy the iFrame embed code and then paste it within the instruction section of your Section Break field.

    Caught in a land slide.... no escape from reality.

  5. Click ‘Save’ and you’re good to go!

Click here to see the example form in action.

Adding Maps

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.

Google Maps

Google Maps

bing

Bing

MapQuest

MapQuest

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.

Have questions?

Feel free to leave a comment below or reach out to your friendly, neighborhood Wufoo support team!

This entry was posted 1 year ago and was filed under Tips & Tricks. Comments are currently closed.

Comments

  1. Is there a way to embed the video such that it starts playing automatically, or does it always have to be manually clicked on?

    Posted 1 year ago by Nate Baumgart.
  2. You can just add &autoplay=1 to the URL

    Posted 1 year ago by Martin.
  3. Is the video feature limited to YouTube urls only or will it allow for embedding of any iframe and players from platforms like http://corp.Kaltura.com ?

    Posted 1 year ago by Zohar Babin.
  4. Hey Zohar!

    I’m not familiar with Kaltura, but if they offer an iFrame embed snippet similar to YouTube and Vimeo it should work as well. https:// considerations will still apply as well.

    Posted 1 year ago by mike!.
  5. Everyone needs a hug.

    Posted 1 year ago by ashstyni.
  6. Everyone needs a hug, a sincere hug seems to be part of a true love.

    Posted 1 year ago by Hortensia Royes Scaiff.
  7. I would say that this comment feed is full of spam, maybe *They” need a hug? :P

    Posted 11 months ago by Matt from Sapcote Garden Centre.
  8. How can I make the map automatically show the location (address) that the user entered into the form field?

    I found the API key for the field in question - how do I modify the iFrame code to dynamically refer to that input?

    Posted 11 months ago by Colin.
  • Search

  • About

    The Wufoo Blog is the official online publication written by the developers of Wufoo about their online form builder, form-related technologies, and whatever else may fit their fancy—like robots.

  • Archives