The HTML element in Web Form Builder allows you to enter practically any HTML code you wish to include in your form. This means that you can include HTML content, in-line CSS styling, and JavaScript (if you are careful and know what you're doing!)

Warning: Including scripts with the HTML element can interfere with the functions of your form and cause it to severely malfunction. Only include scripts if you are very confident that you are doing the right thing, or you could break your form!

The HTML element is found in the Magical section of the Elements tab.

In Windows:

In OS X:

Click this element to place an empty HTML element in your form. The default content is a hyperlink. To change/edit this, switch to the Properties tab and take a close look at the Content property.

In Windows:                                                                In OS X:                               

The large box labeled Content is where you place your HTML code. You can copy and paste HTML code directly into this box, type the code out by hand within the box, or use one of the presets in the drop-down below. To use the presets, simply select one of the options and click the + button to insert it into the Content box above. Note that any presets you include this way will be added to the end of the code that is already in the box.

Inspiration for Using the HTML Element

Need a little inspiration to get started? That's what the presets are for! But we'll show you a handful of things we think are the most useful that the HTML element makes a total reality.

Hyperlinks

Using the HTML element, you can put hyperlinks anywhere on your form. Remember that linking people away from your form is likely to reduce form submits, so it's probably a better idea to link them to more information in the confirmation message. But if you absolutely need a hyperlink, like in the Jet Pull signup form below, you can do that.

See the hyperlink at the bottom, just before the Submit button? Here's how to set it up:

  1. Click the HTML element button to add it to your form.
  2. Switch to the Properties tab.
  3. From the drop-down below the Content box, choose Hyperlink and click the + button to the right of the drop-down.
  4. Add your hyperlink text between the <a> and </a> tags, add your URL to the href="" property, and add any other text you need.

That's it! The code in the Content box will now look something like this:

And with that, you've hyperlinked from your form. (One more thing: See target="_blank" up there? That means the link will open in another window or tab, leaving your form open. This drastically increases the likelihood that the person who clicked the link will finish filling out your form.)

Lists (Bullet Points and Numbered Lists)

Now you can include both ordered and unordered lists by creating an HTML element. Check out the bullet list in this Scug order form:

And here's how to set up a list like this one:

  1. Click the HTML element button to add it to your form.
  2. Switch to the Properties tab.
  3. From the drop-down below the Content box, choose Unordered List (or Ordered List) and click the + button to the right of the drop-down.
  4. Add your points between each <li> and </li> tag. Create new tags if you need more list items.

That's it! The code in the Content box will now look something like this:

Now you can list off just about anything in your form: Top tens, tips on form completion, reasons why paying you is good, etc. Enjoy your lists.

Blockquotes

Adding a compelling, well-formatted quote to your form is now easier than ever. They'll look this good with no customization:

Here's how to create your own sweet quote:

  1. Click the HTML element button to add it to your form.
  2. Switch to the Properties tab.
  3. From the drop-down below the Content box, choose Block quotes and click the + button to the right of the drop-down.
  4. Add your quote after the <blockquote> tag and before the <small> tag. Enter the person's name in place of "Someone Famous, " and the origin of the quote in place of "Cite Source".

That's all! The code in the Content box will now look something like this:

Now your form is being vouched for by a real live person, living or historical. Yippee!