Webflow Attribute

Show and hide an element when an input has a value.

To create complex and contextual forms in Webflow you'd normally have to go to a third party paid service or be a JS ninja, but now you can show and hide inputs or any other element based on a another input's value.

Application Demo

Step 1

Add the script to the page

Copy and paste the script in to your Webflow project.

<script defer src="https://cdn.jsdelivr.net/gh/aarongrieve/show-element-when-input-has-value@main/Show%20Element%20When%20Input%20Has%20Value.js"></script>

Copy the script to clipboard

Step 2

Add the attributes

Add this attribute to your input field that will control the hiding and showing of the counterpart input field.

Custom Attributes +

Name

data-input

Value

check1

Form

Input

Control input field

Label

Input

Show and hide this input field

Div

Add this attribute to your a div that wraps your input.

Custom Attributes +

Name

data-input

Value

show1

Optional

Adding the following attribute to the div that wraps the input will make it a required field when it is visible.

Custom Attributes +

Name

data-required

Value

true

Demo

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.