In this video we will talk about the differences between text fields and text areas, as well as explore some field settings that are common across all field types.

Textfield

The first field I'm going to add is the Textfield. Since we have Form Builder installed, we can simply drag and drop the field onto our "Form preview". Then to edit the field settings, click on the pencil icon in the top right corner, or just about anywhere that the curser is the "pointer" icon.

We'll start in the "Properties" tab.

  • Title: Name
  • Default Value: (you can supply a default value for each field, but in the case of a name, that doesn't make much sense. So, I'll leave that blank. You can actually have this fill automatically with the current user's user name, and I'll show you how to do that in Part 13 when I show you how to use Webform as a contact form replacement.)
  • Description: Please enter your full name.

As we enter our information, you'll notice that the live preview reflects the information we've entered.

Next we'll take a look in the "Display" tab.

  • Prefix and Suffix: (I'll show an example of these when we look at the number field.)
  • Size: (The size is how many characters wide the input box should be. You can experiment by putting a number in here. Note that this will not limit the number of characters a user may enter, just the size of the box displayed.)
  • Label: Above (You can set the label to display above the input, inline with the input, or not display at all.)
  • Disabled: (Disabled will make the field read-only, this is useful when you have a default value that you want to user to see, but not be able to change. ie: Bob. I'm going to keep this field disabled, however, because I want the user to be able to enter their name.)
  • Private: (This field can be set to private. This means that only users with access to the results will see the content of this field. We'll take a look at how that works in Part 09)

Finally, we'll look in the "Validation" tab.

  • √ Required (Here we have the option to require this field. If we check this box, you'll see the standard red asterisk (*) indicating that the field is required.)
  • When you're done, simply click close, the pencil icon, or again, just about anywhere that you cursor is a "pointer".

Textarea

Textareas are useful for when you want the user to enter a large amount of text. While a textfield is only one line high, a textarea can be multiple lines high. An example of when you would use a textarea might be at the end of a survey when you ask if the user has any additional comments before they submit the form.

  • Title: Additional Comments
  • Description: Please include any additional comments you might have about this webform.

In the "Display" tab, we can set how high, and wide our text area is. Keep in mind though, that many themes include css that will override the width set here so that it matches other text areas across the site. You'll also notice that now we can hide the label, and this will just simply not show the label for this field.