How To Customize Standard Marketo Webform with JavaScript Logic

[Anonymous]

Hi,

I have a standard Marketo Contact Us Form, that was created in Marketo Studio (typical drag and drop method) that is being used across multiple pages on a website. I have been charged with updating it to have the following dynamic logic:


> If "COUNTRY" picklist is selected and country value = US show "STATE" picklist
> If  "STATE" picklist is selected and country value = "CA" show "POSTAL" code input field.


I am able to accomplish this dynamic logic using the show() / hide() methods on a DIV ID via JQuery. The problem, I have is "HOW" to efficiently apply this update on the exisiting standard Marketo Contact Us form without having to create a new Contact Us Form this new dynamic logic. For example Marketo generates the following code for the STATE picklist:

 <li  class='mktField'>

            <label>State:</label>

            <span class='mktInput'>

            <select class='mktFormSelect' name="State" id="State" size='1'>
             <option value='' selected='selected'>-- Please Select --</option>

              <option value='AK'>AK</option>

              ........

              <option value='WY'>WY</option>

           </select>

            <span class='mktFormMsg'></span>
          </span>
</li>

In order to make my show() and hide() logic work. I need to wrap the code above with a new DIV ID like so:

<div id ='StateDisplay'>

 <li  class='mktField'>

            <label>State:</label>

            <span class='mktInput'>

            <select class='mktFormSelect' name="State" id="State" size='1'>
             <option value='' selected='selected'>-- Please Select --</option>

              <option value='AK'>AK</option>

              ........

              <option value='WY'>WY</option>

           </select>

            <span class='mktFormMsg'></span>
          </span>
</li>
</div>

or add a new ID to the <li> tag like so:

 <li  class='mktField' id = 'StateDisplay'>

            <label>State:</label>

            <span class='mktInput'>

            <select class='mktFormSelect' name="State" id="State" size='1'>
             <option value='' selected='selected'>-- Please Select --</option>

              <option value='AK'>AK</option>

              ........

              <option value='WY'>WY</option>

           </select>

            <span class='mktFormMsg'></span>
          </span>
</li>


Is this possible to do without creating a new contact us form and saving it as a template (This is the only place I know of where I have the flexibility to write custom code and modify Marketo's generated code e.g. add the DIV ID around the STATE picklist code etc.) 


Thanks in advance for your time and help.




 

 

           

 

[Anonymous]

You should be able to do these code updates to your existing page/form in Design Studio than just export the code and do the updates needed on the main site.

[Anonymous]

Hi Mark, 

Thank you for you response. I think I figured it out.  My solution was instead of depending on DIV IDs that I would create to make the show()/hide() logic work. I instead depend on IDs that Marketo generate automatically based on field names etc.
Example....

Instead of 

  $jQ('#StateDisplay').hide();

  $jQ('#PostalDisplay').hide();

.... #StateDisplay and #PostalDisplay are IDs I created....

I used, were I am calling the form element id directly. 

  $jQ('select[name="State"][id="State"]').hide();

  $jQ('input[name="Postal Code"][id="Postal Code"]').hide();

** Please note on a side note, I had to also use a function to show/hide the generated form labels as well. The link below at at stackover flow was very helpful:
http://stackoverflow.com/questions/16966140/find-html-element-by-content-and-hide-using-jquery


The benefit of this approach is now I can use the "HTML block" or the "CUSTOM HEAD HTML" to post any custom JavaScript code.

It's all about small victories  :). Thank you for the feedback ...