17 Replies Latest reply on Jun 6, 2013 9:53 AM by ccarmichael

    Curious if anyone has had success pasting form HTML code in their Jive community platform?

    ccarmichael

      I have tried virtually every option in Jive and there does not appear to be a way to do this (Jive strips a good portion of the form HTML code out as a "security measure"), rendering the form unusable.  Does anyone know a way around this, without a Jive Professional Services implementation?  We would like to place form HTML in our pages (not as an HTML widget).

        • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
          Ryan Rutan

          If its an option for you as an OnPrem or Hosted solution, I use the Managed Snippets Plugin and it works like a charm.

          You are correct, that unless you are a system admin ... HTML is stripped to protect the system from XSS and other JS security vulnerabilities. =\

           

          Hope this helps,

          RR

            • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
              ccarmichael

              Ryan Rutan


              Thanks for this info.  Can you tell me how the Managed Snippets Plugin can be configured to allow us to use the full HTML without code being stripped?  Not sure how to place the snippet on a page?  Appears I may be able to reference the snippet somehow (i.e. snippet://EVENTS_TEST?foo=bar), but we want this to show up within a page and not a widget.

               

              I am a full system admin in our Jive hosted solution.  Prior to my post here, I tried to adjust this through the following, without any effect:

               

              • HTML filters in Admin Console --> Space --> Settings --> Filters & Macros --> HTML Filter
              • setting spring.htmlFilter.enabled = false
              • setting globalRenderManager.HTMLFilter.enabled = false
              • ...followed by a restart

               

              Regards,

              Curtis

                • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                  Ryan Rutan

                  Please read the document for the plugin here:

                  https://community.jivesoftware.com/docs/DOC-63200

                   

                  It explains how to use the extension.  In general, this plugin is not susceptible to stripping because I wrote it =)

                    • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                      ccarmichael

                      Thanks Ryan Rutan - I had a look at this document but it was not clear how I could include a snippet in a page, without using a widget?

                        • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                          Ryan Rutan

                          Sorry, I thought you meant not using an HTML widget.  If you'd like to embed a form into a piece of content (i.e. document/blogpost), you can use that snippet syntax you found.  You'll need to setup the snippet and make sure it is valid XML markup, and then it can be embedded with the syntax.  Does that help?

                            • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                              ccarmichael

                              Thanks for this clarification.  I am trying to do a quick test where I paste in a simple MailChimp form through a Managed Snippet... not sure if there is some kind of work-around the XML requirement?

                                • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                  Ryan Rutan

                                  It has to be HTML that is valid XML markup.  Slight distinction, but in general ... this isn't hard to do.

                                    • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                      ccarmichael

                                      Thank you.  I believe I am close to resolving this, but for some reason, I am seeing the ]]> appear below the HTML output, as shown in the following screen:

                                       

                                      screen2.jpg

                                       

                                      This is the code I am using, based on this tutorial:

                                       

                                      <xml>
                                      <![CDATA[

                                      <div id="mc_embed_signup">

                                      <form action="myurl.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

                                        <label for="mce-EMAIL">Subscribe to our mailing list</label>

                                        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>

                                        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

                                      </form>

                                      </div>

                                      ]]>
                                      </xml>

                                        • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                          Ryan Rutan

                                          You can try the <!-- comment trick and see if you can hide the CDATA and still have them interpretted, such as

                                          <!--

                                          [CDATA[

                                          -->

                                          etc... and the same for the closing tag.

                                          Another way (which is how I do it) is to XML update your actual code.  i.e. Add the /> suffix for the <INPUT> tag. and change required to required="required" ... novalidate="novalidate" etc... 

                                           

                                          Hope that helps.

                                            • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                              ccarmichael

                                              If I use the comment trick, I can see the code appear OK in the snippet preview window (clicking on "View Snippet") without the ]]> showing up.  However, when I go to my page in Jive, I cannot see the snippet, even if I edit the page, remove the snippet://EVENTS_TEST, save, then place the snippet://EVENTS_TEST back in to ensure a refresh.  

                                               

                                              Here is the code I am using:

                                               

                                              <!-- <![CDATA[ --><div id="mc_embed_signup"><form action="urlhere" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate"><label for="mce-EMAIL">Subscribe to our mailing list</label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required="required" /><div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" /></div></form></div><!-- ]]> -->

                                                • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                                  ccarmichael

                                                  Ryan Rutan I tried a few other things and unfortunately could not get this to work.  I thought I would add that when I was able to get the snippet to display on our site and the ]]> showed up below it, it broke our template and dropped our right column down to the end of the page.  I installed the latest version of the plugin and restarted our instance.  Curious if you might have any other suggestions I can try?

                                                   

                                                  Regards,

                                                  Curtis

                                                    • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                                      Ryan Rutan

                                                      Try this:

                                                      <div id="mc_embed_signup">

                                                      <form action="myurl.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">

                                                        <label for="mce-EMAIL">Subscribe to our mailing list</label>

                                                        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required="required" />

                                                        <div class="clear">

                                                        <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />

                                                        </div>

                                                      </form>

                                                      </div>

                                                        • Re: Curious if anyone has had success pasting form HTML code in their Jive community platform?
                                                          ccarmichael

                                                          Thank you, this works great.  For my final test, I placed another form that uses JS validation, etc.  I am running into some XML formatting issues on some JS (below) ...I ran this against XML Validation: XML Validation.  Curious if you might have any suggestions on proper formatting for the Managed Snippets plugin?

                                                           

                                                          <script type="text/javascript">
                                                          var errorSet = null;
                                                          
                                                          
                                                          FieldObj = function() {
                                                            var Field;
                                                            this.get_Field = function() { return Field; }
                                                            this.set_Field = function(val) { Field = val; }
                                                          
                                                          
                                                            var ErrorMessage;
                                                            this.get_ErrorMessage = function() { return ErrorMessage; }
                                                            this.set_ErrorMessage = function(val) { ErrorMessage = val; }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          function ResetHighlight() {
                                                            var field;
                                                          
                                                          
                                                            if (errorSet != null) {
                                                             for (var i = 0; i < errorSet.length; i++) {
                                                               errorSet[i].Field.className = 'elqField'
                                                             }
                                                            }
                                                            errorSet = new Array();
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          function DisplayErrorSet(ErrorSet) {
                                                            var element;
                                                            var ErrorMessage = '';
                                                          
                                                          
                                                            for (var i = 0; i < ErrorSet.length; i++) {
                                                             ErrorMessage = ErrorMessage + ErrorSet[i].ErrorMessage + '\n';
                                                             ErrorSet[i].Field.className = 'elqFieldValidation';
                                                            }
                                                          
                                                          
                                                            if (ErrorMessage != '')
                                                             alert(ErrorMessage);
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          function ValidateRequiredField(Element, args) {
                                                            var elementVal=Element.value;
                                                            var testPass=true;
                                                            if (Element) {
                                                             if (args.Type == 'text') {
                                                               if (Element.value == null || Element.value == "") {
                                                                return false;
                                                               }
                                                             }
                                                             else if (args.Type == 'singlesel') {
                                                               if (Element.value == null || Element.value == "") {
                                                                return false;
                                                               }
                                                            }
                                                             else if (args.Type == 'multisel') {
                                                               var selCount=0;
                                                               for (var i=0; i<Element.length; i++) {
                                                                 if (Element[i].selected && Element[i].value !='') {
                                                                   selCount += 1;
                                                                 }
                                                               }
                                                             if (selCount == 0)
                                                               return false;
                                                            }
                                                            }
                                                            else
                                                             testPass = false;
                                                          return testPass;
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          function ValidateEmailAddress(Element) {
                                                            var varRegExp='^[A-Z0-9!#\\$%&\'\\*\\+\\-/=\\?\\^_`\\{\\|\\}~][A-Z0-9!#\\$%&\'\\*\\+\\-/=\\?\\^_`\\{\\|\\}~\\.]{0,62}@([A-Z0-9](?:[A-Z0-9\\-]{0,61}[A-Z0-9])?(\\.[A-Z0-9](?:[A-Z0-9\\-]{0,61}[A-Z0-9])?)+)$';
                                                            if ((Element) && (Element.value != '')) {
                                                             var reg = new RegExp(varRegExp,"i");
                                                             var match = reg.exec(Element.value);
                                                               if ((match) && (match.length=3) && (match[1].length<=255) && ((match[2].length>=3) & (match[2].length<=7)))
                                                                return true;
                                                            }
                                                            return false;
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          function ValidateDataTypeLength(Element, args, ErrorMessage) {
                                                            var elementVal = Element.value;
                                                            var testPass = true;
                                                          
                                                          
                                                            if (Element) {
                                                             if (args.Type == 'text') {
                                                               if ((elementVal == '')) {
                                                                testPass = false;
                                                               }
                                                               if ((args.Minimum != '') && (elementVal.length < args.Minimum))
                                                                testPass = false;
                                                               if ((args.Maximum != '') && (elementVal.length > args.Maximum))
                                                                testPass = false;
                                                             }
                                                             else if (args.Type == 'numeric') {
                                                               if ((elementVal == '')) {
                                                                testPass = false;
                                                               }
                                                               if ((elementVal != '') && (elementVal != parseFloat(elementVal)))
                                                                testPass = false;
                                                               if (args.Minimum != '') {
                                                                if ((elementVal == '') || (parseFloat(elementVal) < args.Minimum))
                                                                testPass = false;
                                                               }
                                                               if (args.Maximum != '') {
                                                                if ((elementVal != '') && (parseFloat(elementVal) > args.Maximum))
                                                                  testPass = false;
                                                               }
                                                             }
                                                            }
                                                            else
                                                             testPass = false;
                                                            return testPass;
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          function CheckElqForm(elqForm) {
                                                          var args = null;
                                                          var allValid = true;
                                                          
                                                          
                                                          if (elqForm == null) {
                                                            alert('Unable to execute form validation!\Unable to locate correct form');
                                                            return false;
                                                          }
                                                          ResetHighlight();
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['firstname'];
                                                          formField.ErrorMessage ='First Name is required'
                                                          args = {'Type': 'text' };
                                                          if (formField.Field != null) {
                                                            if (!ValidateRequiredField(formField.Field, args)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['lastname'];
                                                          formField.ErrorMessage ='Last Name is required'
                                                          args = {'Type': 'text' };
                                                          if (formField.Field != null) {
                                                            if (!ValidateRequiredField(formField.Field, args)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['title'];
                                                          formField.ErrorMessage ='Job Title is required'
                                                          args = {'Type': 'text' };
                                                          if (formField.Field != null) {
                                                            if (!ValidateRequiredField(formField.Field, args)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['company'];
                                                          formField.ErrorMessage ='Company is required'
                                                          args = {'Type': 'text' };
                                                          if (formField.Field != null) {
                                                            if (!ValidateRequiredField(formField.Field, args)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['email'];
                                                          formField.ErrorMessage ='Enter a valid email address'
                                                          if (formField.Field != null) {
                                                            if (!ValidateEmailAddress(formField.Field)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['phone'];
                                                          formField.ErrorMessage ='Business Phone is required'
                                                          args = {'Type': 'text' };
                                                          if (formField.Field != null) {
                                                            if (!ValidateRequiredField(formField.Field, args)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          
                                                          
                                                          formField = new FieldObj();
                                                          formField.Field = elqForm.elements['country'];
                                                          formField.ErrorMessage ='Country is required'
                                                          args = {'Type': 'singlesel' };
                                                          if (formField.Field != null) {
                                                            if (!ValidateRequiredField(formField.Field, args)) {
                                                             errorSet.push(formField);
                                                             allValid = false;
                                                            }
                                                          }
                                                          
                                                          
                                                          if (!allValid) {
                                                            DisplayErrorSet(errorSet);
                                                            return false;
                                                          }
                                                          
                                                          
                                                          return true;
                                                          }
                                                          
                                                          
                                                          function submitForm(elqForm) {
                                                            if (CheckElqForm(elqForm)) {
                                                              prepareSelectsForEloqua(elqForm);
                                                              fnPrepareCheckboxMatricesForEloqua(elqForm);
                                                              return true;
                                                            }
                                                            else { return false; }
                                                          }
                                                          
                                                          
                                                          function prepareSelectsForEloqua(elqForm) {
                                                            var selects = elqForm.getElementsByTagName("select");
                                                            for (var i = 0; i < selects.length; i++) {
                                                              if (selects[i].multiple) {
                                                                createEloquaSelectField(elqForm, selects[i]);
                                                              }
                                                            }
                                                            return true;
                                                          }
                                                          
                                                          
                                                          function createEloquaSelectField(elqForm, sel) {
                                                            var inputName = sel.name;
                                                            var newInput = document.createElement('input');
                                                            newInput.style.display = "none";
                                                            newInput.name = inputName;
                                                            newInput.value = "";
                                                          
                                                          
                                                            for (var i = 0; i < sel.options.length; i++) {
                                                              if (sel.options[i].selected) {
                                                                newInput.value += sel.options[i].value + "::";
                                                              }
                                                            }
                                                            if (newInput.value.length > 0) {
                                                              newInput.value = newInput.value.substr(0, newInput.value.length - 2);
                                                            }
                                                            sel.disabled = true;
                                                            newInput.id = inputName;
                                                            elqForm.insertBefore(newInput, elqForm.firstChild);
                                                          }
                                                          
                                                          
                                                          function fnPrepareCheckboxMatricesForEloqua(elqForm) {
                                                            var matrices = elqForm.getElementsByTagName('table');
                                                            for (var i = 0; i < matrices.length; i++) {
                                                              var tableClassName = matrices[i].className;
                                                              if (tableClassName.match(/elqMatrix/)) {
                                                                if (fnDetermineMatrixType(matrices[i]).toLowerCase() == 'checkbox') {
                                                                  if (matrices[i].rows[0].cells[0].childNodes.length == 1) {
                                                                    if (matrices[i].rows[0].cells[0].childNodes[0].nodeName != '#text') {
                                                                      fnCreateHorizontalMatrixCheckboxField(elqForm, matrices[i]);
                                                                    }
                                                                    else {
                                                                      fnCreateVerticalMatrixCheckboxField(elqForm, matrices[i]);
                                                                    }
                                                                  }
                                                                }
                                                              }
                                                            }
                                                            return true;
                                                          }
                                                          
                                                          
                                                          function fnCreateVerticalMatrixCheckboxField(elqForm, matrix) {
                                                            var inputName = matrix.id + 'r' + 1;
                                                            var newInput = document.createElement('input');
                                                            newInput.style.display = 'none';
                                                            newInput.name = inputName;
                                                            newInput.value = '';
                                                          
                                                          
                                                            var inputs = document.getElementsByName(inputName);
                                                            for (var i=0; i < inputs.length; i++) {
                                                              if (inputs[i].nodeName.toLowerCase() == 'input') {
                                                                if (inputs[i].checked == true) {
                                                                  if (inputs[i].type.toLowerCase() == 'checkbox') {
                                                                    newInput.value += inputs[i].value + '::';
                                                                    inputs[i].disabled = true;
                                                                  }
                                                                }
                                                              }
                                                            }
                                                            if (newInput.value.length > 0) {
                                                              newInput.value = newInput.value.substr(0, newInput.value.length - 2);
                                                            }
                                                          
                                                          
                                                            newInput.id = inputName;
                                                            elqForm.insertBefore(newInput, elqForm.firstChild);
                                                            matrix.disabled = true;
                                                          }
                                                          
                                                          
                                                          function fnCreateHorizontalMatrixCheckboxField(elqForm, matrix) {
                                                            for (var i=1; i < matrix.rows.length; i++) {
                                                              var inputs = document.getElementsByName(matrix.id + 'r' + i);
                                                              var oMatrixRow = matrix.rows[i];
                                                              var inputName = oMatrixRow.id;
                                                              var newInput = document.createElement('input');
                                                              newInput.style.display = 'none';
                                                              newInput.name = inputName;
                                                              newInput.value = '';
                                                          
                                                          
                                                              for (var j=0; j < inputs.length; j++) {
                                                                if (inputs[j].nodeName.toLowerCase() == 'input') {
                                                                  if (inputs[j].checked == true) {
                                                                    if (inputs[i].type.toLowerCase() == 'checkbox') {
                                                                      newInput.value += inputs[j].value + '::';
                                                                      inputs[j].disabled = true;
                                                                    }
                                                                  }
                                                                }
                                                              }
                                                          
                                                          
                                                              if (newInput.value.length > 0) {
                                                                newInput.value = newInput.value.substr(0, newInput.value.length - 2);
                                                              }
                                                          
                                                          
                                                              newInput.id = inputName;
                                                              elqForm.insertBefore(newInput, elqForm.firstChild);
                                                            }
                                                            matrix.disabled = true;
                                                          }
                                                          
                                                          
                                                          function fnDetermineMatrixType(oTable) {
                                                            var oFirstMatrixInput = oTable.rows[1].cells[1].childNodes[0];
                                                            return oFirstMatrixInput.type;
                                                          }
                                                          
                                                          
                                                          </script>