Show pages by user using URL parameters

Hello!
Currently, test using Webflow’s Form is the main service.
It shows the result page that matches the combined answers of the three questions, and uses logic, a new function of webflow.
The results are accumulated in cms, showing the latest data
So the problem is, when multiple people connect at the same time, the results of the last person to test are exposed to multiple people at the same time.

I’m not using the login function right now
Is there a way to test each user and show the results page that fits that user?

From what I heard, I can use the URL parameter,
It’s a difficult area, not a developer.

Thank you so much to those who help.

https://plantpick.webflow.io/

https://preview.webflow.com/preview/plantpick?utm_medium=preview_link&utm_source=designer&utm_content=plantpick&preview=0aa09d94dae11beb894e338c17281a94&pageId=648afb78a2036008c5211d58&workflow=preview

안녕하세요 아치 냥,

I think that you are trying to capture the form results using Logic, create a CMS record and then forward the user to that new CMS record. If I am understanding correctly, what you are trying to do is possible, but it will require some JavaScript programming.

As you are not a developer, this may be complex, I would recommend finding a friend who can help you work out the details.

There are three parts you need;

PART 1 - Generate a unique slug

Here you need to create a slug that you will know in advance, which you can use to create your CMS record.

  • In your form, you will create a text field named Slug. Give it an ID of slug
  • You can style this field as display: none, if you do not want the user to see it ( but not visibility: hidden )

Then we need to create a unique string slug. I usually use a UUID for this purpose.

PART 2 - Use that slug in your new CMS record

When you create your new record in Logic, assign this field value as the slug. This will make it easy to find later.

PART 3 - On form submit, wait and redirect to the result page

When the form is submitted, the Logic flow will begin.
At the same time, you will need to watch for the new CMS page to appear, and then redirect the user there once it has been created.

To make this work, you will want to give your form a unique ID to detect the submit. Let’s use an ID of myForm there.


CODE

This code is untested, but it should provide a good starting point to work with.
Place this in your form page’s before-/body custom code area.

A few things to check-

  • The form ID I am using in the code is myForm.Make certain the ID on your form matches.
  • The input field ID I am using for the slug is slug. Make certain that matches your field too.
  • The path I am redirecting to is /dabbyeon-sigmul-maecing-jeongbo-boyeojugi/SLUG
<script>
function generateUUID() {
    return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

window.onload = function() {
    document.getElementById('slug').value = generateUUID();

    // Get form
    var form = document.getElementById('myForm');

    // Attach submit event listener to the form
    form.addEventListener('submit', function(event) {
        // Prevent the form from submitting normally
        event.preventDefault();

        // Get the UUID
        var uuid = document.getElementById('slug').value;
    
        // The URL to check
        var url = '/dabbyeon-sigmul-maecing-jeongbo-boyeojugi/' + uuid;

        // Poll the URL every second until the page exists
        var intervalId = setInterval(function() {
            // Send a GET request to the URL
            fetch(url, { method: 'GET' })
                .then(function(response) {
                    // If the response status is 200, the page exists
                    if (response.status === 200) {
                        console.log('Page exists!');
                        clearInterval(intervalId);

                        window.location.href = url;

                    } else {
                        console.log('Page does not exist yet, retrying...');
                    }
                })
                .catch(function(error) {
                    console.log('An error occurred:', error);
                    clearInterval(intervalId);
                });
        }, 500); // 1000 milliseconds = 1 second

    });

};
</script>

당신이 Logic을 사용하여 폼 결과를 캡처하려고 하고, CMS 레코드를 생성한 다음 사용자를 새로운 CMS 레코드로 전달하려고 하는 것 같습니다. 제가 정확히 이해했다면, 당신이 하려는 것은 가능하지만, 이는 약간의 자바스크립트 프로그래밍을 필요로 합니다.

개발자가 아닌 당신에게는 이것이 복잡할 수 있으므로, 세부 사항을 함께 작업할 수 있는 친구를 찾는 것을 추천드립니다.

당신이 필요로 하는 세 가지 부분이 있습니다.

PART 1 - 고유한 슬러그 생성

여기서는 CMS 레코드를 생성하는 데 사용할 수 있는 미리 알고 있는 슬러그를 생성해야 합니다.

  • 폼에는 Slug라는 이름의 텍스트 필드를 생성합니다. 이 필드에는 slug라는 ID를 부여합니다.
  • 사용자에게 이 필드를 보이지 않게 하려면 이 필드를 display: none으로 스타일을 지정할 수 있습니다(단, visibility: hidden은 사용하지 마십시오)

그런 다음 우리는 고유한 문자열 슬러그를 생성해야 합니다. 이 목적으로 일반적으로 UUID를 사용합니다.

PART 2 - 새로운 CMS 레코드에서 그 슬러그 사용

Logic에서 새 레코드를 생성할 때, 이 필드 값을 슬러그로 지정합니다. 이렇게 하면 나중에 찾기 쉬워집니다.

PART 3 - 폼 제출 시, 결과 페이지로 대기 및 리디렉션

폼이 제출되면 Logic 흐름이 시작됩니다. 동시에, 새로운 CMS 페이지가 나타나는 것을 지켜 보고, 생성되면 사용자를 그 곳으로 리디렉션해야 합니다.

이를 작동시키려면, 폼에 고유한 ID를 부여하여 제출을 감지하려고 할 것입니다. 여기서는 myForm이라는 ID를 사용합시다.


코드

이 코드는 테스트되지 않았지만, 작업을 시작하는 데 좋은 출발점을 제공해야 합니다. 이 코드를 폼 페이지의 본문 앞/본문 사용자 정의 코드 영역에 위치시키십시오.

확인해야 할 몇 가지 사항들이 있습니다.

  • 코드에서 사용하는 폼 ID는 myForm입니다. 폼의 ID가 일치하는지 확인하십시오.
  • 슬러그를 위해 사용하는 입력 필드 ID는 slug입니다. 당신의 필드와 일치하는지 확인하십시오.
  • 리디렉션 대상 경로는 /dabbyeon-sigmul-maecing-jeongbo-boyeojugi/SLUG입니다.
1 Like

Thank you for your kindness.
I gave the ID “slug” to the new text field
There was a problem with logic when I created it like this.
Below is a problematic image.


Unfortunately I cannot see your Logic flows, the Webflow readonly link does not give access to those details. However you should not be having any problems with a simple text field addition to your form. You simply add it and then re-check your flow to support any updates you need.

Make sure the Name is different from your other field, I would use Slug. Set the ID to slug after you set the Name of the field.

불행히도 저는 당신의 Logic 플로우를 볼 수 없습니다, Webflow의 읽기 전용 링크는 그러한 세부 정보에 대한 접근 권한을 주지 않습니다. 그러나 폼에 단순한 텍스트 필드를 추가하는 데 문제가 있어서는 안됩니다. 단순히 그것을 추가하고 필요한 업데이트를 지원하기 위해 플로우를 다시 확인합니다.

이름이 다른 필드와 다르도록 확인하세요, 저는 Slug를 사용할 것입니다. 필드의 이름을 설정한 후 ID를 slug로 설정하세요.

Then in your Logic flow, it will tell you anything you need to do when you click on the blocks that show the warning icon.

그런 다음 Logic 플로우에서, 경고 아이콘을 보여주는 블록을 클릭할 때 해야 할 모든 것을 알려줄 것입니다.

1 Like

As you said, I copied the text field and gave it an ID called slug.
By the way, you told me to distinguish the logic that generates CMS by slug, but I still don’t understand what area it goes into.

When I create a hidden field, I get an error in logic.