Reputation: 23
salesforce web to lead form nested
I'm trying to insert a Salesforce Web-to-lead form into a page on our external website's CMS (we use Telerik SiteFinity if that makes a difference) using a plain old Content Block control. Unfortunately, when the page gets rendered, SiteFinity creates its own tag that wraps around the Salesforce-generated code and therefore creates a nested form. That obviously doesn't work.
Has anyone come up with a solution to a problem like this? I've looked at other nested form solutions and not seen one like this. The others all seem to imply a lot more control over the code that I do not have with SiteFinity (our SF instance was developed externally and all we have to work with is the CMS side of things).
The one thing I've tried that "sort of" works but is poor coding practice is to put an empty set of form tags right before the Salesforce-generated code. But then the page doesn't use the return URL, and just lists the fields that have been queued for insertion into our Leads object in our SF org.
Here's the Web-to-lead code I'm inserting (plus the bad-practice empty form):
<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="[email protected]" />
<!-- ---------------------------------------------------------------------- -->
<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>
Does anyone have any ways around this?
Thanks, Jamie
Upvotes: 0
Views: 455
Answers (1)
Reputation: 8736
Sitefinity already have form tag on all pages because it is asp.net app. And you cannot nest form tags.
From the html5 specs: https://www.w3.org/TR/html5/forms.html#the-form-element
4.10.3 The form element
Content model:
Flow content, but with no
formelement descendants.
In your case there two ways.
- Best way is to follow @Veselin Vasilev's approach and create new asp.net control for that
- Use javascript, and use
divinsteadformtag.This JS will create hidden form, once you click submit button.
Example of replaced div with data attributes:
<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");
}
})();
Upvotes: 3