Making Form Fields Read Only

[Amy_Lepre]

With Forms 1.0, I had some custom code (largely written by someone else in the community, not me) that allowed me to display the value of form fields, but make the fields themselves read-only so the values couldn't be changed upon form submission. This same code won't work for Forms 2.0. Has anyone done something like this and are you willing to generously share the code you used to make it happen? 🙂

[Chris_Johnston]

Hi Amy, I am super interested in what your use case is for this? My initial thoughts are, why don't you just use Tokens to display this information on the Landing Page and declutter the form? Either way, I am sure there are tons of generous people here on the Forms who might be able to help you out. I work with a team of developers, and the code isn't overly complicated, and if you aren't able to find some to replicate, our team would be happy to help you (although perhaps less generously than you were hoping for).

[SanfordWhiteman]

Very simple for text and text-like fields (input[type="text"], input[type="email"], etc.) -- see MktoForms2 :: Lock Filled Fields​

For sets like checkboxes it's a little more complex. Let me know if that's something you're currently doing.

[Amy_Lepre]

Hi Sanford,

Thanks for your response. I tried a couple of ways to put this JS into my guided landing page, but I get an unexpected (for me) response - my form shows up on the page twice, with the first form working to make the fields read only and the second form not doing that. The method I'm using now is I have a script block on the landing page, as set in the template like this:

   <div class="mktoText" mktoname="Script" id="Script">

     </div>

I added the JS like so, changing the variable information to ours:

<script type="text/javascript">

var instanceURL = "//app-abb.marketo.com",

munchkinId = "599-FFU-113",

formId = 3144;

MktoForms2.loadForm(instanceURL, munchkinId, formId);

MktoForms2.whenRendered(function(form) {

/* array of  the fields you want to mark read-only */

var lockFilledFields = ["FirstName", "Email"];

/* ---- NO NEED TO EDIT BELOW THIS LINE! ---- */

var formEl = form.getFormElem()[0];

lockFilledFields

.map(function(fieldName) { // names to selector

return '[name="' + fieldName + '"]:not([data-rendered="true"])';

})

.map( // stor to collection

formEl.querySelectorAll, formEl

)

.forEach(function(els) { // mark all and set readOnly if filled

[].slice.call(els).forEach(function(el) {

el.setAttribute("data-rendered", "true");

if (el.value != "" ) {

el.readOnly = true;

}

});

});

});

</script>

Marketo does insert this after the opening script tag:

// <![CDATA[

I tried putting the code in the custom head HTML section, but that seemed to have no effect at all. Hopefully it's just a simple user error on my part that's causing the form to show up twice on the landing page. Any ideas?

[Amy_Lepre]

FYI - here is the code that I was using on the old landing page (non-guided) using a Forms 1.0 form.

This reminds me there is a second part to this, where we saw an issue in the past with any spaces in the querystring coming into the form with the URL encoded format of %20.

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>

<script src="/js/public/jQueryString-2.0.2-Min.js" type="text/javascript" ></script>

<script>

  // to set cookies.  Uses noConflict just in case

var $jQ = jQuery.noConflict();

var pEmail = decodeURIComponent($jQ.getQueryString({ ID: "Email" }));

var pFirstName = decodeURIComponent($jQ.getQueryString({ ID: "FirstName" }));

var pLastName = decodeURIComponent($jQ.getQueryString({ ID: "LastName" }));

var pCompany = $jQ.getQueryString({ ID: "Company" });

var pCountry = $jQ.getQueryString({ ID: "Country" });

var pCompiled_Lead_Feedback__c = $jQ.getQueryString({ ID: "Compiled_Lead_Feedback__c" });

var p_mkt_trk = $jQ.getQueryString({ ID: "_mkt_trk" });

pFirstName=pFirstName.replace(/%20/g," ");

pLastName=pLastName.replace(/%20/g," ");

pCompany=pCompany.replace(/%20/g," ");

pCountry=pCountry.replace(/%20/g," ");

pCompiled_Lead_Feedback__c=pCompiled_Lead_Feedback__c.replace(/%20/g," ");

document.getElementById("Email").setAttribute("value", pEmail);

document.getElementById("FirstName").setAttribute("value", pFirstName);

document.getElementById("LastName").setAttribute("value", pLastName);

document.getElementById("Company").setAttribute("value", pCompany);

document.getElementById("Country").setAttribute("value", pCountry);

document.getElementById("Compiled_Lead_Feedback__c").setAttribute("value", pCompiled_Lead_Feedback__c);

document.getElementById("Compiled_Lead_Feedback__c").value = pCompiled_Lead_Feedback__c;

document.getElementById("_mkt_trk").setAttribute("value", p_mkt_trk);

$jQ(document).ready(function() {

poller = setInterval(function(){

if($jQ('#Email').val().length >= 1)

{ $jQ('#Email').prop('readonly', true); clearInterval(poller);

  $jQ('#FirstName').prop('readonly', true); clearInterval(poller);

  $jQ('#LastName').prop('readonly', true); clearInterval(poller);

  $jQ('#Company').prop('readonly', true); clearInterval(poller);

    $jQ('#Country').prop('readonly', true); clearInterval(poller);

  $jQ('#Compiled_Lead_Feedback__c').prop('readonly', true); clearInterval(poller);

}

}, 500);

});

</script>

[SanfordWhiteman]

Wow, new winner, worst form code contest.   Can you delete the post with the Forms 1.0 code so no one copies it? Thanks.

[SanfordWhiteman]

Thanks for your response. I tried a couple of ways to put this JS into my guided landing page, but I get an unexpected (for me) response - my form shows up on the page twice, with the first form working to make the fields read only

It shows up twice because you're probably calling ​loadForm​ twice!

If you already have a named Form element on a Marketo LP, or already have the embed code on a non-Marketo LP, you just need the part that starts with

MktoForms2.whenRendered(function(form) {

My CodePen necessarily includes the loadForm call at the top. You don't need to do that again.

Also, when pasting code here, ​please ​use syntax highlighting.

It's not readable otherwise.

[SanfordWhiteman]

Also, if you can move this whole thread to Products​ that would be better (it's supposed to be there b/c it's Marketo-product-specific).

[SanfordWhiteman]

why don't you just use Tokens to display this information on the Landing Page and declutter the form

This won't work if the intent (as it usually is) is to make a field read-only if it currently has a value. Thus it needs to be a form <input>, not simple text, so it can serve both purposes.

[Dan_Stevens_]

Sandy, I really enjoy reading all of the solutions you provide to address ways to extend the functionality of forms.  But what's still difficult to comprehend is how to deploy these solutions in our existing guided LP environment, using our primary LP template.  Since you're no longer to add custom HTML code blocks like you were able to with free-form LPs, all of the customization must be done at the template level.  So does this mean we need to create yet another template each and every time we want to extend the functionality of forms on our LPs?

Courtney Grimes​ submitted this great idea a few months back:

According to this idea (also submitted by Courtney) - - this functionality is "coming soon" (I'm just not sure when Marketo PMs marked this as such).