By Mike Wong

The Section Break field’s potential is often overlooked so we’re here to give it the attention it deserves! At first, it may seem as if it’s another means of displaying instructions or text, like in our example of using a Section Break with CSS Keywords to accept terms of service. But! Did you know that the humble Section Break field can also be used as a way to insert hyperlinks, images, maps, and even streaming video into that fantastic form of yours? With a little bit of basic HTML knowledge in hand, you’ll soon be on your way.

In this installment we’ll cover how to make clickable links and add additional images to your forms. And awaaay we go…

The Method

Adding hyperlinks or images to your form is a snap, and there are a bunch of areas where they can be included:

• Form Titles
• Form Descriptions
• Section Break Fields
• Field Instructions
• Confirmation Messages
• Confirmation Emails

Here’s an example of HTML used to create a hyperlink:

<a href="http://wufoo.com" target="_blank">My Link</a>

When you add the link to your form you’ll want to swap the URL you’d like to link to in place of the Wufoo URL within quotes. Adding those <a> </a> tags around any words or phrases turns them from regular old un-clickable text into a clickable link.

Also, the target=”_blank” portion will ensure that the link will open in a new window. Change your mind? Simply remove that part from your link.

Example of an HTML image tag:

<img src="http://example.com/puppy.gif" width="304" height="228" />

Similar to the hyperlink, you’ll want to include the URL location of where the image is hosted. You can host the image on your own server or if you don’t have your own server you can use a free image hosting site like Photobucket.

It’s good practice to adjust the height and width of your embedded image to better fit the surrounding area of your form. Additionally, if it’s a larger image you may want to scale it down in size or crop it. There are many open source image editors as well as web based tools that can help you accomplish this.

Creating a clickable image!

It’s even possible to wrap your image embed code with hyperlink code to create a clickable image like in this example:

<a href="http://daftpunk.com/" target="_blank"><img src="http://i.imgur.com/ecTVwDZ.gif" width="500" height ="262" /></a>

Which gives us:

A Caveat

While including HTML tags in your form can allow for some extra pizazz, you’ll want to make sure that your tags are properly closed. For example, if a closing </a> is missing from your code it can cause some weird results within the Form Builder as well as your live form. Weird how? Weird as in causing the code that runs the builder to think that every bit of text from where you’re adding your link down is part of the link itself.

Most often, any weird behavior from the builder can be traced back to an unclosed HTML tag so that’s where you’ll want to look first.

Forms with SSL

If you’re on a Bona Fide or higher level plan that includes the SSL feature you’ll have an additional consideration. Web browsers will trigger security warnings if any embedded content—images or video—within an SSL enabled page isn’t also SSL secure.

If you’re hosting images on your own server, and that server is SSL-enabled, you can edit the image url to https:// in your link. There are also services that provide secure image hosting, but typically for a fee.

However, if it’s a form where you don’t need the SSL encryption, there’s a way to turn it off. We have instructions on how to do that here:

And that’s that! Join us next time as we explore what’s possible with iFrame based content!