Page reloading on form submit

Hello,

I implemented the pagination of finsweet and for every card, if you click on the download icon (down arrow) I have a modal form that you can submit and then the success msg appears to be able to download.

I do not know why, but it is only working in the first page, when it goes to the 2nd page, it reload the page on submit.

Anyone has a solution?


Here is my public share link: [LINK][1]
([how to access public share link][2])

utm_medium=preview_link&utm_source=designer&utm_content=earth-law-portal&preview=040768aa1be55f6364bdbc71f599220d&workflow=preview

Finsweet CMS load pulls content into memory and then only renders it once you request it by choosing another page. That HTML is then rendered into the page however the webflow.js scripts have already been run, and only the in-page forms have been bound to Webflow’s form handler. Therefore the new forms on page two aren’t setup properly.

One option is to use a different handler.

Another is to try to re-initialize forms after the page has changed.

Something like this might work.

<script> 
window.fsAttributes = window.fsAttributes || [];
window.fsAttributes.push([
  'cmsload',
  (listInstances) => {
    console.log('cmsload Successfully loaded!');

    // The callback passes a `listInstances` array with all the `CMSList` instances on the page.
    const [listInstance] = listInstances;

    // The `renderitems` event runs whenever the list renders items after switching pages.
    listInstance.on('renderitems', (renderedItems) => {
      console.log(renderedItems);

      // Re-init forms
      Webflow.require('forms').ready();  

    });
  },
]);
</script> 

It worked! and thank you so much for the explanation and the shared link of finsweet!

1 Like