Edit or Delete a Form

As you know, Forms are commonly used to collect information from

your website visitors.

Forms can ask your visitors for their opinions, collect email addresses,

ask about their special interests,

or collect just about any other type of information.

There, undoubtedly, will be times that a Form

will need to be changed in some way, or even deleted.

Let's take a look at all our options.

1. Generally, we use a variety of tools when editing. These Webtreepro tools are always seen at the top of the screen, and are available

for use on every page of your site, with one exception. The Form Building icons, seen below, can be used only when working on a Form.

For a complete description of all the editing tools, see the page A Quick Look at the Editing Icons and What They Can Do, or click here.

For brief descriptions of each special Form control icons, and what they can do, see the page Form Tools, or click here.

2. It is doubtful that the same Form would be placed on every page of your site. Yet, if that's the case, and the Form needs to be edited,

please read the directions below.

If you have placed a Form that is seen on every page of your site,

and you need to edit or delete it, go to the page where it was first created.

If you don't remember where you first created the Form,

go to any page and do a right click in the Form itself.

The Form Properties flyout will appear, seen here.

Then, click Info. The Element Info flyout will appear, seen below.

Look at the Origin Page.

We see the Form was created on the Admin page.

Now, you can go to the Admin page, and edit or delete the Form following the instructions below.

To edit a Form, you must be in Edit Mode,

and click within the Form.

Then, make a right click in the Form.

The Form Properties window

will appear,

as seen to the right.

3. The Form Properties window offers information and editing choices. Click on each subject to see what they offer.

Info: This offers specific information about the Form, such as the Origin of the site, the Placement (whether it is shown on all pages), who created it, etc.

Hide: It allows you to hide the Form when it is in Published Mode. This is especially helpful if the Form is not ready to be seen by a visitor. Also, it's handy to use if a Parent site has a Form being pushed to a Child site, but doesn't want it seen on the Parent site.

Opt-in: This is only offered for Child sites. If the content has been "pushed" from the Parent site, and the Parent has allowed the content to be "Optional," the Child can choose to Opt-in and receive the optional content.

Delete Form: If you click on this, a "Warning" pop-up will appear, as seen below. Click OK to go ahead and delete the Form. Click Cancel to avoid deleting.

Move to... The arrow allows you to move the Form to different areas on the page. The choices offered are: Up, Down, Move Last. These choices can be used in the current panel. Other choices offer to move the Form to panels outside the current panel, such as, to the Main panel, the Header, the Footer, or to the Menu panel.

Dynamic Fields: If you want to add, delete, or change any added Dynamic Fields in your site, move the cursor over this option to view the flyout's choices. For detailed information, see instruction # 7 on the page Edit the Organization Site, or click here.

Table: Since we recommend placing a Form into a Table, you may wish to change the Table's characteristics. For more details, please see the page Insert a Table; Common Properties, or click here. And see the page Insert a Table; Styles, or click here.

Cell: Since we recommend placing a Form into a Table, you may wish to change one or more of the Table's Cells. For more details, please see the page All About Cells, or click here.

Edit Form Element: If you need to edit one specific part of your Form, right click your cursor in that specific section. The Page Details window will appear. Click Edit Form Element. It will take you to a specific, Form Properties window. In other words, almost all Form controls will have their own particular Properties window. The examples below can give you an idea of how unique each Form Properties window is.

This is what you'd see if you needed to change the

properties of your

File Upload control that is in your Form.

This is what you'd see if you needed to change

the properties of your

Picture Upload control that is in your Form.

This is what you'd see if you needed to

change the properties

of your Checkbox control that is in your Form.

This is what you'd see if you needed to change

the properties of your

Radio Button control that is in your Form.

The final option on Form Properties is:

Properties: Click it and it will take you to the Page Elements wizard. The wizard's tabs are seen below. You can go through each tab and

change most of the Form's characteristics.

1. The Placement tab is where you can choose to have the Form shown on only one page, or all pages. You cannot change the panel where the

Form is placed. To review Content Placement, click here.

2. The Details tabs are where you can change the Form's font style, font color and/or background color. The Details page has two tabs,

"Common Properties" and "Styles." To review the Form's "Common Properties" tab, click here. To review the Form's "Styles" tab, click here.

3. The Publish Dates tab is where you can set Start and Stop Dates to control the visitor's viewing of the Form. To review Publish Dates, click here.

4. The Visibility tab is where you can choose who is allowed to see the Form. To review Visibility, click here.

5. The Publishing tab is for Parent sites only. Content can be required or optional for any child sites. To review Publishing, click here.

6. Click Finish to complete the Add Content wizard. Webtreepro will take you back to your working page, and will have added

your newly edited Form to it.

7. Or click Cancel to exit without saving your editing changes.

Sometimes, you might need to edit in only one of the Page Elements tabs.

Just go to the top of the screen, and click on the tab you need.

Do your editing, and then click Finish .

No matter which tab you are on, the Finish button will save all your changes,

and bring you back to the page you're working on.

You don't have to go through each tab of Page Elements to leave the wizard.

Now, let's look at the ways you can modify an existing Form.

Remember, having a Table inside your Form helps keep each piece of the Form's information aligned and organized, and allows you to add

Background Color and Images.

Here are some examples of how you can individualize a basic Table to meet the needs of your Form. Click in the existing Form, and

then make a right click to bring up the Form Details window. First, let's select Table to show how to make the adjustments offered by the flyout.

Modifying Rows and Columns

1. Here's a Basic Table with 3 Rows and 3 Columns. Using the Table Properties flyout we can insert extra Rows or delete unneccessary Rows.

We can do the same thing with Columns.

1a.	2d.	3g.
1b.	2e.	3h.
1c.	2f.	3i.

1a. Using the Table flyout, a gray Row was inserted after Row 1a. You now see 4 Rows in this Table instead of the original 3.	2d. Again, using the Table flyout, a blue Column was inserted after Cell 2d, creating Column 2dd. But the Column is not equal in width to the other Columns. Depending on how you want the Form to look, the new Column might need adjusting.	2dd.	3g.
1aa.	2aa.		3aa.
1b.	2e.		3h.
1c.	2f.		3i

2. To make the Columns/Cells equal in size, you'll need to click in the Form, then right click to get to the Page Details window. Select Table

and the Table flyout appears. From there, select Table Properties, and the window seen below comes up.

3. Notice in the Cell widths section at the bottom left of the window, we see Cell (Column) 3 has no width chosen. (See arrow.) That's because we

just added this Column. To make all the Columns the same width, we're going to have to change all of the Cell/Columns widths. Remember

we can't go over 100% of the total Cell/Column width, so we'll change all widths to 25%.

1a. Now, all 4 Columns...	2e. ...are the same width.	2ee. Remember, Cells grow in size with added Content.	3i.
1b.	2f.	2ff.	3j.
1c.	2g.	2gg.	3k.
1d.	2h.	2hh.	3l

4. The last option on the Table Properties flyout is Table Properties. Click on this to see the two windows we worked on when first creating the

Table/Form. Change any of the existing Form/Tables properties.

For more detail about the Common Properties window, see the page Let's Build a Form, Common Properties, or click here.

To add color or a Background Image to your Form, or to see more detail about the Styles window, see the page Let's Build a Form; Styles,

or click here.

Common Properties window

Styles window

Modifying Cells:

Now, let's select Cell from the Form Details window to show how to make the adjustments offered by the Cell Properties flyout.

Form Details

Cell Properties flyout

Again, we will start with our basic Table with 12 Cells, but this time we'll use this Table to illustrate merging Cells.

1a.	2d.	3g.
1b.	2e.	3h.
1c.	2f.	3i.

1. Click in Cell 1a, and then, do a right click. The Page Details window will appear. Select Cell, and from the Cell Properties flyout,

select Merge Down. Cell 1a instantly merges with Cell 1b.

We continue to merge by right clicking in Cell 1a and selecting Merge Down until finally we have only one Cell in Column 1.

1a. has merged with Cells 1b, and 1c.	2d.	3g.
	2e.	3h.
	2f.	3i.

2. Now let's Merge Right. Following the same procedure, we clicked in Cell 2d, and then, did a right click and merged with Cell 3g.

We merged right with all the Cells in the second, and third Rows. This option is handy if you have a Form that requires information or comments

from visitors.

1a.	2d has merged with 3g.
1b. has merged with Cells 2e, and 3h.
1c. has merged with Cells 2f, and 3i.

Splitting Cells:

Here is the basic Table, again. We'll use it to illustrate splitting Cells

1a.	2d.	3g.
1b.	2e.	3h.
1c.	2f.	3i.

1. Click in the Cell that needs to be split. Do a right click, select Cell from the Form Details window to see the Cell Properties flyout.

Now, choose how to split the selected Cell, either vertically or horizontally.

1a. Cell 1a was split vertically, and has created the gray Cell 1aa. Cell 1a has been divided at the "x" axis.	2d. We see that Cell 1a, to the left, and Cell 3g, to the right are split in two different and perhaps confusing ways. Think of the "x" and "y" axis from your high school Geometry class. The "y" axis goes up and down. The "x" axis goes across. A way to remember: "Y" goes high.	3g. Cell 3g was split horizontally, and has created the blue Cell 3gg. Cell 3g has been divided at the "y" axis.	3gg.
1aa.
1b.	2e.	3h.
1c.	2f.	3i.

The last option is Cell Properties. Click on this to see the two windows we worked on when first creating the Form/Table. Change any of the

existing Form/Tables properties.

For more details about the Common Properties window, and the Styles window, see the page All About Cells, or click here.
If you want to add Colors or a Background Image to a Cell, be sure to visit the page All About Cells, or click here.

Common Properties window Styles window

Quick Video Link>>Table Basics

KNOWLEDGE CENTER

Edit or Delete a Form

Now, let's look at the ways you can modify an existing Form.

Splitting Cells: