Pre-populating Wix Logged in Member Details onto an embedded Jotform

[Greg_Maher]

Question:
How can I pre-populate Wix logged in member details onto an embedded form in Jotform ?

Product:
Wix Editor

What are you trying to achieve:
I have a booking form from Jotform embedded into a member only page on my Wix website. I would like to pre-fill my form with member name & logged in email

What have you already tried:

1. Jotform generates this basic code to embed, This works.

3. References I have found useful

Prepopulating Form Fields via URL Parameters

getCurrentMember result

I’m working on WIX Editor with WIX velo Dear Wix code experts, here is my issue : I create a site for free exchanges of games I have created a collection for the games, one field is the email of the owner of each game I have created a page to display all the games of the current member, my purpose is to filter on the email field. I have to retrieve the mail of the current member. I am not expert in javascript and velo wix, although I have used it already for a few things. So I’m trying wit…

[Greg_Maher]

Basic code from Jotform to embed form, that works

[Greg_Maher]

Attempted solution using Javascript, Doesnt work, window opens blank - no message/error

[Pratham]

@Greg_Maher

Attempted solution using Javascript, Doesnt work, window opens blank - no message/error

Velo code runs on your Wix site page, not inside embedded HTML iFrames. Hence you canot combine the two.

Just simply follow these steps:

• Add the Embed a Site element on you members only page where you want this form to be.

• Then place your Jotform URL (https://form.jotform.com/250547430501851) in the website address field and click on Update.

• Now turn on Dev Mode (beside the Wix logo at the very top of the editor). You should see a code panel pop up below.

• Clear all the code inside that code panel and replace it with the following:

  import { currentMember } from "wix-members-frontend";
  
  $w.onReady(function () {
      currentMember
          .getMember()
          .then((member) => {
  
              const fullName = `${member.contactDetails.firstName} ${member.contactDetails.lastName}`;
  
              $w('#html1').src = $w('#html1').src + "?memberName=" + fullName + "&memberEmail=" + member.loginEmail
  
          });
  });
  

• Make sure there are no red lines in the code and finally Publish the site.

Test it out and once it is working as expected, you can turn off Dev Mode and the code will continue to function.

Points to note:

• Make sure that the ID of your Embed element is #html1. You can do this by clicking on the HTML Embed element with the Dev Mode on. You will be able to see the ID of the selected element right beside the code panel at the bottom.
• The page will need to be set to Members Only in order for the code to work correctly.
• You can add as many fields as you want by building upon the following syntax:
  + "&fieldName=" + fieldValue

[Greg_Maher]

Pratham, thanks for the response. It works - and your instructions were easy to follow.

I can pre-populate member name and login email. But I am having trouble with address and phone number. On my site, people only ever put in one of each - even if Wix allows for several of each. I tried

• “&memberAddress” + member.addresses + “&memberPhone” + member.phones

but it has the squiggly red line and message Property “addresses” does not exist for type “Member”.

Can you help me with the correct code to pre-populate the first address and the first phone ?

[noahlovell]

You’ll want to take a look at this documentation that lists the returned structure from .getMember() - Get Member | Velo - specifically the “Returns” part

Phone is likely to be: member.contactDetails.phones[0]. Since phone is an array, [0] allows us to choose the first phone number in the array

Address is an object, so you’ll likely need to reconstruct it according to the information you need, but it’ll be under member.contactDetails.addresses[0]., where following the . you’ll add the property from the address object you need.