Add a text field

Add an additional text field if you want the Toloker to enter an open-ended response.

See what it looks like in the example of the “Photos of product and price tag” template

For your convenience, here is ready-made code for the “Photos of product and price tag” template, in which the text field is added to the first response button. Use it to check your own code. You can find our additions to the code by searching for the word “customization”.

Ready-made code

Now let's add the text field manually.

Editing the output specification

Add a new field:

input_result: A string input field.

Add as many fields as you need and give them unique names. For example, if you need three string input fields, add three fields with the names input_result1, input_result2, and input_result3.

The template uses a special component to simplify development. Learn more in String input field.

Editing HTML

  1. The HTML code consists of blocks describing various interface elements. Each block may contain other blocks within it. There may be several nesting levels. For example, the block with a response button description contains other blocks with input fields. Each field contains other elements, such as a title and a comment field.

    Each block looks like this:

    <div class="block_name">
    <!-- code for the block that may contain nested blocks -->
    ...
    </div>
  2. Find the main block (it starts with <div class="main">). It contains several main_block blocks within it, each describing one of the buttons. For example, the “Photos of product and price tag” template has 4 response buttons, which means that its main block contains 4 main_block blocks for each of the buttons.

    Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok, btn_no_price, btn_no_item, and btn_no_shop. Remember the name of the button that you are adding new fields to in the code.

    The main_content block inside main__block contains all the fields for the selected button. The description of each field is located in main__content-block.

    Find the button in the main__block block, then find the main__content-block field where you want to add a new field and paste the following code after it:

    <!-- string input field -->
    <div class="main__content-block">
    <div class="main__content-title main__content-title_req">
    {{texts.btn_ok.question_new_input.title}}
    </div>
    <div class="main__text">
    {{texts.btn_ok.question_new_input.description}}
    </div>
    <div class="main__box">
    {{field type="input" name="input_result" placeholder="Enter a word" validation-show="top-left" width="100%"}}
    </div>
    </div>

    In this code, a string input field is added to the button with the name btn_ok. If you added a new field to another button, change the name btn_ok to the right one.

    The new fields are listed in the main__box block as strings:

    {{field type="input" name="input_result" placeholder="Enter a word" validation-show="top-left" width="100%"}}

    In the code above, one string input field is added. The output value will be passed to the input_result field that you added to the output specification.

    To add multiple string input fields, paste the same strings to the code for each of the fields of this type that you added to the output specification. Change the value of the name parameter of each field to what you named them in the output specification. For example, if you added three new text fields to the output specification, paste this string three times and then change the "input_result" values in each string to what you named them in the specification.

    Change the values of the placeholder parameter. It contains a hint displayed in an empty text field.

  3. Update the acceptance mode.

    The review block contains the code for each button in the acceptance mode. This code is located in the following blocks:

    {{#if (equal verdict "ok")}}
    <!-- code for the "ok" button in acceptance mode -->
    <div class="review__block">
    <!-- code for the "ok" button field in acceptance mode -->
    ...
    </div>
    ...
    {{/if}}

    The value of the response button selected by the Toloker is passed to the verdict variable specified in the output specification.

    For example, in the “Photos of product and price tag” template, 4 values are described for 4 buttons: ok, no_price, no_item, and no_shop.

    The review__block blocks contain a description of each field for this button.

    Find the desired button by searching for the string {{#if (equal verdict "response_button_value")}} then find the reviewfield where you want to add a new field and insert the following code after it:

    <!-- string input field -->
    <div class="review__block">
    <div class="review__title">
    {{texts.btn_ok.question_new_input.title}}
    </div>
    <div class="review__box">
    {{field type="input" name="input_result" placeholder="Enter a word" validation-show="top-left" width="100%"}}
    </div>
    </div>

    In this code, a string input field is added to the button with the name btn_ok. If you added a new field to another button, change the name btn_ok to the right one.

    The new fields are listed in the main__box block as strings:

    {{field type="input" name="input_result" placeholder="Enter a word" validation-show="top-left" width="100%"}}

    In the code above, one string input field is added. The output value will be passed to the input_result field that you added to the output specification.

    To add multiple string input fields, paste the same strings to the code for each of the fields of this type that you added to the output specification. Change the value of the name parameter of each field to what you named them in the output specification. For example, if you added three new text fields to the output specification, paste this string three times and then change the "input_result" values in each string to what you named them in the specification.

    Change the values of the placeholder parameter. It contains a hint displayed in an empty text field.

Editing JS

  1. The JS code consists of blocks describing various interface elements. These blocks can be nested (buttons contain a set of fields, fields contain a set of elements, and so on). Each block is enclosed in curly brackets.

    The elements are described as follows:

    'property': 'value'

    The value can also consist of several properties, in which case it is enclosed in curly brackets and forms the next level of nesting.

  2. The texts constant at the very beginning of the file stores all texts for each button.

    Each button has a name for accessing its properties. For example, the buttons in the “Photos of product and price tag” template are named btn_ok, btn_no_price, btn_no_item, and btn_no_shop. Remember the name of the button that you are adding new text to in the code.

    For example, in the “Photos of product and price tag” template, the texts for the btn_ok button are located in the following code block:

    var texts = {
    //<common header text>
    'btn_ok': {
    'title': 'I found the price tag for the product',
    'question_1': {
    //<texts for the first field (photos of the store's front)>
    },
    'question_2': {
    //<texts for the second field (product photos)>
    },
    'question_3': {
    //<texts for the third field (photo of the price tag)>
    }
    },
  3. To add the texts, put a comma after the curly bracket that closes the last field and paste the following code:

    'question_new_input': {
    'title': 'String input field',
    'description': 'Enter a word'
    }

    Change the values of the title and description properties. The title property contains a title displayed above the text field, and the description property contains a question for Tolokers.

  4. Add validation.

    Find the validate function. It contains the code for checking whether the fields in each of the buttons are filled in. For example, in the “Photos of product and price tag” template, the code looks like this:

    else if (solution.output_values.verdict === 'ok') {
    // code for checking the ok button fields
    if (!solution.output_values.imgs_facade || solution.output_values.imgs_facade.length === 0) {
    // code for checking the imgs_facade field
    }
    if (!solution.output_values.imgs_item || solution.output_values.imgs_item.length === 0) {
    // code for checking the imgs_item field
    }
    if (!solution.output_values.imgs_price || solution.output_values.imgs_price.length === 0) {
    // code for checking the imgs_price field
    }
    } else if (solution.output_values.verdict === 'no_price') {
    // code for checking the no_price button fields
    }
    } else if (solution.output_values.verdict === 'no_item') {
    // code for checking the no_item button fields
    }
    } else if (solution.output_values.verdict === 'no_shop') {
    // code for checking the no_shop button fields
    }

    The response values for the buttons in this example, which are passed to the verdict output variable, have the same names as in the acceptance mode update step: ok, no_price, no_item, and no_shop.

    Find the validation block for the button. Inside this block, after any of the field validation blocks that look like this,

    if (!solution... ) {
    // field validation code
    }

    add the following code:

    if (!solution.output_values.input_result || solution.output_values.input_result.trim() === '') {
    this.errors = this.addError('This is a required field', 'input_result', this.errors);
    }
Contact support

Last updated: February 14, 2023

Tutorials
List of examples
Images
Video
Audio
Texts
Data enrichment
Surveys
Field tasks
Help and support
FAQTroubleshootingSupportGlossary