Have you encountered a CORS problem when attempting to embed Web-to-Lead or Web-to-Case forms on your website?
Cross-Origin Resource Sharing (CORS)
Cross-Origin Resource Sharing (CORS) is an HTTP header-based mechanism that enables a server to specify which origins (domains, schemes, or ports) other than its own are permitted to load resources through a web browser.
CORS errors occur when a server fails to provide the necessary HTTP headers as specified by the CORS standard. To address a CORS error in the context of an API Gateway REST API or HTTP API, you need to reconfigure the API to align with the CORS standard.
Resolution
Here’s an alternative approach involving an HTML form and processing it with JavaScript.
<script type="text/javascript">
// Case Data preparation
var postData = {
oid: '00D0b000000xxxx', //Put your ORGID here
name:'John Smith',
company:'ACME',
email:'yyy@customercompany.com',
origin:'Web',
subject:'Web2Case using the custom API',
description:'This is an automated transparent Case sent using our custom API.'
}
// Send data to Salesforce
webToCase(postData);
// Web to Case function
function webToCase(fields) {
var customHiddenIframeName='JLA_API';
if(!document.getElementById(customHiddenIframeName)){
var theiFrame=document.createElement("iframe");
theiFrame.id=customHiddenIframeName;
theiFrame.name=customHiddenIframeName;
theiFrame.src='about:blank';
theiFrame.style.display='none';
document.body.appendChild(theiFrame);
}
fields['retURL']='http://127.0.0.1';//dummy URL
var form = document.createElement("form");
form.method = "POST";
form.action = "https://webto.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8";
form.setAttribute("target", customHiddenIframeName);
for (var fieldName in fields) {
var theInput = document.createElement("input");
theInput.name=fieldName;
theInput.value=fields[fieldName];
theInput.setAttribute("type", "hidden");
form.appendChild(theInput);
}
document.body.appendChild(form);
form.submit();
}
</script>
<script type="text/javascript">
// Lead Data preparation
var postData = {
oid: '00D0b000000xxxx', //Put your ORGID here
first_name: 'M Hamza',
last_name: 'Siddiqui',
email: 'code@yopmail.com',
phone: '1112223333',
}
// Send data to Salesforce
webToLead(postData);
// Web to lead function
function webToLead(fields) {
var customHiddenIframeName='JLA_API';
if(!document.getElementById(customHiddenIframeName)){
var theiFrame=document.createElement("iframe");
theiFrame.id=customHiddenIframeName;
theiFrame.name=customHiddenIframeName;
theiFrame.src='about:blank';
theiFrame.style.display='none';
document.body.appendChild(theiFrame);
}
fields['retURL']='http://127.0.0.1';//dummy URL
var form = document.createElement("form");
form.method = "POST";
form.action = "https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8";
form.setAttribute("target", customHiddenIframeName);
for (var fieldName in fields) {
var theInput = document.createElement("input");
theInput.name=fieldName;
theInput.value=fields[fieldName];
theInput.setAttribute("type", "hidden");
form.appendChild(theInput);
}
document.body.appendChild(form);
form.submit();
}
</script>
Wishing you productive coding!