#78 - Clear Inputs OnClick v0.1

Create a button which can clear the values of one or more inputs.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #78 v0.1 💙 CLEAR INPUT VALUES ONCLICK -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  const clearBtns = document.querySelectorAll('[ms-code-clear-value]');
  clearBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const fieldIds = btn.getAttribute('ms-code-clear-value').split(',');
      fieldIds.forEach(fieldId => {   
        const input = document.querySelector(`[data-ms-member="${fieldId}"]`);
        if (input) {
          input.value = '';
        }
      });
    });
  });
});
</script>

Description

Attribute

Clear Input Value

Clear the value of one or more inputs.

ms-code-clear-value

Your_Field_ID,Another_Field_ID

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Create a Clear Inputs Button on your Webflow Form

Memberscripts needed

https://www.memberstack.com/scripts/78-clear-inputs

Tutorial

Cloneable

Why/When would you need to Create a Clear Inputs Button on your Webflow Form?

Provide a better UX by allowing users to more easily clear form inputs with a single click of a button.

As always, UX is a big consideration whenever you build anything that your users will interact with.

This guide will help you improve your forms’ UX by adding buttons that instantly clear whole inputs from form fields, making it easier for your users to correct potential mistakes.

Creating a button to clear inputs in a Webflow form

To create a button that clears an input from a Webflow form field, we’re going to use MemberScript #78 – Clear Inputs on Click. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is create your form, add all the fields you need it to have, and style it however you want. Then you’re going to create buttons for each field or a single button that clears all fields, or both if that’s what you prefer.

The individual buttons could, for example, be little trash icons placed inside each field.

After that, go ahead and select a field and add the following attribute to it:

data-ms-member=”VALUE”

Replace ”VALUE” with the label of the field.

Next, select the clear input button and add the following attribute to it:

ms-code-clear-value=”VALUE”

Replace “VALUE” with the same value you used on the corresponding field that you want this button to clear.

If you’re creating a button that clears multiple fields, just add the values from each field separated by commas, like in the example below:

ms-code-clear-value=”name,email,phone”

Making it work

Now that you’ve got your form and your buttons set up and you’ve added the appropriate attributes, all you need to do is add the MemberScript #78 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test your clear input buttons on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you easily add clear value buttons to your forms.

Take me to the Scripts

Read full documentation

Button Text

Something not working as expected?

#78 - Clear Inputs OnClick v0.1

Need help with this MemberScript?

Clear Input Value

Creating the Make.com Scenario

How to Create a Clear Inputs Button on your Webflow Form

Memberscripts needed

Tutorial

Cloneable

Why/When would you need to Create a Clear Inputs Button on your Webflow Form?

Making it work

Conclusion

Take me to the Scripts

Try Memberstack for free

Product

Language

Customers

Company

Resources