How to pass logged-in user data to Jotform?

Ask the community
1

Hi, I am looking to prefill the record id of the user or his email address in a Jotform embed form. How to do it ? Thanks

2

Hey Nicolas,

Please, check the following thread.

3

Here is a jotform specific example:

<script>
    let jotformUrl = 'https://hipaa.jotform.com/jsform/XYZID';

    if(window['logged_in_user'] && window['logged_in_user']['softr_user_email']) {
        jotformUrl = jotformUrl + '?email=' + window['logged_in_user']['softr_user_email'];
        jotformUrl = jotformUrl + '&name=' + window['logged_in_user']['softr_user_full_name'];
    }

    document.write('<script type="text/javascript" src="' + jotformUrl + '"></' + 'script>');
</script>
1 Like
4

Hi, similarly is there a way to pass in the list details selected record and not just the logged-in user ?
Secondly, can i pass on a get/put request as well via the custom code block?

Thanks
Anto

1 Like
5

Hi @arappai,

Yes both possible. recordId is part of URL you can grab it in there and pass and with custom code you can also make API calls

–Artur

6

thanks, Arthur, is there any other properties of the record id that we can grab? :slight_smile:

7

Actually, other data can be prefilled via URL formula in AT, so that should be fine, i guess. Still curious

8

Hey @artur, I’d been working on something similar to this, but it was an embedded jotform coming through a list block on a detail page. You’d been helping me and then the project was put on hold so I’m just looking to get back to finishing up the app and hoping you can add a little clarity here on how to pass both the detail page record ID from the URL as well as the logged in users’s record ID from the profile through to the embedded jotform via URL prefill.

1 Like
9

Hi Nathan,

I recall that the form was dynamically coming from Airtable in the details block, and we needed to fill in some data.

Can you DM me some details to try out?

10

Hi @artur , I’m not sure the best way to DM you, but basically we have a code like this:

<iframe id="JotFormIFrame-213613012641138?MCID={LOGGED_IN_USER:AT_RECORD_ID}&listingAt=recordId" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.com/213613012641138?MCID={LOGGED_IN_USER:AT_RECORD_ID}&listingAt=recordId" frameborder="0" style=" min-width: 100%; height:1000px!important; border:none;" scrolling="no" > </iframe>

and “{LOGGED_IN_USER:AT_RECORD_ID}” represents where we want to insert the logged in user’s airtable record ID, and “recordId” represents where we want to insert the record ID of the detail page that the user is viewing this on. This embedded form code is coming dynamically from a table configured in a list block, on a record detail page.

1 Like
11

I need to do the same any update on how to show the record ID for the logged user?

12

Ive found my answer here : How to embed Fillout forms in Softr

1 Like
13

Great!

14

@Charle - similar to @nathan I need to be able to insert both the logged in user’s record ID AND the recordID of the detail page that the user is viewing. I’m actually doing it with a Fillout form, so I used the reference article you suggested, but I still can’t figure out how to do both. I can use an Airtable formula to pass in the embed code through a list item detail field that is ‘embed’ type field. But I don’t know how to access the logged in user’s record ID. If I use a custom code block, I see the code on how to access the logged in user, but I can’t see how to access the record ID of the detail page I’m on. Any help would be so appreciated! :pray:

15

I finally got this with the help of Softr Support & ChatGPT. This is the code you could use to pass in the recordID of the detail item for the page you’re on AND the user’s record ID into a form. This is for a fillout form, but it would be similar for other forms (just be sure to insert your Fillout form ID where it says “XXXXX” and use the URL parameters you set - mine are ‘video’ and ‘id’):

<div style="width:60%;height:500px;"
     data-fillout-id="XXXXX"
     data-fillout-embed-type="standard"
     data-fillout-inherit-parameters
     data-fillout-dynamic-resize>
</div>

<script>
  function waitForSoftrUser(callback, attempts = 0) {
    if (window.logged_in_user || attempts > 20) {
      callback();
    } else {
      setTimeout(() => waitForSoftrUser(callback, attempts + 1), 200); // Wait and retry
    }
  }

  waitForSoftrUser(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const videoRecordId = urlParams.get('recordId');
    const userRecordId = window.logged_in_user?.airtable_record_id;

    document.querySelectorAll("[data-fillout-id]:not([data-fillout-id=''])").forEach((target) => {
      // Set from Softr logged-in user
      if (userRecordId) {
        target.setAttribute("data-id", userRecordId);
      }

      // Set from Details Page URL
      if (videoRecordId) {
        target.setAttribute("data-video", videoRecordId);
      }
    });
  });
</script>

<script src="https://server.fillout.com/embed/v1/"></script>