External web page -- known users shown one field to fill -- show custom HTML

[bartborosky]

I'd like to use the "show custom HTML" option for a Marketo form, but still ask one form field. The Marketo form is on an external website, NOT a Marketo landing page.

The field we would like to use is called "Deployment Option", with REST API name: "Deployment_Option__c"

Is this possible using the HTML input box for "show custom HTML", maybe with a simple script to let the known user see a select box and pick the deployment option field, which has two choices?

If it is possible, how could it be done?

Thanks in advance for your help.

[SanfordWhiteman]

---

The field we would like to use is called "Deployment Option", with REST API name: "Deployment_Option__c"

---

(SOAP names are used on forms, not REST.)

---

Is this possible using the HTML input box for "show custom HTML", maybe with a simple script to let the known user see a select box and pick the deployment option field, which has two choices?

If it is possible, how could it be done?

Yes, you can put an <input type="select"> in the Custom HTML. To start off, it won't have any inherent meaning to Marketo (that is, the field won't be posted, it'll just be dispayed). Then you can wire up the field value to the actual Marketo form using addHiddenFields.

[bartborosky]

Thanks Sanford. I've taken a first step, but am not sure how to wire it up correctly. 

Welcome back, {{lead.FirstName}} {{lead.LastName}}.<br /><br />

<label for="testOption">Please Select an Option:</label><select name="testOption" id="testOption">
<option value="Cloud">Cloud</option>
<option value="Download">Download</option>
</select><br /><br />

{{form.Button:default=Submit}}<br /><br />{{form.NotYou:default=Not you?}}

[SanfordWhiteman · Accepted solution]

For this case it's as simple as

MktoForms2.whenReady(function(mktoForm){
   const formEl = mktoForm.getFormElem()[0],
         buttonEl = formEl.querySelector(".mktoButton[type='submit']");       
   
   // reenable Forms 2.0 events
   buttonEl.addEventListener("click",mktoForm.submit);

   mktoForm.onSubmit(function(mktoForm){      
     const formEl = mktoForm.getFormElem()[0],
           testOptionSelect = formEl.querySelector("select[name='testOption']");         
     
     mktoForm.addHiddenFields({
       testOption : testOptionSelect.value  
     });            
  });   
});

[bartborosky]

Thank you so much @SanfordWhiteman !!