Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Editing Your Form
Now that you’ve chosen a template, you can start to make it your own by editing, deleting, or adding form fields, images, and more in Design view. We’ll start out by editing the width of the form. The form width can be from 300-1500 pixels wide and is 700 pixels wide by default. If you plan on putting the form on an existing web page, you may want it to be wider, depending on your design.
Edit the Form Width
Position the cursor over the right edge of the form, and when a shadow bar appears, click and drag to the right. A tooltip appears indicating the width. Drag until the form is 800 pixels wide (see Figure 7). That’s it! You can always change the width later on if necessary.
)
Figure 7 Edit the form width
The next thing you can do to customize the form is to change the background color of the form.
Click the Page Color button in the toolbar above the form. In the menu that appears, select a color (see Figure 8). Unfortunately, you can’t make your own custom color, but there are lots to choose from.
)
Figure 8 Change the form background color
Edit the Header Image
Next, you’ll edit the header information (top of the form), maybe even add a company logo. Every form you create can have a header (or not) that typically contains title information images and more.
- Click the header area that contains the text “Event Registration Form.”
- Double-click the calendar image in the header to pick a new image. You can choose an image from your hard drive, Flickr, Google, and the web that are commercially available.
- Click one of the options and either search, enter the URL, or navigate to the image. I am going to navigate to a PNG I created of my logo (see Figure 9).
- After the image is in place, you can choose to align it differently in the Image Placement menu of the Header Properties panel (see Figure 10).
- To change the background color of the header, click the Background Color button and choose a color (see Figure 11).
In Design view, if you want to edit existing content, you simply click on it and that content will highlight. The header is treated as one object, which means the image and text—as well as color in the background (darker blue)—are options for the header. With the header selected, you will see a dotted line appear around the content, a trash can appear in the upper–right corner (to delete it), and a Header Properties panel appear to the right with options. In the Header Properties panel, the top menu allows you to choose to remove the image and have text only, have only an image, or have both (which is default). You can also align the image that appears in four different ways. First, you will add a new image and align it.
)
Figure 9 Choose an image for the header
)
Figure 10 Align the image and text
)
Figure 11 Change the header background color
Edit the Header Text
Next, you’ll edit the text in the header:
- Click the text “Event Registration Form” to edit it. Change the text to whatever you like. I changed it to “Seminar Registration Form.”
- Select the text and change the formatting in the toolbar above the form like font (these are limited to a handful because it is a web form), font size, color, alignment, and more (see Figure 12).
)
Figure 12 Edit the header text and formatting
Add Static Text and Images
Okay, now that the header is finished, you can move on to the rest of the form. You can add static text and images to the form, aside from the fillable form fields that you see in the form. That’s what you’ll do next.
In order to insert some plain-old text in the form, you need to select the header if you want to put it below the header. If you want the text to go at the bottom of the page, select the last field on the page.
- Making sure that the header is selected, choose Insert > Formatted Text. A text area appears below the header.
- Click on the text area to insert the cursor and type some text. If you want spacing before or after, press a Return before or after the text. You can also select the text and format it with the toolbar above the form (see Figure 13).
- Click the plus button in the upper–left corner of the static text. Notice all of the types of form fields and other content you can add. Click the Image button to insert an image (see Figure 14).
- Click Google and type in search words like “Las Vegas.” Find an image you like and click on it (see Figure 15). Click OK to insert the image into your form. With that image selected, you can apply alignment options in the toolbar above the form.
- Click in the gray area to the right of the form to deselect the image and see what it looks like.
)
Figure 13 Add some static text
As you click on each object in the form, you will notice some similarities. Each object typically has a trash can icon to delete it and a plus icon which allows you to insert another item above the selected content. Next, you will add another item above the static text you just inserted.
)
Figure 14 Insert other items
)
Figure 15 Insert an image from a Google search
Add and Delete Form Fields
Next, you will delete, edit, and add some new form fields easily.
- Click the Mailing Address field and notice that the plus and trash can appear. Also notice a Field Properties panel that appears to the right of the field with options for that text field. All we want to do is delete the Mailing Address field. Click the trash can icon to delete it (see Figure 16).
- Click to select the City field. Hold down the Shift key and click the Zip Code field. This will select all three fields. Click the Delete All Selected Items button in the properties panel to the right (see Figure 17).
- Click the dotted line in the form below the Last Name field. Click the plus in the upper–left corner of the dotted line and click the E-mail Field button to add an email field (it looks like a letter icon) (see Figure 18).
- With the field on the page, you can change the E–mail text if you like by clicking on it. In the Field Properties panel to the right, select Required, and a red asterisk appears next to the E-mail text.
- Select Include Help Text and type in some helpful text into the bottom of the Field Properties panel (see Figure 19).
- With the E-mail field selected, click the Move Handle (below the plus icon on the left end of the field) and drag the field above the First Name field (see Figure 20).
- Click the First Name field. Notice a double line appear on the right edge of the text First Name and the field. Click and drag the double line on the right edge of the field to the left until you see 200 in the label that appears. Resize the Last Name field to 200 as well (see Figure 21).
)
Figure 16 Delete a form field
)
Figure 17 Delete multiple items
)
Figure 18 Add an email field
)
Figure 19 Set the email field properties
Notice that you can also choose what type of field this text (email) field should be in the Field Properties panel. If you are creating a field for a date or price, you can choose to force the field to display the information as shown.
Next, you will reorder the fields so that the Email field is first by simply dragging the field up in the form.
)
Figure 20 Drag a field in the form
You can also change the size of the fields or text areas by dragging the right edge.
)
Figure 21 Resize fields
More Form Options
There are lots of options for creating and editing types of fields like Drop Down menus, calendars, radio buttons and more. To learn more about these specific types of fields, visit FormsCentral Help.
If you have a paid account, you can have the ability to create a form that has multiple pages. This allows you to simply continue a form on another page or set conditional rules that, based on a users answer to a question or selection, they can be sent to a specific page. This can be really powerful for $14.99 a month!