KNOWLEDGE CENTER

 

 



 

 

 

 

 

 

 

 

    

Let's Build a Form; Styles; Adding Color and Images

 

 

 

 

 

 

 

 

The only way to add Background Color or Images to Forms

 is to create a Table within the Form before adding any content.

Webtreepro will show you how to make your Form come alive

 with color or images inserted into the Form's background. 

 

Adding color to your Form helps make it more appealing. 

 

Keeping that in mind,

you might prefer to have an Image be placed in the background. 

 

We will show you several different ways you can add color

and images to your Form.

 

 

 

 

 

 

 

 

This page is the second step in creating a Form. 

 If you have come to this page without first seeing the page

Let's Build a Form; Common Properties, you might want to return to that page, or click here.  

 

                  

 

 

   Adding a Table to a Form in preparation for adding Background color:

 

   1.   First create a Form.  For more information, see the page Form Building, Step One, or click here.

 

   2.   Go to the Form, the box surrounded by a blue dotted line, and click inside it.  Then, go up to the Editing Toolbar and click on

          the Table icon .

 

   3.  Webtreepro will bring up the "Table Properties" window. 

 

   4.   Now that you have finished with the page Let's Build a Form; Common Properties, move your cursor to the right and click the Styles

          tab.  Don't worry about losing the choices made in Common Properties.  When you are finished with the Styles tab, you will be able

          to save all your choices from both tabs at the same time. 

 

 

 

 

 

 

 

 

      
   

   Styles tab:

 

    1.   To add a Background Color to a Form, enter a Hex Color Code in the text bar under Colors, or you can click on the square to see the

          Color Palette, seen below.  Then, just click on the color of your choice. 

 

    2.   Follow the same process when choosing a color for the Form's border.  

           

 

Note: 

You may have already chosen the Border's thickness on the Table's "Common Properties"  tab.  If you didn't choose a width for the Table/Form's Border, no matter what color you choose in the Style tab, it won't appear. 

 

You must choose a Border Thickness before you can choose a color. 

 

If this is the case, just return to the "Common Properties" tab, and select a Border Thickness.

 

           

    3.   The Preview box in the upper right corner of your screen will show you an example of how the Form will look.  The Preview gives

           you a chance to make changes before placing the actual Form in your page.  The Form  is seen right below in the upper, right

           corner of the Table Properties window. 

 

 

 

 

 

 

 

 

 

 

 

      •  If you want your Form and Border to show whatever is in the background of the page it is placed on, select Transparent.

 

      •  If the first palette doesn't offer the color you want, click on More Colors... located at the bottom of the first color palette.  A more extensive color palette will come up, seen to the right.  As you move your cursor across this palette, the color code will appear in the Custom Color bar.  Click OK to select the color.  Or you can enter a Hex Color code.

    

    3.   Be sure to experiment  with Border colors and Background colors to get just the right look for your Form.  

 

      
 

   Adding a Background Image to a Form

   

   1.   If you want to have a Background Image in your Form, instead of a Background color, click Select that is next  to Background

         Image.

 

   2.   You will be taken to your Library where you can select an image.  To see more about searching for images, see the

          page The Library, or click here.

 

            • While at the Library, choose your Background Image, and click the "Select" button that is at the bottom of the Library screen.  You will be brought back to the Form's Style window seen below.

 

            • You will see two more options next to Select which are Preview and None.

 

            • To preview your Background Image, click on Preview.

 

            •  Click None to cancel your selected image.

 

 

 

 

 

 

 

 

  3. There are dropdowns under Select.  You'll need to decide if you want your Background Image to repeat, and how you want

       it to repeat.

 

      • Background Repeat offers 4 choices:

                     a)  Repeat means the background will repeat across all Cells

                          evenly.

                     b)  Repeat-x means the image will repeat horizontally. 

                     c)  Repeat-y means the image will repeat vertically.

                     d)  No-repeat means the image will be fixed in one area only.

 

    

 

      • Background Position offers 9 positions.   Webtreepro automatically starts the Background Image at the top left corner of the Form, (the default) but  you can choose other options. 

 

      • Because every Background Image is different, we suggest you experiment with these positions, and choose the one that is best for your Form.

 

 

 

   4.   Click OK  to save. Your selections in both Common Properties and Styles will be saved at the same time.

          Click Cancel   to exit without saving.

 

   5.   Depending on the size of your Form, you may or may not see the entire Background Image, as seen below.

 

 

 

 

 Original image

 

 

              •  You can also use a graphic design or color blends for your Form's background.  There are many on-line

                                         sites that offer free background designs, such as these.  If you have seen a specific Background Image

                                         here, and would like us to send it to you, please click Need Help? located at the bottom of this page, fill out

                                         the form, and send us your request.

 

 

     
 

 

   Background Images in Cells:

 

   1.   Maybe, you'd like to put a Background Image in a single Cell of your Form.  Click in the Cell where you want to add a Background

          Image. 

          Right click to bring up the Form Details window.   Select Cell.  The Cell Properties flyout will appear.  Select Cell Properties.

 

Form Details    

 

 

 

 

 

 

 

 

 

 

 

 

 

 

     

 

 

Cell Properties flyout

 

 

    2.   The Cell Properties window will come up.  Click the Style tab.  It will bring up the window seen below.

 

 

 

 

 

 

 

   3.   If you want to place an image in the Background of your Cell, click Select located in the middle of the window.

   

 

 

 

         Webtreepro will take you to your Library where you can search for an appropriate image.  To see more about searching

         for images, see the page The Library,  or click here.

 

   4.   Choose your Background Image, and click the "Select" button at the bottom of the Library page which will bring you back to

          the Styles tab.

 

            • Now, you will see two more options next to Select which are Preview and None.

 

            • To preview your background, click on Preview.

 

            • Click on None  to cancel your selected image.

 

                                                            

                                                                                    

< >

 

  

 

 

   5.   There are dropdowns under Select.  If you choose to have an image in the Cell's background, you'll need to decide

          if and how you want your Background Image to repeat. (The Repeat options offered at the right may not be discernible,

         depending on the size of your chosen Cell.) 

 

  6.   Background Repeat offers these choices:

 

          • Repeat means the background will repeat across all Cells evenly.
          • Repeat-x means the image will repeat horizontally. 
          • Repeat-y means the image will repeat vertically.
          • No-repeat means the image will be fixed in one area only.

 

 

   7.   The dropdown from Background Position is to the right.

          Webtreepro  automatically starts the Background Image at the

          upper left corner of the Cell, (the default) but you can choose these

          other options.

 

          Because every Background Image is different, we suggest you

          experiment with these positions, and choose one that is best for

          your Form.

 

 

  

   8.   Click OK   to save the Background Image to your Cell.  The choices you made in both the "Common Properties"

          and the "Styles" tab will be saved at the same time.  Click Cancel   to exit without saving. 

 

   9.   Depending on the size of your Cell, you may or may not see the entire Background Image, as seen in the example below. 

 

 

                                         The top right Cell shows the Background Image.  The image to the right is the original.

 

       
 

   

   Let's Practice with colors and Forms:

 

 

Name:

E-mail address:

Mailing address:

Comments:

 

Above is an example of  a simple response Form with a background color.  Perhaps, you could copy the steps we took to create this empty Form just for practicing purposes.

 

   1.   Choose the Form/Table to have how ever many Rows and Columns you want.  If needed you can add or delete rows

         and columns later.  See "Addin Additional Rows..." later in this page.

 

   2.   Make the Table Width to be 60 % and center the Panel Alignment.

 

   3.   Choose the Border thickness to be 1.   

 

   4.   The width for Cell # 1 was set at 25 %.  Cell # 2 was set at 75 %.  The Cells must add up to 100%.

 

   5.   Then, go to the Style tab, and choose a Background Color, a Border Color, and click "OK."  At this point, the

         above Table has a blue border and a gray background color completely fills all the Rows.

 

  Note:

  In order to have a Border color, you must have chosen a Border Width in

   the "Common Properties" tab. 

 

    6.   To change the original colors in individual Cells and Rows to different colors, follow the steps below.

 

Name:

E-mail address:

Mailing address:

Comments:
Notice this Row, and the one beneath it, no longer have the Cell divisions.
See "Merging Cells" later in this page for an explanation.

 

         

 

   Adding Color to Individual Cells or Rows:

 

   1.   Go to the first Cell, click inside it,  and then make a right click.  The Form Details window appears.  Choose Cell,

         and then, click on Cell Properties.  

 

 

 

 

 

 

 

 

 

      • This brings up the Cell Properties window, seen below.

 

 

 

 

 

   2.   In the Common Properties tab, click the Background Color box and put a different color in the first Cell, just for fun. 

         Follow Steps #1 and #2  to add color in any Cell.

 

   3.   For more information about Cells, see the page All About Cells, or click here.

 

   4.   To add or change the color in a Row, just follow the same procedure as a Cell.  The difference is that you will need to repeat

          the process for any Cells that are in that Row.  See the "E-mail" Row.

 

    

 

 

   Merging Cells:

 

            1.   In order to have room for people to add their Comments, the vertical dividers need to be removed from the last

                  Rows of the example Table.

 

            2.   Place the cursor in the left Cell of the last row and right click.  The Page Details window comes up, as seen below.

                  Select Cell and the Cell Properties flyout appears, seen on the right.

 

 

 

 

 

 

 

   3.   Choose Merge Right.  Instantly, the last Row is no longer divided.  Repeat this process for other Rows.   Now, there will be room

          for visitors to enter their comments.

 

      • To see more about merging cells, visit the page All About Cells, or click here.

 

 

   Adding Additional Rows in a Form with color: 

 

   1.    If other Rows need to be added, choose a Row and right click in it.   The Page Details window appears, as seen

          below.   Select Table, and the Table flyout appears.  Choose one of the selections.

 

   2.   The selection will immediately take place in your Form/Table.  If you added a new Row to a colored Form/Table,

          the new Row will be colored exactly like the Row above or below it, depending on your choice of  Insert a Row After 

          or Insert a Row Before.

 

   3.    For more information about adding or deleting Rows, see the page Edit or Delete a Table, or click here.

 

 

 

 

 

 

 

 

 

    
    

   Adding Color to an Existing Form:

 

   1.   Suppose you had created a Form first, then decided the Form needed Background Color.  Color can be added, but first

          a Table must be inserted into the Form.  Go back to Step # 1 on this page, and follow the steps taken in "Adding a Table into a

          Form."  Click here to return to Step # 1.

 

   2.   After adding a Table to the existing Form, you can easily copy and paste any of the Form's text and control buttons by using

         Ctrl-C (copy) and Ctrl-V (insert) keys on your keyboard.

 

 Be sure to watch the video for tips in putting a Background Image in a Form. 
See Video Link at the bottom of this page.

 

    

   

   Now, you are ready to go through the remainder of the Add Content wizard.

 

 

   1.      Click Next  .   It will take you to the Content Publish Dates screen where you will set Start and Stop dates. 

        To review Publish Dates, click here.

 

   2.      Click Next  .  It will take you to the Content Visibility screen where you can choose who is allowed to see

             the Form.  To review Content Visibility, click here.

 

   3.      Click Next  .   It will take you to the Content Publishing screen. This tab is for Parent sites only. 

            Content can be required or optional for any child sites.    To review Content Publishing, click here.

 

   4.      Click Finish   to complete the Add Content wizard.  Webtreepro will take you back to your working page,

             and will have added a Form to it.     

   5.      If at any time, you decide against placing a Form on your page, click on Cancel  to exit without saving.

 

 

Sometimes, you might not need to go through all the tabs in the Add Content wizard. 

If at any time you are finished editing, click Finish . 

No matter what page you are on, it will save all your changes,

and bring you back to your working page. 

 You don't have to go through each tab of Add Content to leave the wizard. 

 

 

Quick Video Link>>Tables-Callout Boxes