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

[alban]

Your software
My Mautic version is: 2.14.2
My PHP version is:

Your problem
My problem is:

I have an email, that embeds a link to a page on my Wordpress website. I have a Mautic form of this page. It’s been integrated there by pasting the code provided in Mautic, otherwise called “Manual integration” in Mautic.
What I want to do is to prefill my form fields, by passing key/value pairs as query parameters in my email’s link to the page.

It doesn’t work, even though I have been trying the procedure outlined here : https://www.mautic.org/docs/en/forms/manage_forms.html#pre-populate-a-form-field-value

I was expecting that when a form loads on a page it would grab the query parameters and try to match form fields, but apparently it’s not what’s happening.

Has anyone been successfully pre-populating a form field from an email link clicked in Mautic 2.14.2? How?

These errors are showing in the log:

• There is no error visible in the console

Steps I have tried to fix the problem:

• Apply steps in the documentation.
• Out of despair, I have tried to add the Mautic snippet for page hits, but it didn’t help either.

[rcheesley]

Hi there, I can’t speak to the issue you mention, but have you tried updating Mautic to a more recent version?

2.14.2 is somewhat out of date and I see multiple fixes relating to forms: https://github.com/mautic/mautic/releases

Probably worth checking that out first in a localhost to see if it resolves your problems?

[mikew]

Hi

I am having a similar challenge here. I have done research and found a few posts on this (How to pre populate a form with an email address for idiots like me. amount others) and still I am not getting the desired behaviour

I have created a form with email and made behaviour Auto-Fill Data:

I also made sure that the email field in Custom Fields is set to Publicly Updatable:

I created an email with the link https://mydomain.com/form_landingpage.html?email={leadfield=email|true}
Sent this mailer, clicked, and e-mail was not repopulated.
Then went and tried with contact field instead of lead field.
https://mydomain.com/form_landingpage.html?email={contactfield=email|true}

Same - not populated.

Checked the code that is manually generated from Form:

Any insights to what I am missing would be great.

Thanks in advance

[leoschuler]

I just have the same problem, follow all the steps and the form does not seem to auto populate.

I don’t think there is something wrong with my setup. but the form is not reading the url content.

to workaround this issue, I have included the following script in the end of my landing page, this code will do what the documentation is promising to do, add the values in the url paramenters into the form field. keep in mind that I write this down for my particular issue, I have not tested with all the possible scenarios, I know that this script will not populate checkboxes and radiobuttons, for example, because they deal with values differently, if some one is interested in this type of fix I might expand it to cover more scenarios, but this is just a workaround until I find what is wrong with the mautic configuration:

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

[mikew]

I managed to do this and wrote up a small blog post over here.

[leoschuler]

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.

[leoschuler]

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

[patrickeidemiller]

@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?

[leoschuler]

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.

[patrickeidemiller]

@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.

[leoschuler]

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

[patrickeidemiller]

@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.

[leoschuler]

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.

[leoschuler]

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

[mattcameron]

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

[keyleads]

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.

[robm]

@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?

How to integrate Thrive Leads with Mautic

[leoschuler]

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

[leoschuler]

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

[joeyk]

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