13 Replies Latest reply on Aug 15, 2017 11:02 PM by Sanford Whiteman

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

        • Re: Making Form Fields Read Only
          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).

          1 of 1 people found this helpful
            • Re: Making Form Fields Read Only
              Sanford Whiteman

              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.

                • Re: Making Form Fields Read Only
                  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?

                    • Re: Making Form Fields Read Only
                      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>

                      • Re: Making Form Fields Read Only
                        Sanford Whiteman

                        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.

                        • Re: Making Form Fields Read Only
                          Sanford Whiteman

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

                      • Re: Making Form Fields Read Only
                        Sanford Whiteman

                        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.

                        • Re: Making Form Fields Read Only
                          Amy Lepre

                          Hi Chris,

                           

                          Here's our use case:

                           

                          We have a distributor network that sells our line of products. When leads that we've identified as belonging to our distributors come to our website and/or landing pages and generate enough activity to push their lead score over a certain threshold, we send the distributor an alert with the lead information and activity. We then ask them to provide feedback on the lead by means of a link in the email that contains a querystring with token values to populate the form fields in the landing page. We don't want the distributors to change the lead information, just want it to display so they can see they're providing feedback on the right person. I don't believe (trust) that the token on the landing page would work since the distributor's own cookied information may show instead of the lead's information. I'm certainly open to other ideas, but am going to take a look at what Sanford provided below to see if that works for me.

                           

                          Thanks for your response!

                            • Re: Making Form Fields Read Only
                              Sanford Whiteman

                              I don't believe (trust) that the token on the landing page would work since the distributor's own cookied information may show instead of the lead's information.

                              You're correct about this.

                               

                              But what you didn't explain before is that the fields are being filled from the query string. In Forms (1.0 and 2.0) this isn't native behavior because only hidden fields are filled from the query. Therefore you need to parse the query string as well.  I added that functionality to expanded CodePen. You can use uri.js as included in the HTML pane here: MktoForms2 :: Lock URL-Filled Fields