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

thank you,
during my tests I miss the last magic step, which is to test without being logged in mautic.
I run more tests today and update this thread.

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

@leoschuler Thanks for documenting! I’ve had this working/not working a various times and really couldn’t figure how/why.

In your description above, you indicate that the script is only for text fields. Not sure why, but my use case is to have a dropdown field to identify the campaign so that I can run workflow logic against the campaign. How does the above script change for dropdowns? I assume that I need to pass the value instead of the label in the URL, but what are the other changes?

for dropdowns, this script will work, just pass the value instead of the label as you mention.
what would not work is populating checkboxes and radiobuttons, because those fields work differently, do not try to populate those fields using this code.
changing this code to include those fields is not hard, I will provide an improved version next week.

@leoschuler Your script isn’t expected the field name is it? The form on the page sends the option value if I select the value in dropdown, but if I don’t fill it in, value in the URL is not passed back to Mautic upon submit.

acording with this code the name of the field is campaign not accountType, so in the URL you should have ?campaign=ProspectFreeClass1,

what my script will do is look at all the parameters passed in the URL (eg: campaign). then check if there is a mautic form field with that name (or name=“mauticform[campaign]”) and set the value of the field in this example ProspectFreeClass, the user is free to change the form field (unless you define the field as “readonly” or “hidden” , and the value will be send to mautic server once the user submits the form

@leoschuler Have you used Integromat to post to a Mautic form? I’ve tried nearly every option that I can find and while I get a 200 response when I run the flow, nothing posts to the Mautic form. I’ve tested the url passing the variables on a Mautic landing page directly and I now have that sorted.

no I have not, the form was built to handle users manual submission - and a javascript file running in the user’s browser usually handles all the operation, a small reverse engineer is necessary to get all the details of the post format, the post url would probably be <mautic-server-url>/form/submit?formId=<form-id>
the fields in the post would probably contain the pattern mauticform[<nameofthefield]

but I did not have the opportunity to try to create a form submission outside a web page, I saw people asking for the feature to create a form submission thru the rest api, but currently this is not possible.

also, if you look at the generated html for the form you would see some hidden fields used for internal control, its a good idea to include those fields in the http request

Thanks @mikew for helpful post about ensuring that to MAKE SURE YOU ARE TESTING IN INCOGNITO BROWSER - it all works after all :slight_smile:

2 Likes

I know this thread is a little old but I’m having the same issue. I used your script but it’s not passing data to the mautic form. The form data does show up in the URL though. I followed all the steps written by Robin Tindall here…https://leadgenius.biz/how-to-integrate-mautic-and-thrive-leads/. I’m running mautic 3.3.5. I followed all his troubleshooting instructions so not sure what else to do. Any suggestions? It’s just a simple form, name and email.

@keyleads - i did reply to your comment on my video tutorial. I was able to repeat the steps and everything works. I suspect the issue may be either with the auto submit code belig blocked on your site. can u se the form results being passed in the url to the thank you page?

its a good idea to take a look at the browser console log to see which kind of message you are seeing, you said that there is a lot of server activity, so it might be the case where the form is being submitted to mautic but it is not passing validation (missing mandatory fields, for example). make sure the name of the fields in your form match the names of the url parameters, and there is no additional fields that is required. usually F12 key will open the developer tools of the browser, the console tab can display any javascript error that is occurring and the network tab shows what is being transmitted to mautic and what is mautic is returning

another troubleshoot idea is to unhide the form and see if there is any error messages in the form

Just making sure: the fields are publicly updateable, right?
Joey

Thank you all for the suggestions and support.

@leoschuler I checked the Javascript Console and I did see an error. It says…“Uncaught SyntaxError: Unexpected identifier (at ?tve_name=Terry&email=tkeyesjr%40gmail.com:271:82)”

When I clicked the error it took me to this line of code…
“var __fields = decodeURIComponent(location.search.toString().slice(1)).split(”&")_"

So what would be causing a syntax error in this code?

I didn’t see anything unusual in the network tab.

@robm Yes the form data from thrive leads is showing up in the URL of the thank you page it’s just not populating in the mautic form.

I also double checked the attribute field HTML name in the mautic form and it matches the variable details in the thrive leads form.

@joeyk Yes, I believe the fields are publicly updateable.

Ok I figured out the problem.

It was a syntax error as suggested in the console. I copied Robins code on his website and it looks like there was an underscore “_” after .split(”&").

I deleted this underscore and it now works.

@robm I would update this on your website to save others the frustration of troubleshooting! Thank you very much for the tutorial, it was very easy to follow step by step and I’m very excited to finally get thrive leads working with Mautic now.

@leoschuler Thank you for pointing me in the right direction on where to look!

1 Like

Great catch, no idea how the xtra “_” got there as this would have been a cut paste. Nonetheless I have edited the blog.

Glad it is now working

I checked the post (it has the old version yet, perhaps its cache) the underscore from the first line suppose to be the first char of the second line the name of the variable is __field (with double underscore) and the second line had only one underscore, I am pasting the code again with an additional “;” at the end of the lines, that way it is possible to " minimize " the code by suppressing new lines

<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>
1 Like

We created this PR that should help with prefilling. Especially useful if you use Mautic with an external Website/CMS such as WordPress.

Please contribute by testing: Fix issue with pre-populating the value of a form field from the URL query parameters by volha-pivavarchyk · Pull Request #11077 · mautic/mautic · GitHub