CODEWITHSUNDEEP
javascript
Bevan Connelly
Bevan Connelly

Reputation: 11

How to put the variable field names into the hidden fields on a FormAssembly form

We have two form tools for lead capture at my org and I'm trying to create a spreadsheet which uses the same formula to create the UTM parameter links to track our marketing campaigns with Google Analytics.

Example formula =SUBSTITUTE(IF(LEFT(G4,1)="[","--",CONCATENATE(G4,IF(ISERROR(FIND("?",G4,1))=TRUE,CONCATENATE("?"),CONCATENATE("&")),IF(C4="","","estate="),IF(C4="","",C4),IF(A4="","","&utm_campaign="),IF(A4="","",A4),"&utm_medium=",H4,"&utm_source=",D4,IF(E4<>"-",CONCATENATE("&utm_content=",E4),),IF(E4<>"-",CONCATENATE("",$F$2),)))," ","%20")

On our Pardot pages I've applied the details outlined in https://jennamolby.com/how-to-use-utm-parameters-to-capture-lead-source-in-pardot/ and have these hidden fields populating correctly.

My trouble is with the FormAssembly form. I can change the above formula to include the FormAssembly ID's, ie tfa_199 replaces utm_medium and this works fine but then I would need my spreadsheet users to know which form tool is being used on that landing page. Is there a way to apply the same formula to both form tools and then using JavaScript populate the values for these hidden fields?

I've tried switching the Pardot JavaScript with the FormAssembly labels to no luck.

Sample link https://www.tfaforms.com/4757457/?tfa_98=Test%20Estate%20X999&tfa_197=Fonzi&tfa_199=social&tfa_200=Facebook&tfa_198=Feed

// Parse the URL
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
// Give the URL parameters variable names
var source = getParameterByName('utm_source');
var medium = getParameterByName('utm_medium');
var campaign = getParameterByName('utm_campaign');
var term = getParameterByName('utm_term');
var content = getParameterByName('utm_content');
var estate = getParameterByName('estate');

// Put the variable names into the hidden fields in the form"
document.querySelector("tfa_200 input").value = source;
document.querySelector("tfa_199 input").value = medium;
document.querySelector("tfa_197  input").value = campaign;
document.querySelector("tfa_201  input").value = term;
document.querySelector("tfa_201  input").value = content;
document.querySelector("tfa_196  input").value = estate;
</script> 


The ideal result is regardless of whether the form is a Pardot or FormAssembly the hidden fields populate the same using the same formula.

Upvotes: 1

Views: 1456

Answers (1)

Thomas Cayne
Thomas Cayne

Reputation: 1495

Have you tried this:

https://stackblitz.com/edit/js-hgrwkn

If your input fields have Ids:

<input type="text" id="utm_source" name="tfa_200"/>

and your hidden fields:

<input type="hidden" id="tfa_200" name="utm_source"/>

then:

<script>
   document.getElementById('tfa_200').value = 
        document.getElementById('utm_source').name;
</script>

Then document.getElementById('tfa_200').name will contain utm_source.

Upvotes: 1

Related Questions