Page tree
Skip to end of metadata
Go to start of metadata
The ribbon toolbar contains form design functionality, the functionality is grouped into three tabs: Home, Edit, and Tools. Please click on the links below for more information.

The current page contains the following topics:

Home Tab

 Click here for more details:

The Home tab contains the primary features for editing the Custom form, such as:


  • Adding new questions (1)
  • Renaming the form (2)
  • Styles page with form design options (3)
  • Adding logo and images (4)
  • Defining form settings (5)
  • Adding special messages to the form (6) – Welcome Back, Header and Footer, Thank you page and Internal notes.
  • Applying plugins (7)

The following plugins do not work with forms:
– Section Randomization
– Question Randomization
– Select All Checkbox
– Fixed Header for Rate and Matrix Questions.

  • Advanced interactivity and functionality can be added with the help of Javascript. Such scripts should be inserted into the Scripts section (8)
  • Previewing and testing the form (9)
  • Printing the form (10) launching (11)

 

All these features work with custom forms in the exact way they work with surveys. But there are also features unique to the Custom Form Builder:

  • The Save (1) button saves changes applied to your form at any time it is clicked.

  • The Undo (2) button allows you to revert the last changes applied to the form one at a time; the Redo (3) button applies the undone changes back. 

  • The Text (4) button creates an empty text field on the grid so you could insert additional sub-header, notes or instructions if needed. Such text objects appear under the Other text section on the left pane.

  • The Shape button (5) is used to add three types of shapes: Rectangle, Vertical Line, and Horizontal Line. 

     More about shapes:
    Sometimes it is necessary to add additional lines or frames to your form layout. When a shape on the form is selected, the ribbon toolbar automatically switches to the Edit tab, showing controls for editing the shape.

    Three elements are available here: Rectangles, Vertical and Horizontal lines. To insert the element click on Shape and select a type. Once you choose an object it appears on the grid. Right after creation it has default size and color, but a special set of controls allows you to re-size and format your element easily:


    Line Size (1) sets the thickness of the line the shape is drawn with, and the color selector (2) next to it sets the line color. When working with a rectangle, you can activate the Filled check box (3) and use the second color selector (4) to choose the fill color.

     Shapes do not appear in form reports.

    Choosing one immediately adds it to the grid. You can then move it by dragging, and re-size it by using the handles at its edges.

  • Use Page Format (6) to change properties of the form pages.

     More about page format:

    Page formatting allows you to set additional page settings. Upon clicking on the Page Format button, a Page settings pop-up box will appear.

    These settings apply to all pages of the form.

    Measurement units is used to set the grid rulers to centimeters (1) or inches (2).

    • Orientation can be either Portrait (paper set vertically) or Landscape (paper set horizontally).

    • Paper size options are useful for printed forms. Select the format you are going to print the form in and green grid guides will adjust automatically. Note that the elements placed outside the green guide lines will still be visible on the form.

    • The Web size option activates a blue guide line on the grid. This line assists in designing a form of a certain width.

    • The Printed pages on screen option changes the grid size to include the number of pages selected.

    These settings are not related to the number of pages of the online form
    • The Max screen height value sets the height of the blue guide line at the far right of the grid. This is a helpful guide for staying within size constraints imposed by other factors, such as other content on a web page where the form will be displayed
  • Use New Page (7) to add another page to the form. When you have more than one page, navigation controls appear just above the grid. Use Page Order (8) to rearrange the form pages, and Delete Page (9) to remove the current page.

    Page 1 of a password protected form should have only the password question on it. All other questions should be on page 2 or later.


Edit Tab

 Click here for more details:

Edit tab gets activated when you click on any form element in the structure tree or on a working field.The functionality in this tab provides for editing form components.

If you click on a particular question in the left pane, the Edit tab of the ribbon toolbar will have the following look:

  • The Save button (1) serves for saving changes made to the form.
  • The Undo button allows you to revert the last changes applied to the form one at a time, while the Redo button applies the undone changes back (2). 

  • Edit Question (3) opens up a page for editing the particular question type you have selected. To read more about creating and editing questions of different types, please consult our Question Types section.
  • The Logic (4) button is used to configure logic for your form. Unlike logic in a survey, form logic works on a per-page basis. It cannot be pointed to a specific follow up question and is instead pointed to a later page. Therefore, you should locate your questions on separate pages if you wish to set up logic for your form. For further guidelines on setting up logic, please refer to Logic section. 
  • The Images(5) button serves for adding images to your form questions and answer choices. For more information, please refer to the Add Image section. 
  • Use Delete (6) to delete a question, and Hide (7) to hide it from respondent’s view. This is commonly used if you autofill respondents' data into a hidden question for reporting purposes.
  • The Validation button (8) can be used to configure whether a question is obligatory to answer. More about validation can be found in the Question Setup section. 

  • The controls of the Layer section (9) are used for adjusting the overlapping of grid elements (placing one element on top of another). The four buttons from left to right are: 

    • Bring To Front - brings the form element to very top of the stack.
    • Send To Back - sends the form element to the bottom of the stack.
    • Send Backward - moves the form element down one level in the stacking order.
    • Bring Forward - moves the form element up one level in the stacking order.
    You can also change the value in the Layer box to move an element a desired number of layers forward or backward in a single action. Another way to access this functionality is to right-click on a form element located in the grid.
  • Every element on the grid has its own coordinates, size and position. While the size of an element can be changed by dragging its handles, you can be more exact by using the W and H boxes (10) to change the width and height, respectively. Similarly, you can use the X and Y boxes to change the position of an element on the grid, allowing for pixel-perfect placement. Use X to specify distance, in pixels, between an element and the left edge of the working area that contains it, and Y - between an element and the top edge of the working area. The XYHW properties are automatically updated when you move or size an element

  • The Lock button will freeze the selected element in place so it cannot be accidentally moved or re-sized. The color of its handles will change to red to indicate this. This can be done with multiple elements at once by selecting all of them before locking. The Attribute Default button can be used to set the selected element to its default size and shape, depending on its type and contents.

  • The last section (11) features the Preview button for previewing the form, the Print button for printing it out, and the Launch button for launching the form.

  • If you click on a form header or footer in the left pane, the Edit tab will also contain a section with functionality similar to the one of the WYSIWYG editor.

Tools Tab

 Click here for more details:


The third tab on the ribbon toolbar has advanced design features. Using them can save you time and help you with precise form building.

Grid

The grid size (1) and brightness (2) can be adjusted using the provided dropdowns. Size options include both inches and centimeters.


The grid can be disabled by selecting No grid in the Grid size dropdown. 

If Snap objects to grid is enabled, it will still work with Brightness set to 0% when the grid is enabled.

Guides

Guides (3) are custom grid lines that make it easier to align objects. They can be added, moved or disabled at any time.  To customize them, click the Guides button (3). Activate the check boxes for the horizontal and vertical guides you would like to see.

Change the pixel value for an active guide to adjust its position. Click the Guides default button to revert to the original guide settings. Click the Close button when finished editing the Guides settings.

On the grid, visible guides can be dragged to change their position.

Guides are only visible in the Form Builder. They are not shown in Preview mode or in the live form.

Snapping Objects

Snapping can be used to precisely align multiple elements on the form by dragging them.
There are three snap methods available:

    • Snap objects to grid – The selected object automatically snaps to the nearest grid lines.
    • Snap object to guides – The selected object automatically snaps to the nearest available guide lines.

 

If you would like to snap the element to a certain guide line, move it toward this line until the guide becomes a solid line.
    • Snap guides to grid – The selected guide line automatically snaps to the nearest grid line.

Snapping can be activated or deactivated at any time by checking or unchecking the appropriate options. Note that when both Snap objects to grid and Snap objects to guides are activated, the selected object will snap to the nearest line of either type when dragging it.

Move and Resize

Another way to adjust the position and size of an object is through using the Move and resize button.

    • Move arrows (1) – These move the selected object in the indicated direction, one pixel at a time
    • Resize arrows (2) – These resize the selected object by moving the edge corresponding to the arrow position, one pixel at a time. Note that the mode of these buttons can be toggled using the Make larger and Make smaller buttons (3)
    • The WidthHeight, and All buttons will proportionally resize an object either smaller or larger, depending on which button is selected above. Since both or all edges are moved by this, the height and/or width changes by two pixels at a time
    • The Lock position and size button will freeze the selected object in place, preventing any accidental change to its size or position. Its handles will turn red to indicate it is locked

Alignment

When you have a group of elements on the grid, you can easily align them to the left, right, bottom, top or center using the Alignment option.

 

 Click here to see the examples of each allignment option:

Example

Horizontal:

TopMiddleBottom

Vertical:

LeftCenterRight