Answered

How to add form response ID as a query parameter to the redirect on completion URL?

  • 21 June 2021
  • 9 replies
  • 1626 views

Userlevel 1
Badge

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!

icon

Best answer by mathio 28 June 2021, 08:33

View original

9 replies

Userlevel 7
Badge +5

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

Userlevel 1
Badge

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)
}

 

Userlevel 7
Badge +5

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.

Userlevel 1
Badge

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?

Userlevel 7
Badge +5

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>

 

Userlevel 1
Badge

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

Userlevel 1
Badge +1

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 

Userlevel 7
Badge +5

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. 

Userlevel 1
Badge

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

Reply