8 Replies Latest reply on Sep 21, 2016 3:54 PM by Sanford Whiteman

    Add Other Option to Form with Open Text

    Kim Gandy

      How can I create a form question with the last option being "other" with an open ended field? I'd like any answer to map back to the same field, so adding a rich text field below "other" would not work.

       

      Example:

      Screen Shot 2016-09-21 at 9.30.13 AM.png

        • Re: Add Other Option to Form with Open Text
          Jim Thao

          This is not an easy feat to accomplish w/o the additional field.  You're going to need custom dev work. 

           

          The reason being is because "Other" is a selected option for your field.  In addition to that, you'll need let's say, a jQuery append to display an input type field below the "Other" option.  You'll then also need to figure out how to replace the selected "Other" option with the value that is inputted into the your input type field.   Let's not get into what CSS styling is needed to accomplish this as well. 

           

          Your easiest option is do away with Marketo forms and create your own custom forms and post to Marketo via formpost or APIs, whichever you're most comfortable with. 

           

          Either way, you're going to need to put in custom dev work. 

          1 of 1 people found this helpful
          • Re: Add Other Option to Form with Open Text
            Emily Dick

            The button-click workaround is you could use a separate field for your open text "Other" and use a trigger smart campaign to write that field into the original picklist field.

            Here's a sample smart campaign:

            • Re: Add Other Option to Form with Open Text
              Emily Dick

              I would actually recommend using 1-4 temporary fields for forms/events that are basically throw-away data, instead of continually created "Other" fields. The data is then either sent through an email alert or updated into another field.

              Lol to my blocked word...perhaps I can get away with data geek?

              • Re: Add Other Option to Form with Open Text
                Sanford Whiteman

                Solution with some Forms 2.0 JS (not simple in general, but simple for me since I'm used to it!) here: MktoForms2 :: Radios w/Other

                 

                Set up the form with the magic value [OTHER] for the last radio button:

                 

                2016_09_21_18_45_01_Lab_598_Select_w_Other.png

                 

                Add a Rich Text area with your "Other" textbox:

                2016_09_21_18_46_24_Lab_598_Select_w_Other.png

                 

                2016_09_21_17_56_42_Lab_598_Select_w_Other.png

                 

                Visibility Rule to show the Rich Text when "Other" radio button is chosen:

                 

                2016_09_21_17_52_37_Lab_598_Select_w_Other.png

                 

                JS:

                 

                MktoForms2.whenReady(function(form) {
                
                  var otherTextPlaceholders = {
                    "Dealer_SegmentAU__c": "#Dealer_SegmentAU__c_other"
                  }
                
                  /* ---- no need to edit anything below this line ---- */
                
                  form.onSubmit(function(form) {
                    var formEl = form.getFormElem()[0],
                        currentValues = form.getValues(),
                        newValues,
                        otherRadio,
                        otherTextValue;
                
                    Object.keys(otherTextPlaceholders).forEach(function(fieldName) {
                      if (currentValues[fieldName] == '[OTHER]') {
                        otherTextValue = formEl.querySelector(otherTextPlaceholders[fieldName]).value;
                        newValues = {};
                        newValues[fieldName] = otherTextValue;
                
                        // ensure user-supplied value is allowed via API
                        otherRadio = formEl.querySelector('INPUT[name="' + fieldName + '"][value="' + currentValues[fieldName] + '"]');
                        otherRadio.value = otherTextValue;
                
                        // note this method call is redundant in this particular use case, but conforms to the proper API
                        form.setValues(newValues);
                      }
                    });
                  });
                });
                

                 

                Only part you'd need to edit is the otherTextPlaceholders, which is a simple map between the names of your radio button set(s) and the corresponding "Other" textboxes.  In this case, the radio buttons for the real Marketo field are Dealer_SegmentAU__c and the textbox I inserted in the Rich Text is <INPUT id="Dealer_SegmentAU__c_other">.

                 

                With the code in hand, the only thing to think about is the CSS. It could be tricky but if you know CSS principles you'll figure it out.  In my demo I applied pos:abso to the Rich Text to place it at the bottom of the column, opposite the radio button that says "Other."

                2 of 2 people found this helpful