9 Replies Latest reply on Oct 2, 2018 9:17 AM by Danny Tran

    Including a field in Rich Text HTML

    Danny Tran

      Hi there,

       

      I was wondering if anyone has ever successfully entered a field input element into the Rich Text editor area of a form. We have a lot of styling with our forms and landing pages that's making this request a nightmare. I just want the checkbox for our opt-in field to be lined up left of "label". This would typically take one minute, but due to all the styling I can't cut one bit of html/css down without having issues pop up elsewhere.

       

      This is what I'm trying to do

      <input name="Marketing_Opt_In__c" id="Marketing_Opt_In__c" type="checkbox" value="yes" class="mktoField" /> I wish to receive future informational and marketing communications.
      

      The field shows in the form, but it's not functional. I know this is a wacky way to achieve what I'm trying to do, but I've been on and off this request for far too long and I feel like this is the easiest way to get it done without overhauling all the stylesheets and LP html.

       

      Any help would be appreciated.

       

      Thanks!

        • Re: Including a field in Rich Text HTML
          Sanford Whiteman

          Yes, I do this all the time!

           

          But that field is not going to be known to the forms library (it is "functional" at the HTML level) unless you also use JS to read the checked value into a Hidden field on submit.

          1 of 1 people found this helpful
            • Re: Including a field in Rich Text HTML
              Danny Tran

              So would I enter in the JS right into the same area of the rich text html editor?

                • Re: Including a field in Rich Text HTML
                  Sanford Whiteman

                  So would I enter in the JS right into the same area of the rich text html editor?

                  You could, but I wouldn't advise it because of a quirk of the forms library.

                   

                  You can add it as a MktoForms2.whenReady listener anywhere, as long as the library (forms2.min.js) is loaded on an earlier line.

                  1 of 1 people found this helpful
                    • Re: Including a field in Rich Text HTML
                      Danny Tran

                      You the man. I think I got it working now. Thank you for talking me through it.

                      • Re: Including a field in Rich Text HTML
                        Danny Tran

                        So I spoke too soon. Every time I submit the form it marks the hidden field as TRUE regardless of whether or not I check the box. Can you please to take a look at this dummy page to see where I messed this up?

                        This is the code in the LP template:

                          <script type="text/javascript">
                          MktoForms2.loadForm("//app-sj04.marketo.com", "079-WYC-990", 2);
                        
                        
                        MktoForms2.whenReady(function(form){
                        
                        
                        form.addHiddenFields({
                        
                        
                             //These are the values which are submitted to Marketo
                        
                        
                          "Marketing_Opt_In__c"
                        
                        
                          });
                        
                        
                          form.submit();
                        
                        
                        });
                          </script>
                        

                        This is what I'm using in the rich text editor:

                        <input name="Marketing_Opt_In__c" id="Marketing_Opt_In__c" type="checkbox" class="mktoField" style="margin-top: 7px !important; margin-right: 2px !important;" /> I wish to receive future informational and marketing communications from ChargePoint, and I understand and agree to the <a href="https://www.chargepoint.com/privacy/" target="_blank" id="">privacy policy</a>.
                        
                          • Re: Including a field in Rich Text HTML
                            Sanford Whiteman

                            Yeah, your logic is quite far off.

                             

                            The idea is that you grab the raw checked/unchecked value out of the DOM on submit (note the Forms 2.0 onSubmit event occurs just before the form is sent to Marketo).

                             

                            You seem to have changed your code after posting it (don't do that! ) but either way, it has a syntax error, so it cannot be doing anything at all.

                             

                            What you want is this:

                             

                            MktoForms2.whenReady(function(form){
                              var formEl = form.getFormElem()[0],
                                  oobOptInEl = formEl.querySelector(".mktoHtmlText [name='Marketing_Opt_In__c']");    
                                  
                              form.onSubmit(function(form){     
                                form.addHiddenFields({
                                  Marketing_Opt_In__c : oobOptInEl.checked ? "yes" : "no"
                                });      
                              });
                            });
                            

                            And you want to take the id attribute off your checkbox.

                            1 of 1 people found this helpful