Answered

How do I retrieve the current response after user fills in the form?

  • 9 February 2022
  • 8 replies
  • 1215 views
C

Hello,

So we’re trying to set up a survey in which the user is presented with a landing page based on what information they have filled. Now there’s a feature of conditionals in the typeform itself, but I didn’t find anything that would let us attach a link to a page based on what user has submitted.
 

Another option is to evaluate the responses of the form after user submits it, but I didn’t find anything in the SDK documentation. The responses API is there for downloading all responses at once, but is there a way to get current response after form is filled?

icon

Best answer by mathio 9 February 2022, 13:38

View original

8 replies

mathio
Rank
Userlevel 7
Badge +5

Hello @cherrygot 

you can recall information (use respondent answers) in your redirect links and build a link with query params based on their answers.

For a better integration you could use our embed SDK and retrieve the response on form submit and then process it. You can find details in this article I wrote:
https://medium.com/typeforms-engineering-blog/integrate-typeform-with-next-js-b27a5306bfbb

Response API can retrieve specific responses by supplying included_response_ids parameter (if you supply just one ID, it will return only one specific response).

J
Userlevel 1
Badge

Hi @mathio ,

I looked at your example and it looks like you are retrieving the response answers using the response_id and form id. However, is not entirely clear to me how you were able to retrieve the `response_id`, in the code it seems to be passed to the function specified in onSubmit(), is that correct?



const handleTypeformSubmit = async ({ responseId }) => {
  const response = await fetch(`/api/response?formId=${formId}&responseId=${responseId}`)
  if (response.ok) {
    const { name, rating } = await response.json()
    console.log(‘Form responses’, { name, rating })
    // TODO: save name and rating in cookie 
    //       and use it to personalize the tooltip
 }
}

id={formId}
    chat
    tooltip={getTooltip()}
    key={`${typeformName}-${typeformRating}`}
    onSubmit={handleTypeformSubmit}
    hidden={{
      visitor_name: typeformName,
      visitor_rating: typeformRating === null ? ‘’ : (isTypeformRatingGood ? ‘good’ : ‘bad’),

 

mathio
Rank
Userlevel 7
Badge +5

@Jver you are correct, the responseId is passed to onSubmit callback. It identifies the response that was just submitted.

J
Userlevel 1
Badge

Thanks, I think I got it. Very helpful article when you read the github embed docs first

J
Userlevel 1
Badge

I am running into one problem, when I have two typeforms to embed it stops working, as they both require the same parameters which run into a conflict:

const { open, close, toggle, refresh } = window.tf.createPopup('id')

renaming the parameters like so breaks the functionality:

const { open_2, close_2, toggle_2, refresh_2 } = window.tf.createPopup('id')

document.querySelector('.my_class').onclick = toggle_2

Is there a fix for this issue?

mathio
Rank
Userlevel 7
Badge +5

In JavasScript you simplify it and do it like this:

const popup1 = window.tf.createPopup('id1')
document.querySelector('.my_class_1').onclick = popup1.toggle()

const popup2 = window.tf.createPopup('id2')
document.querySelector('.my_class_2').onclick = popup2.toggle()

 

It is not necessary to decompose the assignment into multiple variables. However if you really want to:

const { toggle } = window.tf.createPopup('id1')
document.querySelector('.my_class_1').onclick = toggle()

const{ toggle: secondToggle } = window.tf.createPopup('id2')
document.querySelector('.my_class_2').onclick = secondToggle()

 

J
Userlevel 1
Badge

I have everything set up correctly, but I have one more question. I want to track utm parameters and have set them up similarly to the hidden variables, like in the code below. However, I am not receiving utm parameters in the submissions of the forms. Is there another way I should go about passing the utm parameters?

const create_and_start_popup = (
    nref,
    oref,
    source,
    medium,
    campaign,
    content,
    term
) => {

    const create_popup = window.tf.createPopup('<form_id>', {
        hidden: {
            'oref': oref,
            'nref': nref
        },
        tracking: {
            'source': source,
            'medium': medium,
            'campaign': campaign,
            'content': content,
            'term': term
        },
        onSubmit: async (data) => {

            url = 'https://www.huurprijshulp.nl/bedankt/?form=nl&response_id=' + data.responseId

            window.location.replace(url)

        }
    })

    // start popup
    create_popup.toggle()

}
mathio
Rank
Userlevel 7
Badge +5

Did you setup hidden fields in your typeform with utm_ prefix? If yes, then you need to name them accordingly in the tracking object (eg. not source but utm_source)..

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs