salesforce web以引导形式嵌套

时间:2017-04-27 18:55:16

标签: html forms salesforce sitefinity

我尝试使用普通的内容块控件将Salesforce Web-to-lead表单插入我们外部网站的CMS页面(我们使用Telerik SiteFinity,如果这有所不同)。遗憾的是,当页面被渲染时,SiteFinity会创建自己的标记,该标记包含Salesforce生成的代码,因此会创建嵌套表单。这显然不起作用。

有没有人想出这样的问题的解决方案?我已经查看了其他嵌套的表单解决方案,但没有看到这样的解决方案。其他所有似乎都意味着对我没有使用SiteFinity的代码有更多的控制(我们的SF实例是在外部开发的,我们必须使用的是CMS方面的东西)。

我尝试过的一件事"有点"工作但编码不好的做法是在Salesforce生成的代码之前放置一组空的表单标签。但是页面没有使用返回URL,只列出已排队插入我们的SF组织中的Leads对象的字段。

这是我插入的网络到主导代码(加上糟糕的练习空表格):

<form></form>
<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
<!--  If necessary, please modify the charset parameter to specify the        -->
<!--  character set of your HTML page.                                        -->
<!--  ----------------------------------------------------------------------  -->
<!-- <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8"> -->
<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <FORM> element to your page.             -->
<!--  ----------------------------------------------------------------------  -->
<form id="sf_lead_entry" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
    <input name="oid" type="hidden" value="<org id>" />
    <input name="retURL" type="hidden" value="https://uat.collegeadvantage.com/529intheworkplace/thank-you" />
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
    <!--  these lines if you wish to test in debug mode.                          -->
    <input name="debug" type="hidden" value="1" />
    <input name="debugEmail" type="hidden" value="software@collegeadvantage.com" />
    <!--  ----------------------------------------------------------------------  -->
    <label for="first_name">First Name</label><input name="first_name" id="first_name" type="text" size="20" maxlength="40" /><br />
    <label for="last_name">Last Name</label><input name="last_name" id="last_name" type="text" size="20" maxlength="80" /><br />
    <label for="company">Company</label><input name="company" id="company" type="text" size="20" maxlength="40" /><br />
    <label for="title">Title</label><input name="title" id="title" type="text" size="20" maxlength="40" /><br />
    <label for="phone">Phone</label><input name="phone" id="phone" type="text" size="20" maxlength="40" /><br />
    <label for="email">Email</label><input name="email" id="email" type="text" size="20" maxlength="80" /><br />
    <label for="street">Street</label><textarea name="street"></textarea><br />
    <label for="city">City</label><input name="city" id="city" type="text" size="20" maxlength="40" /><br />
    <label for="state">State/Province</label><input name="state" id="state" type="text" size="20" maxlength="20" /><br />
    <label for="zip">Zip</label><input name="zip" id="zip" type="text" size="20" maxlength="20" /><br />
    Lead Channel:<textarea name="<custom control id>" id="<custom control id>" wrap="soft" type="text"></textarea><br />
    <input name="submit" type="submit" value="Submit Query" />
</form>

有没有人有办法解决这个问题?

谢谢, 杰米

1 个答案:

答案 0 :(得分:3)

Sitefinity在所有网页上都有form标记,因为它是asp.net应用。并且您无法嵌套form标记。

来自html5规范:https://www.w3.org/TR/html5/forms.html#the-form-element

  

4.10.3表单元素

     

内容模型:

     

流内容,但没有form元素后代。

在你的情况下有两种方式。

  • 最好的方法是遵循@Veselin Vasilev的方法并为此创建新的asp.net控件
  • 使用javascript,并使用div代替form代码。点击提交按钮后,此JS将创建隐藏的表单。

带有数据属性的替换div的示例:

<div data-sitefinity-form="" data-action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" data-method="POST"> </div>

JS:

(function() {
        var pseudoForms = document.querySelectorAll('[data-sitefinity-form]');
        for(j=0;j<pseudoForms.length;j++)
        {
           var container = pseudoForms[j];
           if (container === null)
               return;
           var inputs = container.querySelectorAll("input, textarea, select");
           var allInputs = document.forms["aspnetForm"].querySelectorAll('input, textarea', 'select');
           for (var i = 0; i < allInputs.length; i++) {
               allInputs[i].addEventListener("invalid", function(event) {
                   if (Array.indexOf(inputs, document.activeElement) >= 0 && Array.indexOf(inputs, event.target) < 0)
                       event.preventDefault();
               }, true);
           }
           var submitClick = function (sender) {
               var isValid = true;
               if (isValid) {
                    function findAncestor (el) {
                        while ((el = el.parentElement) && !el.hasAttribute("data-sitefinity-form"));
                        return el;
                    }
                    var pForm = findAncestor(sender.target || sender.srcElement);
                   var form = document.createElement("form");
                   form.style.display = "none";
                   form.setAttribute("action", pForm.getAttribute("data-action"));

                   if (pForm.getAttribute("data-method"))
                        form.setAttribute("method", pForm.getAttribute("data-method"));
                   if (pForm.getAttribute("enctype"))
                       form.setAttribute("enctype", pForm.getAttribute("enctype"));
                   else
                       form.setAttribute("enctype", document.forms["aspnetForm"].getAttribute("enctype"));
                   form.setAttribute("encoding", document.forms["aspnetForm"].getAttribute("encoding"));

                   form.appendChild(pForm);

                   sender = sender.target || sender.srcElement;
                   if(sender)
                   {
                       var submitHiddenInput = document.createElement("input");
                       submitHiddenInput.setAttribute("type", "hidden");
                       submitHiddenInput.setAttribute("name", sender.name);                                
                       submitHiddenInput.setAttribute("value", sender.value || "Submit");
                       form.appendChild(submitHiddenInput);
                   }

                   document.body.appendChild(form);


                   form.submit();
                   return false;
               }
           };
           var handleFormSubmitElements = function (elementName) {
               var allSubmitElements = container.getElementsByTagName(elementName);
               var elementCount = allSubmitElements.length;
               while(elementCount) {
                   typeAttr = allSubmitElements[elementCount - 1].getAttribute("type");
                   if(typeAttr == "submit") {
                       var currentClick = allSubmitElements[elementCount - 1].onclick;
                       if (currentClick)
                           allSubmitElements[elementCount - 1].onclick = function () { if (currentClick()) return submitClick(); else return false; };
                       else
                           allSubmitElements[elementCount - 1].onclick = submitClick;
                   }
                   elementCount--;
               }
           };
           handleFormSubmitElements("input");
           handleFormSubmitElements("textarea");
           handleFormSubmitElements("select");
           handleFormSubmitElements("button");
        }
   })();