. How to add an input to a webform, overview of component types and input options
2. This particular section is where we add components, which means inputs most of the time. Occasionally a component will be a compound collection of multiple inputs. But there's also e-mails, which is the page that you can use to configure the e-mail structure and where it gets sent upon completion of the form.
3. And then additional form settings, and we'll go over these later. Right now the goal is to build out the form. So let's go ahead and pull up our list of inputs, and let's add our name input to begin with.
4. So under new component name here, let's go ahead and put "name;" under type, let's look at this drop-down box. We have a number of options here, some of which will be useful for us for this particular form, others which will be useful down the road. But what we want is something simple, and textfield seems to be the right input for this particular need.
5. We also have date; e-mail; fieldset; file; grid, which is a grid of inputs that have columns and rows; hidden, which is used when you need to pass a value through the form but you don't want to show it to the end user who is filling it up; markup, which is HTML that you may want to sandwich in between inputs in order to give instructions, for example. The page break item allows us to separate a form into multiple forms to build out in a multi-step process. So when you add this page break, everything above it will get filled out, and when the "move to next step" button is pressed, it goes to the next step after the page break.
6. Select options is a select box, just like the one that we're currently in. Text area is a large area for text, whereas textfield is a single line. And then time, which could also get used in conjunction with the date type.
7. We will go ahead and leave it as textfield. We want this to be mandatory, so let's go ahead and click the check box under mandatory. This means the user has to fill it out in order to complete the form submission process, and then let's go ahead and click "add.
8. " This takes us to a form that allows us to set some additional parameters for this input. So we have our label already. We have field key, which is automatically generated for us from the label, and we'll come back to this in just a moment.
9. The default value, we want the user to fill in their name and not supply a default for them, so we will leave this blank. You see an expandable field set here called token values, and we'll come back to this later as well. We have the description of the input, which it says here is a short description that's used to instruct the user on how to fill out this particular input.
10. It will display below it. So if we look at this, we have description as the label for this particular input that we're looking at. Here's the input, and then here's the description.
11. So it will look something like this, if we add a description to the Webform. We have token values that we can also use in this description. I will scroll down.
12. We have some validation options here. One is mandatory. We already checked that, so it's prefilled here.
13. Unique is used to make sure that the user is putting different values in each of the inputs. Now this could be used to test for spam, for example, or for a possible misunderstanding of the user of how those inputs are being used, and then we can set the maximum length for the text in this particular field if we need to. We have some display options as well.
14. We can set the width of the text field, so if we want it to be short and we want to have a certain length allowed for the input. For example, we are gathering a price and we don't want it to go over four or five characters, we can set the max length here for five and set the width to five as well, so the width matches the amount of letters that can be used -- letters or numbers that can be used in the input. We can set a prefix for the input as well.
15. So this is a label to be placed to the left of the text field. So, for example, a dollar sign would make sense for a price. And then a label placed to the right of the field.
16. For example, we could put "USD" if we are setting a price, and this will appear to the right, for a suffix. I will scroll down a little bit more. Two more options.
17. We can hide the component title. Sometimes, for example, we have multiple inputs but we don't want labels for all of them or titles for all of them. For example, we have an address and we have a first line and second line input.
18. We wouldn't necessarily want a label for the second line. So we can simply hide it by clicking this. Right now we want to show labels on all of the inputs, so we're not going to click this.
19. And we can also make this disabled. For example, if we're prefilling the field and we don't want the user to be able to edit it, but we also want the user to be able to see it. Let's go ahead and click submit to add our component.
20. And now that we've added an input, let's go ahead and take a look at our Webform. I'm going to go ahead and click on view in the tab, and you see we have our input right here inside of our content. And it comes with a submit button for free.
Explore the most important concepts and techniques for site building in Drupal. In this collection, we take on a practical, real-world example and walk through creating and managing content, working with users and installing and configuring modules. A few highlights:
- Build a fully functional calendar page
- Add rich interlinking between pieces of content
- Learn how to evaluate modules, install and upgrade them