Customize the look and feel of your form

This section contains...

Customize the look and feel of your forms in BlueX with a great design which may improve response rates for your surveys

Best Practice

Design the layout after the questionnaire is built to easily see how the styles affect how your content will appear.

Format the text

Text can be formatted like you would in most text editors. A toolbar with standard text formatting options, such as Bold, Font family, and font size are available on the Main page.

Add media files to your questionnaire

The Insert tool () allows you to add different types of media:

ICON TYPE

DESCRIPTION

insert link Link Create a URL link in your document to quickly access a new web page.
insert image Image Insert an image from your computer or another source.
insert video Video Embed an online video.
insert file File Insert a file from your computer or another source.

To insert media to your questionnaire:

  1. Select the insert icon () from the toolbar on the Main page.
  2. Choose the media type you want to include:
    1. Select the link icon (insert link)
      1. Type in the URL.
      2. Enter the displayed text to replace the URL.
      3. Enable Open in new tab if needed.
    2. Select the image icon (insert image)
      1. Upload an image(upload image) from your computer.
      2. Use an online image (by URL) by entering the URL.
    3. Select the media icon (insert video)
      1. Use an online video by entering its URL(by URL).
      2. Use an online video by entering its embedded code(embedded code).
    4. Select the file icon (insert file) to browse for a file from your computer.
  3. Select Insert to finish.

After you have inserted media, modify it by using the editor with the available tools.

Customize media display

Once media has been added to the form, each media element has its own set of display options.

Link and file

  1. Select the inserted link.
  2. Open, update, or disable the link with the mini-tool.
    1. Select the box with an arrow icon to enable or disable the link to open in a new window. 
    2. Select the box with a pencil inside to edit and update the link URL.
    3. Select the unlink icon to remove the link from the text.
      Select the inserted link or file to pop-up the action menu, inside of which there are three options: open link in a new window, edit and update the link, and disable the link.

Image and video

  1. Select the star icon (the display drop-down) to determine if text appears inline with the element or wraps at the top and bottom.
  2. Select the vertical align icon (the alignment drop-down) to set the vertical alignment of the element.
  3. Select the information icon ( ) to set the alternative text.
  4. Select the trash icon (the remove icon) to delete the element.
    Select the inserted image or video to pop-up the action menu, inside of which there are three options: the display drop-down, the alignment drop-down, and to remove the image or video.

Design and style the overall look of your form

Styling the form includes picking fonts for the heading and body, choosing a theme color, and adding a background. Get creative!

Access the Design window from your Form, by selecting the Design link on the top-right of the page.

Best Practice

These design features are meant to help you easily personalize your form. Play around with them until you find the combination that works for you.

Choose a theme

The design settings you are choosing in your theme are the subtle things that give great personality to your page layout. Set the following:

  • Heading/Body Font - BlueX suggests these font combinations for your headings (h1, h2, h3, etc) and the body text of the form.
    • Select a font combination different from BlueX suggestions by clicking on Customized fonts.
    • You can always manually change the font of your content by selecting the text and choosing a font from the editor.
  • Color Scheme - Determines the color of buttons, containers, borders, and highlights. Choose from different color schemes and their dark background versions by toggling the Dark theme switch.
  • Skin - Set whether you prefer boxes with straight or round corners, or a simplified look.

Set a background

While the theme defines the colors and style of your form, the background defines what will be behind the form. Choose from a solid color, BlueX suggested backgrounds, or upload (or link) to your own background image.

Configure display properties

The display properties allow you to brand and add features to your Form.

  • Form title - Enter the title of the survey that participants will see. This title is located on the top of the page and included on every page of your survey.
  • Logo - Next to the title, insert a logo or small image to brand your form. You can also link to that image with a URL instead of uploading it.
  • Logo alternate text - Set the alternate text for the logo image (usually your brand name).

Questionnaire display options

Enhance the survey experience by adding features that allow respondents to better track their progress.

Best Practice

Since these features cannot be seen from within the form editor, use the Preview option to view them.

  • Progress bar - Add a bar above the survey form that provides a visual marker of how far along in the form that respondent has progressed.
  • Error list - Show if any questions were missed or other mistakes were made. Respondents can select the error to navigate immediately to that question.
  • Pagination - When your survey includes several pages, showing the number of pages (current page/total pages) is also a good indication of progress to participants.

Example

See the progress bar, error list, and pagination in action.

Insert a table of contents in your Form

The table of contents includes hierarchical titles that can be used for navigation. You can choose which headings you would like to include in your table of contents.

  1. Select the blue bookmark on the left-hand side of the Main page to expand the table of contents properties.
  2. Flip the toggle to enable the table of contents.
  3. Use the settings icon () to select what styles you want to include.
  4. Collapse the table of contents with the icon ().

After designing the look and feel for your Form, go to preview to review it.

See also:

Preview the survey design. Question title.