Homestead Blog

Here to talk about one of my favorite elements in SiteBuilder is… me! - Rochelle

People put forms on their websites for all kinds of things – collecting info from their customers or clients, soliciting feedback on their business, even taking basic orders online.  SiteBuilder’s Form Elements are some of our most powerful, since they let you set up your very own customized forms.

I think many of you are already a least a little familiar with our Form Elements, so in this post I just wanted to point out some tips and tricks that are probably not so well known. To set the stage, I’ll briefly skim over the basics first; feel free to skip ahead if you’re already familiar with them.

The Basics
Form Elements are ONLY available in SiteBuilder (not in SiteBuilder Lite).  You access them from the ‘Element Palette’ which is just below the top toolbar as shown in the following image:

• - Select the element you want based on the kind of information that you want to collect, or the way in which you want to collect it.  For example, if you want to collect open-ended feedback from people, use a Multiple Line Textbox.  On the other hand, if you want to have people choose from a set list of options you provide them, then use a Checkbox or Option Buttons.
• - Don’t forget to drop a Text Element for use as a label next to the form (for example, you might use a Text Element to put the label “Your Name” next to a One Line Textbox)
• - If you’re not sure what something is, just drop it in and see what it looks like!  See what kinds of changes you can make to an element by making changes to it in the Properties Editor on the right side of the screen.
• - You should ALWAYS include a Submit button on your form.  Otherwise, people using your form won’t have a way to send you the information you’re having them enter.

Ok, now for the more advanced stuff

Make it look good!
Forms that look good tend to have a consistent look and are laid out in a clear manner, making them easier to read and therefore easier to fill out.  Here are just a few tips to make this kind of housekeeping easier:

• Align your elements – I’ve already blogged once before about how to align elements.  Aligning is a must with forms; they really benefit from having items within them aligned, making them much easier to read.  At Homestead, we generally right-align the labels in one column, and left-align the Form Elements as another column.
• Style it! – Don’t forget that every element in SiteBuilder can be customized to suit your needs.  Using the Properties Editor, you can generally change the font, color and style of the text that appears in the element, as well as making certain fields required or inserting default text.
• Extra spaces – This is a bit of a ‘hack’ but it does work: if you want to have a Form Element sized exactly right, you can always add extra spaces to a field to make it look better.

Personalize it with a custom thank you page

In addition to selecting HOW you would like to receive the feedback sent to you via your forms, one of the other most useful options for the Submit button is that you get to choose where your visitors go after they submit the form.  You can just type in a customized message, but if you really want to give your visitors a holistic experience you might consider building a “thank you” page.

How do I make sense of my form submissions!?!?!
I bet this is one of the issues I hear most about from our users, and it’s something that we haven’t perfected…yet .  When you receive your form submissions, you can either get them sent to you via email, or as text files in the Form Manager (which you can import into Excel or some other spreadsheet program later).  Sometimes, the items may be in the wrong order or not well-labeled.  Here’s an image of a sample email delivery of a form submission with confusing content:

Now, here’s another example, this time using the technique I’m about to explain:

See how the information is better organized?   Here are a couple of tips that can help you do the same thing.  This is a little tricky to explain, so please bear with me. 

Element layer order
The order in which items in a form submission appear is based on their layer order.  The element on the lowest layer on the page is what appears at the top of the submission.  This is also what determines the “tab order” – the order in which tabbing from field to field in a form works.  So if you dropped the One Line Textbox element first, then that will be the top item in customer submissions.   To make lines of a customer submission appear in the same order as your form is laid out, do the following:

1. Right click on the first element.
2. Select Element Layer Order, then Bring to Front
3. Repeat with the next element, until you’ve done this to each element in your form.

Usually, I build out the whole form and then, once I’m done, right click each Element and bring it to the front.  This will put everything in the order that you want it to appear.

Name your Elements
Use the Rename button in the Properties Editor to label your Form Elements so that the submissions make sense to you.  You can change the name of the field from “One Line Textbox-2″ to something that is more meaningful, like “Name”, so your form submissions will be more clearly labeled.

See forms in action!
Check out the sample form I made to demonstrate many of the ideas I’ve talked about here: SAMPLE FORM Here’s what you’ll see:

• - I’ve included every single Form Element just to give you an idea of what each does.  Warning!  Don’t feel compelled to use every type of form on your own site.  You won’t get any brownie points for it – only use what makes sense for your particular needs.  In the interest of being complete, I’ve also included a “Reset” button - but most people caution against using the “Reset” button since sometimes people will accidentally click it and erase everything they had entered.
• - If you Submit your form, you’ll get to see my custom thank you page!

Since this is a fake form, feel free to click around in it and submit it (but please don’t expect a response :).

I hope these tips were helpful.  Try making a form for yourself and then test it out; sometimes experimentation is the best way to figure something out.  If it’s still confusing, feel free to leave a question in the comments section here in the blog and I’ll try to elaborate more. Have fun!