This video covers some of the more advanced field types. You'll learn how to autocomplete fields with things like "username" using tokens and include photos in your webform.

File

You might use a file field if you would like someone to upload their resume, for example.

  • Title: Resume
  • Upload directory: resumes
  • Progress indicator: Bar with progress meter (You can choose the "Throbber", which is the little spinning blue circle that you see when you click the pencil on these fields. Or you can choose "Bar with progress meter". I'd recommend the progress meter if you're expecting large file uploads.
  • In the validation tab we have some new options. We can define a max upload size so that file no larger than this will be allowed.
  • Documents: .txt .rtf .pdf .doc .docx (If you would like to add additional extensions that are not on this list, simply enter a comma separated list of those extensions in the box below.)

Hidden

Hidden fields make the most sense when used with tokens.
Currently, in order to see the available tokens, we need to disable the "Form Builder Web Form UI" module. So, I'll do that.

I'm going to add a hidden field that will be auto-populated with the username of the user filling out the form, if they are logged in. Otherwise, it will say anonymous.

  • Label: Username
  • Type: Hidden
  • (Add)
  • Default value: The current user is: [current-user:name]
  • (Save component)

I realize this isn't the most useful example since the username is already included in the results, but I just wanted to show you how to include hidden information automatically using the available tokens.

Markup

Markup can be very useful if you know what you're doing. I'm going to use it to display a photo that I might want users to comment on or make a decision about.

  • Title: Family Photo
  • Markup:
    • <p><strong>Here's a family photo of me and my family!</strong></p>
      <img src="http://modulesunraveled.com/sites/default/files/photo.jpg">

Below the box you'll see the available HTML elements that you can use in the markup field. I'll need to change this to "Full HTML" so that I can use the <img> tag.