The Secret Life of the Section Break - Part 1
 Hyperlinks and Image Embeds

Easily add images and other embeds to your forms.

Not already signed up for Wufoo? Let's get started!

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. However, 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 under your belt, you’ll soon be on your way.

In this instalment 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 breeze and they can be included in loads of areas:

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

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

When you add the link to your form you’ll need 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 standard old unclickable 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" />

Just as for the hyperlink, you’ll need 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 such as 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 in what way? 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 behaviour from the builder can be traced back to an unclosed HTML tag, so that’s where you’ll need to look first.

Forms with SSL

If you’re on a Bona Fide or higher level plan that includes the SSL feature, then 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 about how to do that here:

How to turn off SSL encryption


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