Making Form Fields Read Only | Community
Skip to main content
Amy_Lepre
Amy_Lepre
Level 6
August 14, 2017
Question

Making Form Fields Read Only

  • August 14, 2017
  • 1 reply
  • 7328 views

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? :-)

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Chris_Johnston
Chris_Johnston
Level 6
August 14, 2017

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
SanfordWhiteman
Level 10
August 15, 2017

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
Amy_LepreAuthor
Level 6
August 15, 2017

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?

Terms & ConditionsAccessibility statement

Loading footer...