Skip to main content

Hi,

I have a query regarding Redirect on completion functionality.
I have created a form and integrated a webhook for that. I found this documentation: https://help.typeform.com/hc/en-us/articles/360029257112-Redirect-on-completion-Classic-builder-
where I get to know that I can add information on my redirect URL, but I m not sure how to add form response ID(I'm getting this in the response of webhook) as a query parameter to redirect URL.

Can you please help me to know, How can I add response id as a URL parameter?
Thanks!

Hello, I am not sure if this is possible when building the form. However it is possible if you embed the form via embed SDK. You can use custom onSubmit callback and redirect to any URL including the response id.

You will find detailed documentation in our Github repo: https://github.com/Typeform/embed/tree/main/packages/embed#callbacks


Hi Mathio,
Yes that’s the way I can add redirection on form submission. But, Can you let me know how should I get the value of data here:

    onSubmit: (data) => {
console.log('forms submitted with id:', data.responseId)
}

 


You could create your own endpoint that will request the response data server-side using your personal token (https://developer.typeform.com/responses/). However keep in ming it usually takes a few seconds to process the response before it is available via the API. You will need to wait a few seconds and retry if its not available yet.

Alternatively you could setup a webhook (https://developer.typeform.com/webhooks/) to receive responses in real time.

Only after you retrieve the response via API or webhook you will be able to use those data for redirect.


Hi @mathio,

Alright.
What if when I just want to get the responseId? Is onSubmit() Callback function gives me that ??
I am trying to log only responseId using:

    onSubmit: (data) => {
console.log('forms submitted with id:', data.responseId)
}

But, getting an error: Uncaught SyntaxError: Unexpected identifier
Shouldn’t it log responseID?


Hi @surajsanwal 

the example in our README had a typo (two commas missing).

 

It is fixed now in the README and this is what it should look like (I just tested it on my localhost):

<div id="wrapper"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script>
window.tf.createWidget('XYUfGhsw', {
container: document.getElementById("wrapper"),
onReady: () => {
console.log('form ready')
},
onQuestionChanged: (data) => {
console.log('question changed to ref:', data.ref)
},
onSubmit: (data) => {
console.log('forms submitted with id:', data.responseId)
// to retrieve the response use `data.responseId` (you have to do it server-side)
// more details: https://developer.typeform.com/responses/
}
})
</script>

 


Thanks @mathio 
It’s working now.:thumbsup_tone2:


Hey @surajsanwal - the form response ID that you added - does it correspond to the ID in column A when you export your form responses from TypeForm?

​​​cc @mathio 


Hi @sarahnestanalytics Yes, it should! It’s not the network ID, but the other ID when exporting. If you want to take a screenshot of your export, I can confirm this, just to be sure you know exactly which one. 


EDIT: I misunderstood the method at first, I understand now.


Reply