Forums

Time Expiration Form Flow Cancel The title field is required!

1. Eric Mann

   

   59 posts
   Registered:
   16 Oct 2020
   22 Mar 2022

   Link to this post

        Anyone have experience or recommendation on expiring a form step in a form flow? The user would not be logged in as it's a public form but we are looking to limit how long the form is 'active' on each step. 
2. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   23 Mar 2022 in reply to Eric Mann

   Link to this post

   Hello Eric,
   
   In what way are you expecting the form to expire (ie. Disable all fields or move on to another step)? And when you say "active on each step", do you mean how long they've spent on that specific page/form step? 
   
   You could set a timeout in JavaScript and run some behavior after x amount of time if that is the case.
   
   Looking forward to your reply,
   
   Brady
   TPC Web Developer
3. Eric Mann

   

   59 posts
   Registered:
   16 Oct 2020
   23 Mar 2022 in reply to Brady Ward

   Link to this post

   Brady,
   I'd like it on the total process (form flow) which is contained on a single page until last step which obviously needs to be it's own page. A warning using JS Alert or similar then maybe locking out navigation buttons. 
   
   Eric 
4. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   23 Mar 2022 in reply to Eric Mann

   Link to this post

   Hi Eric,
   
   The behavior I imagined from the JS would be disabling all the form widgets and displaying an error message, redirecting to another step or something similar to those options. Leaving the rest of the page useable while ensuring the data won't be submitted.
   
   I'm not sure if that is more of the behavior you're looking for?
   
   Let me know if that helps,
   
   Brady
   TPC Web Developer
5. Eric Mann

   

   59 posts
   Registered:
   16 Oct 2020
   23 Mar 2022 in reply to Brady Ward

   Link to this post

   Sounds like we are on same page - may play with what is disabled vs. buttons vs. navigating the user. Do you have any sample with JS timing the form flow? 
6. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   23 Mar 2022 in reply to Eric Mann

   Link to this post

   Hello Eric,
   
   Perfect. I do have a sample I can provide to help get you started:
   
   $(document).on("tpc:ready", function (event, tpcObject) {
     const myTimeout = setTimeout(function () {
       // Loop through widgets in first form on page and disable
       for (widget in tpc.forms[0].$$instance.get_formWidgets()) {
         try {
           tpc.forms[0].$$instance.get_formWidgets()[widget].disable();
         } catch {}
       }
   
       // Disable buttons
       $(".tpc-formflow-buttons").children(".btn").prop("disabled", true);
   
       // Clear the timeout (to prevent re-running)
       clearTimeout(myTimeout);
     }, 5000);
   });
   
   Drop this into a JavaScript widget on each form where you'd like the timer to exist. Currently as is, after 5 seconds, the script will disable all widgets in the first form on the page as well as the form flow buttons (back and submit).
   
   If you run into any issues with it or have more questions let me know.
   
   Best,
   
   Brady
   TPC Web Developer

   Last modified on 23 Mar 2022 18:03 by Brady Ward
7. Eric Mann

   

   59 posts
   Registered:
   16 Oct 2020
   23 Mar 2022 in reply to Brady Ward

   Link to this post

   Awesome will put together test tomorrow. 
8. Brady Ward

   

   92 posts
   Registered:
   19 Aug 2021
   23 Mar 2022 in reply to Eric Mann

   Link to this post

   Let me know how it goes!
   
   All the best,
   
   Brady
   TPC Web Developer

   Last modified on 24 Mar 2022 13:03 by Brady Ward
9. Eric Mann

   

   59 posts
   Registered:
   16 Oct 2020
   05 Apr 2022 in reply to Brady Ward

   Link to this post

   Brady, 
   Just getting back to this, code worked other than disabling the button as it was giving an Invalid error message to the user / frontend. I adjusted to this line which worked for me: 
   $('[data-tpc-role="submit-button"][data-tpc-button-type="submit"]').prop("disabled", true); 
   
   then I changed up a little and just hid the buttons using the following: 
   $('[data-tpc-role="submit-button"][data-tpc-button-type="submit"]').hide(); 
   
   both methods above require code to call Back and Next separately but otherwise work great. I appreciate your assistance. 
   
   Eric