Website Builder Troubles Solved: Adding a Form

July 29th, 2014 by

Designing a website with Website Builder is easy as pie. But there are a few advanced techniques that can be a bit tricky to get your head around…

The UK2 tech team don’t get many calls about Website Builder. However, when they do, they fall into three categories. In this series of articles, we’ll help you solve each of these issues. This week, we ask…

1. How Do I Add A Form to My Website?

To add a form to your website, find click on the blue ‘form’ option on the menu on the left hand side of your Website Builder homepage.


Next, identify the ‘form widget’.


Click on this widget then drag and drop it onto the area of the website that you want it. Once you have dropped it, the following form will appear…
website builder pain 3

In the title box, give your form a unique name. Having two forms with the same name can cause problems in the future.

The email, internal link and external link boxes are optional and you can always fill these boxes in at a later date.

Click the ‘Create Form’ button.

The skeleton of the form will now be visible on your website, like this…

website builder pain 4

Next, you need to populate your form. In the same place you found your text form widget, you’ll find a list of drag and drop options for customising your form. These are shown on the following page…

website builder pain 5

You can drag and drop any of these option into your existing form widget. This bit is a little bit tricky. When you drag and drop something like a text box a dashed red box area will appear on your website, like this…

website builder pain 6

When you drag and drop your text box, the inside of this dashed red area will turn purple to tell you that you have found the right area to drop your content, like this…

website builder pain 8

If the area above or below the dashed red area turns purple, you have not found the correct place to drop your new content.

Once the inside of the dashed area turns purple, you can drop your new content.

To customise the newly-dropped contents of your form, you need to click on the cog icon that’s connected to the main form widget. It looks like this.

website builder pain 9

Clicking on this cog effectively unlocks the other settings boxes that are attached to all the extra bits of content you have dragged and dropped inside. You just have to roll over the different areas of your form with your mouse to make these extra settings boxes appear. Clicking on the cog icons will allow you to edit each of these sections.

To change the text, simply double click on the text area and a cursor will appear that will allow you to type new text.

website builder pain 10

The Select Box is one of the most customisable additions you can make to your form. To customise it (once you’ve dragged and dropped it, and unlocked the main text widget for editing) click on the cog in the menu attached to it.

website builder pain 11

This box will appear

website builder pain 12

In the title section, give your form a name.

In the left hand column, beneath the Select Options header, you’ll need to add all the values you want your customers to be able to select. In the right hand box you’ll need to give this value a name. In most cases, these values will be the same. An example of this is shown below…

website builder pain 13

To save these values, click the ok button.

  • Share this post


Keeping Up With The Joneses – Web Address Style

Pinteresting banner II

Expert Insights: How Pinterest can help your business

Leave a Response