Get Input Data

Show users what information they have entered into a form before they submit or create a personalised form experience.

Additional code/setup

Add these scripts before the </body> tag

<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/countrycode.js"> </script>

Add a select input

Add a 'select' element, add 1 choice with the placeholder text and set the value as empty.

You add powerups to this select element.

Attributes

Enable Get Input Data

To get the data from any input add this attribute to a Text Block or Text Span

Custom <div> attributes

data-input-field

=

{input-name}

Pro tip:

1. HTML input names are case-sensitive. Meaning if your input name on Webflow has capital letters, your attribute value would need to follow that exactly.

2. Try to avoid spaces when naming your inputs. Use dashes (-) instead.

Radio Inputs

To obtain the value of the Radio Input selected, use the Group Name as the attribute value.

The Choice Value set will then be used to populate the Text Block or Text Span.

01

Checkboxes

To obtain the values of the checkboxes, use the Checkbox Name as the attribute value.

The Checkbox Label value will be used to populate the Text Block or Text Span.

Note: You need one text block/span for each checkbox option.

02

Text, Email, Text Area and Select

To obtain the value of these inputs, you need to use the input name as the attribute value.

Whatever the user types in will be used to populate the Text Block or Text Span.

03

Code Variable

All user input data is stored in a Javascript Array Variable named all_data with two properties:
‍"field" and "value"

To obtain the input data: all_data[i].value

04

03

Cloneable

Here is a prebuilt form with all the attributes added to help you get started! :)

Formly Bug Report