Trying to Add a Rich Text HTML Editor to App via Jotform

Ask the community
1

Hello all! I’m currently building a combination CMS/LMS in Softr, and there’s one issue I’m running into: adding a text editor to the app so that users are able to create their own content . I tried a couple of different methods (such as embedding an HTML editor like TinyMCE into a code block), but ran into issues with being able to pass logged-in Softr user information into the editor. Eventually, I landed on the following solution:

  1. Adding an HTML Editor widget (Squire Editor) to Jotform
  2. Embedding the Jotform into my Softr app via custom code block
  3. Using this methodology to pass logged-in user data into the embedded Jotform
  4. Finally, using a Jotform automation to pass that information back into Airtable, so I can link the data to the logged-in user.

However, I haven’t been able to successfully execute step 3 (passing my user data to Jotform), and I’m wondering if anyone can spot my error. Here’s my code (currently in a custom code block in Softr):

<script>
let jotformUrl = 'https://form.jotform.com/jsform/220770379464058';
if(window['logged_in_user'] && window['logged_in_user']['airtable_record_id']) {
    jotformUrl = jotformUrl + '&record_id=' + window['logged_in_user']['airtable_record_id'];
}
document.write('<iframe src="' + jotformUrl + '" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0" title="My Application"></iframe>'); 
</script>

I’d then like to pass that record URL into Jotform, but I’m a little more unsure about the methodology. Here are my Jotform settings:
Screen Shot 2022-03-20 at 5.27.19 PM

I’ve updated the unique name of the hidden field I’d like to use to collect the URL, but I’m running into trouble, and I can’t find documentation that outlines exactly what I’m trying to do. Can anyone tell me where my error is?

(As an aside: another option I tried is to use this script to add the current user’s recordId into the URL, and then use the Jotform “Get Page Form’s URL” widget to collect the url, but I haven’t been able to get that script working, either. So if anyone thinks that method might be simpler, I’d love to get insight into what might be possible there).

2

You would need to change this line as below.

In Urls first paramater is passed after ? and the rest after & e.g. https://mydomain.com?attr_1=1&attr_2=2&attr_3=3

Hope this helps

3

Hi @artur ! Thanks for the prompt reply. Unfortunately, that doesn’t seem to be the issue. I updated my code using your feedback as follows, pasting it into a custom code block:

<script>
    let jotformUrl = 'https://form.jotform.com/220770379464058';

    if(window['logged_in_user'] && window['logged_in_user']['airtable_record_id']) {
        jotformUrl = jotformUrl + '?record_id=' + window['logged_in_user']['airtable_record_id'];
    }
 
    document.write('<iframe src="' + jotformUrl + '" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0" title="jotformUrl"></iframe>');
</script>

My form is showing up correctly, but it’s not passing my logged-in user info to the Jotform (here’s a link to the form on my page, if you’d like to test it out yourself).

As I mentioned above, I also created a hidden Jotform field, and gave it the unique name of “jotformUrl” (screenshot in the original post), because my assumption was that the script would look for a “jotformUrl” field to pass the user data into. At this point, I’m not sure whether 1) my script is still incorrect, or 2) if I’m misunderstanding what I need to do on Jotform to correctly pass “jotformUrl” (i.e. my logged-in user data) into the Jotform hidden field. Any help would be super appreciated!

4

@adalys the script looks good to me. It just passes record_id as a parameter hence you would need to configure a hidden field with a name of record_id to be able to pass it a long. Also feel free to ping us on the live support chat to get quick feedback and so we can also get test users from you and check it.