Help Center

If you have created a step from form templates, the response is stored in usetiful tags when the end user fills out the form. This saved response can then be used to target further visits or sent via webhooks to third-party services. This tutorial describes how to influence what tag the response is saved in and in what format.

Adjust tag where the answer is stored

Let's take this form as an example. By default it stores answer to the first question into the tag called "rating" and the text from the textarea into the tag "feedback".

If you switch to the source code view ( <> icon ), you can view the HTML code of these responses. The green box highlights the segments associated with each question, and the red rectangles show the id attributes of those questions. If you change this id, the form will start storing the answers of that question in a tag with this new id as the name.

This is a universal mechanism of how Usetiful assigns the tag name for each question. More specifically, each question in the form is wrapped in an element with the class name "uf-form-question", if this element also has an id attribute, Usetiful considers it as the tag name.

Every time a question is answered, Usetiful will automatically couple the value of the ID attribute of the question and the value of the value attribute (or the the text that has been added in the field of the answer and place this combination as a Tag.

In this example, let's say we answer these two questions - 4 stars and type "overall, I am satisfied"
This will result in the following tags added

window.usetifulTags {
      rating: "4",
      feedback: "overall, I am satisfied",
      }

TIP When testing forms and answers, an easy way to access the answers that are stored as tags is to type window.usetifulTags in the Console of the browser.

Adjust value of answers

In the next example, we will keep IDs but we will aim to affect values that are saved into the tag. The following step contains a single select question. When user picks the answer and clicks on the button, value of that answer is stored into the tag "usage".

if you view the source code for this step, you will see similar code to the previous examples. There is only one question (green box) that relates to the id "usage" (red box). If we deconstruct the question further, we will see multiple answers (blue box). Each answer contains an input element that has a value attribute (purple box). This is the value that Usetiful stores in the tag as value. You can modify the values of each answer, just make sure they are unique so you can distinguish the answers from each other.

As an example, if someone answers "Enterprise" to this form, this is the tag that will be added as a result

window.usetifulTags {
      usage: "enterprise",
      }

That's it. Please let us know if this is helpful.