Making Form Fields Read Only

Amy_Lepre
Level 7

Making Form Fields Read Only

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

19 REPLIES 19
Chris_Johnston
Level 8

Re: Making Form Fields Read Only

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
Level 10 - Community Moderator

Re: Making Form Fields Read Only

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

Re: Making Form Fields Read Only

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

Re: Making Form Fields Read Only

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
Level 10 - Community Moderator

Re: Making Form Fields Read Only

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
Level 10 - Community Moderator

Re: Making Form Fields Read Only

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.

pastedImage_3.png

pastedImage_4.png

It's not readable otherwise.

SanfordWhiteman
Level 10 - Community Moderator

Re: Making Form Fields Read Only

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
Level 10 - Community Moderator

Re: Making Form Fields Read Only

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_
Level 10 - Champion Alumni

Re: Making Form Fields Read Only

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