Can't pre-fill form fields with procedure described in Mautic documentation

Product Support
7

So today, at 11PM, i finally decided to do additional investigation regarding this issue / feature that appears to have a life of its own.

Here is what I found out. there are 2 different things defined here that works (or don’t ) independently from each other. And I guess what makes this confuse is that usually people say you suppose to do both things.
Here are the 2 configurations and what it does (or suppose to do):

  1. Auto fill data - from Behavior tab in Form field setup
    How to make it work:
    A. make sure you are not logged in mautic (people recommend use incognito mode or another browser)
    B. The form must be embeded in a mautic landing page (although I think it can work in any page containing the tracking javascript - mtc.js - but I have not tested this hypothesis)
    How does it work
    with this set in place, mautic will recognize the contact using tracking cookies and will automatically fill the form fields with the values of the contact record. even if the user have never used the computer before, if the user clicks in the link that resides under the e-mail message, mautic will recognize that link was sent to the specific e-mail address and make the connection with the proper contact.
    — in the Auto fill data option there is a help message saying that if two users use the same machine (or IP address), mautic might get the wrong detail information - this may be a concern when a user navigates to the landing page directly, but mautic should have the correct information about whose contact suppose to be if the user navigates to the page thru the email link.
    — So one thing to keep in mind about this option is that the field information does not come from the page URL (this is option 2) the information is store in mautic database and by the tracking cookie mautic determines which contact is accessing the page and auto-populate with the information. so you don’t need to setup a custom link to the page, provide additional information thru the url or anything else. a regular link to the page should be enough.

  2. pre-populating field with data from the URL (query string)
    another option described in the documentation is passing the information you want to use in the form thru the URL. in order to set this up, you need to:
    A. customize the link in the e-mail to include the values you want to use in the form
    B. Nothing - the documentation says that include the parameter in the url is enough to mautic understand that the value should be used to populate the field.
    But this does not work, this may have work in the past, I don’t know, but my guess is that people think this work when in fact Option 1 is working instead (and they think the data is being pull out of the url when in fact mautic is using data from the contact record). I have looked into the mautic-form.js and there is no code there that reads the page url (location object).
    How to make this work:
    in order to make this work you need to change step B. and include a script in the page containing the form that reads the content from url and include it in the form fields. I have written a simple javascript code that does that (but only for regular text fields), if people need help I can help them to do that as well.

the script:

<script>
var __fields = decodeURIComponent(location.search.toString().slice(1)).split("&")

__fields.forEach( param=> {
  const [fieldName, fieldValue ] = param.split("=");  
  const el = document.querySelector(`form *[name="mauticform[${fieldName}]"]`);
  if( !!el ) el.value = fieldValue;
})
</script>

include this script at the bottom of the page or after closing the form tag