Set Focus for Affected Elements

Description

Scroll the user’s page to the selected element.

How to Guide

In this example, there is a form element where the user scrolls down the page to fill in all the fields. The user must sign the form before submitting it. The focus will be on this field when the user clicks the Have you signed? button.

Note:

Prerequisite:

1. Add an Affected Element node to an element such as a button.

This image has an empty alt attribute; its file name is image-95.png

2. Alternatively, configure a condition.

This image has an empty alt attribute; its file name is image-161.png

  1. Select the element/s you want to affect by clicking the relevant checkbox/es.
    • These are all the elements in your project.
    • If necessary, use the Search element(s) field.
Drop-down list
Drop-down list
  1. Use the drop-down list to select the Set focus option. In this example, the focus will be on the signature field.
Set focus option
Set focus option
  1. Click the Apply button. The tag “Set focus” is added to the selected element/s.
  2. Click the Next button.
Set focus added
Set focus added
  1. If required, change the tag and click the Insert button. The node is added to the screen.
Tag field
Tag field
  1. Click the Apply button.
Node added
Node added
  1. Save and Preview the project.

When the user clicks the “Have you signed?” button, the focus moves to the signature field, which is shown at the top of the web page without the user having to scroll up to the field.

The focus on the signature field at the top of the web page:

Hidden Title

Need more help?

Titan logo
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.