Form that takes to a specific page

Ask the community
, ,
1

Hello everyone,

I have a small platform where logged in users can access some infos about real estate deals.
All the infos about these deals are stored in airtable and are well displayed on my Softr page.
But legally, the customers have to notify me of their interest before I could show them all the infos.
Therefore, there is another page with more details where I want to lead them if they answer yes on my form that says : I would like to get more infos about this.
But after filling the form, there is no way for me to redirect them to the page of the exact deal they were on. I can redirect them to the right page, but the specific deal on this page is chosen randomly.
The solution I found is refreshing the page after the form is filled, and making appear a list details block with the link that leads to the page with more details, in this case the page displays the same deal in which the customer was. But this solution is really not intuitive and absolutely horrible in terms of UX, most persons that tested this did not understand where they had to click.

Do you have any solution? I want that after hitting send on the form, the customer goes to the page with more details with softr knowing in which deal he was on…

Thanks a lot for your help

2

Hi!

I should have a complete solution by the end of the day :wink:

Just a precision I need: is there a list-details block above or below the form where the right recordId can be found. In other words, is there a list-details block that links to right deal, in the same page where the form is?

And is it a form of an action button or a form block?

1 Like
3

Thank you for your quick response, it is a form block that has an action button with 3 possibilities : Do nothing, open external url, or open page.
And yes, there is a list details block on top of the form. The whole page has infos from list details blocks

4

Ok so first, use the “show message” option instead of action, in the form block.
In the “show message” just write ‘You will be redirected in 2 seconds’ (or whatever you want). You can customize the padding top and the size of the text as it is too small with the standard setup.

Then go to the page settings => “custom code” => “code inside footer” and copy paste this script:

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const recordId = urlParams.get('recordId');

  window.addEventListener('block-loaded-form1', () => { 
    window.addEventListener('submit-form-success-form1', () => {
      setTimeout(() => {
        window.location.href = `/project-details?recordId=${recordId}`;
      }, 2000);
    });
  });
</script>

You will need to change three things (super easy).

  1. here: block-loaded-form1 => change form1 by the ID/name of your form.
  2. here: submit-form-success-form1 => change form1 by the ID/name of your form.
  3. here: /project-details?recordId=${recordId}; => change project-details by the url slug you want the user to be redirected to.
  4. You can adapt (not mandatory) the time before the redirect occurs by changing 2000 (which are milliseconds) by anything you want… 500…1000… 4000.

And that’s it, it should work.

3 Likes
5

Thank you so much, it works.

Best.