#15 - Refresh Page After Set Duration On Click v0.1

Refresh the page after a set amount of time when an element is clicked.

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 #15 v0.1 💙 TRIGGER REFRESH ON CLICK -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  document.addEventListener("click", function(event) {
    const clickedElement = event.target.closest('[ms-code-refresh]');

    if (clickedElement) {
      const refreshDelay = parseInt(clickedElement.getAttribute('ms-code-refresh'));

      if (!isNaN(refreshDelay)) {
        setTimeout(function() {
          location.reload();
        }, refreshDelay);
      }
    }
  });
});
</script>

Description

Attribute

No items found.

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 Refresh the Page After a Form is Filled Out

Memberscripts needed

‍https://www.memberstack.com/scripts/refresh-page-after-set-duration-on-click

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/delete-update-js-items

Why/When would need to use refresh the page after. form is filled out feature?

Confirmation of Submission: It provides users with immediate feedback that their form has been successfully submitted.
Data Reset: It clears the form fields, preparing them for another entry if needed.
Content Update: If the form affects other parts of the page, a refresh can update these areas to reflect the new data.
Preventing Duplicate Submissions: Refreshing can help prevent users from accidentally submitting a form multiple times.
User Experience: It can be part of a smooth and intuitive user journey, especially in survey or feedback forms.

How to Refresh the Page After a Form is Filled Out

Refreshing a page after a form submission is a common requirement for websites that need to display the submitted data to the user in real-time. Webflow’s default form block allows you to update its appearance based on a submission state, but there isn’t an option to update other elements after a form submission. A page refresh is required to allow other elements to retrieve the updated data for display.

Implementing Page Refresh After Form Submission in Webflow

Refreshing the page after form submission in Webflow requires custom code subscribing to a JavaScript event related to the form submission. Fortunately, we have prebuilt MemberScripts that provide custom code you just need to copy and paste. We’ll use one of these scripts to build this feature.

1. Including a Form and Data Handling

Ensure your Webflow site has a form set up for user submissions. This could be a contact form, survey, registration form, etc. If you’re updating data on the page, you’ll also need to submit the form data to a backend data store and configure elements to retrieve the data on page load. We like to use Member JSON as our data store.

2. Setting Up a Page Refresh Following Form Submission

The most obvious events to use as triggers for refresh are the form submission and submit button click events. We’ll use a MemberScript targeting the submit button’s click event. By following the tutorial for MemberScript #15 - Refresh Page After Set Duration on Click, you can configure the page to refresh after the form’s submit button is clicked.

Step 3: Customizing the Duration

The delay between clicking and refresh needs to be long enough for the form to be processed. This processing time mainly depends on your user’s internet speed and how you’ve configured your backend data store. It’s worth testing to ensure the form has time to submit before the refresh.

Conclusion

Refreshing a page after submitting a form can significantly improve the functionality and user experience of your Webflow site. Following these steps and use the MemberScript can create a more dynamic and user-friendly form submission process.

Check out our free cloneable to see an example of how you might use this functionality. Clicking the “Save Item” button will trigger a form submission and refresh, allowing the submitted data to display below the form.

Take me to the Scripts

‍https://www.memberstack.com/scripts/refresh-page-after-set-duration-on-click

Read full documentation

Button Text

Something not working as expected?

#15 - Refresh Page After Set Duration On Click v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Refresh the Page After a Form is Filled Out

Memberscripts needed

Tutorial

Cloneable

Why/When would need to use refresh the page after. form is filled out feature?

How to Refresh the Page After a Form is Filled Out

Implementing Page Refresh After Form Submission in Webflow

1. Including a Form and Data Handling

2. Setting Up a Page Refresh Following Form Submission

Step 3: Customizing the Duration

Conclusion

Take me to the Scripts

Try Memberstack for free

Product

Language

Customers

Company

Resources