Embedded Files
Web to Lead
Web to Lead
Web To Lead: this is how we have integrated this: https://www.meineneuetelefonanlage.de or https://bpaas.brandsmill.de/kontakt
Each website designer thus has an easy access to save entries with subsequent workflow automation.
The form shown is directly linked to a client and after saving a contact is created, a lead is started and it is checked whether the contact is on XING ... to update details if necessary.
The workflow and the target form you already have in your system or the BPM marketplace.
This is the HTML for it
This is the HTML for it
This is the HTML for it
document.getElementById('save').onclick = function() {
saveForm();
Then you take over the input fields and these are assigned to the form fields in the Brand's Mill form:
var formFields = "{\"F51\":\"";
formFields += document.getElementById('name').value
+ "\"},";
The value collected in the formFields field returns a JSON value that Brand's Mill receives, checks, saves to start a workflow.
The receipt is handed over to a client. These are the lines
var clientID = "????????";
var formID = "?????????";
with the client number [n] and the form ID.
<!doctype html>
<html>
<head>
<meta
http-equiv="content-type"
content="text/html; charset=UTF-8" />
<title>brand's mill inquiry</title>
</head>
<style type="text/css">
.form-style-9 {
max-width: 450px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #305A72;
}
.form-style-9 ul {
padding: 0;
margin: 0;
list-style: none;
}
.form-style-9 ul li {
display: block;
margin-bottom: 10px;
min-height: 35px;
}
.form-style-9 ul li .field-style {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
.form-style-9 ul li .info-style {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 8px;
outline: none;
border: 0px solid #B0CFE0;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
.form-style-9 ul li .field-style:focus {
box-shadow: 0 0 5px #B0CFE0;
border: 1px solid #B0CFE0;
}
.form-style-9 ul li .field-split {
width: 49%;
}
.form-style-9 ul li .field-full {
width: 100%;
}
.form-style-9 ul li input.align-left {
float: left;
}
.form-style-9 ul li input.align-right {
float: right;
}
.form-style-9 ul li textarea {
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"], .form-style-9 ul li input[type="save"]
{
-moz-box-shadow: inset 0px 1px 0px 0px #3985B1;
-webkit-box-shadow: inset 0px 1px 0px 0px #3985B1;
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: inline-block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.form-style-9 ul li input[type="button"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
.required {
background-color: #eff9ff;
}
</style>
<body>
<form class="form-style-9">
<ul>
<li><input
type="text"
id="name"
class="field-style field-full required align-left"
placeholder="Name" /></li>
<li><input
type="email"
id="email"
class="field-style field-split required align-right"
placeholder="Email" /> <input
type="text"
id="phone"
class="field-style field-split required align-left"
placeholder="Telefon" /></li>
<li><input
type="text"
id="firma"
class="field-style field-full align-left"
placeholder="Firma" /></li>
<li><input
type="text"
id="adresse"
class="field-style field-full align-left"
placeholder="Adresse" /></li>
<li><input
type="text"
id="plz"
class="field-style field-split align-left"
placeholder="PLZ" /> <input
type="text"
id="ort"
class="field-style field-split align-right"
placeholder="Ort" /></li>
<li><input
type="text"
id="messagesubject"
class="field-style field-full required align-none"
placeholder="Betrifft" /></li>
<li><textarea
id="message"
class="field-style"
placeholder="Nachricht"></textarea></li>
<li><input
id="save"
type="button"
value="Nachricht senden"
class="info-style field-split align-left" /> <input
id="info"
type="text"
name="info"
value=""
class="info-style field-split align-right"
readonly></li>
</ul>
</form>
<script type="text/javascript">
var sending = false;
function init() {
var callback = function() {
console.log("CRM loaded");
}
gapi.client.load('bmform', 'v1', callback,
'https://brandsmill-service.appspot.com/_ah/api');
document.getElementById('save').onclick = function() {
saveForm();
}
}
function resetColor() {
document.getElementById('name').style.backgroundColor = "#eff9ff";
document.getElementById('phone').style.backgroundColor = "#eff9ff";
document.getElementById('email').style.backgroundColor = "#eff9ff";
document.getElementById('messagesubject').style.backgroundColor = "#eff9ff";
}
function saveForm() {
var line = 0;
try {
var fehlt = false
resetColor();
if (document.getElementById('name').value.trim() == "") {
fehlt = true;
document.getElementById('name').style.backgroundColor = "yellow";
}
if (document.getElementById('phone').value.trim() == "") {
fehlt = true;
document.getElementById('phone').style.backgroundColor = "yellow";
}
if (document.getElementById('email').value.trim() == "") {
fehlt = true;
document.getElementById('email').style.backgroundColor = "yellow";
}
if (document.getElementById('messagesubject').value.trim() == "") {
if (document.getElementById('message').value.trim() == "") {
fehlt = true;
document.getElementById('messagesubject').style.backgroundColor = "yellow";
}
}
if (!fehlt) {
var clientID = "????????";
var formID = "?????????";
var formFields = "{\"F51\":\"";
line = 1;
formFields += document.getElementById('name').value
+ "\"},";
line = 2;
formFields += "{\"F52\":\"";
formFields += document.getElementById('firma').value
+ "\"},";
formFields += "{\"F53\":\"";
line = 3;
formFields += document.getElementById('adresse').value
+ "\"},";
line = 4;
formFields += "{\"F54\":\""
+ document.getElementById('plz').value;
line = 5;
formFields += " " + document.getElementById('ort').value
+ "\"},";
formFields += "{\"F55\":\"";
line = 6;
formFields += document.getElementById('email').value
+ "\"},";
formFields += "{\"F56\":\"";
line = 7;
formFields += document.getElementById('phone').value
+ "\"},";
formFields += "{\"F57\":\"";
line = 8;
formFields += document.getElementById('messagesubject').value
+ " ";
line = 9;
formFields += document.getElementById('message').value
+ "\"},";
line = 10;
formFields += "{\"F203\":\"bpaas Anfrage\"}";
var requestData = {};
requestData.json = "{\"client\":\"" + clientID
+ "\",\"form\":\"" + formID + "\",\"fields\":["
+ formFields + "]}";
if (!sending) {
document.getElementById('info').value = "Nachricht wird zugestellt...";
sending = true;
gapi.client.bmform
.post(requestData)
.execute(
function(resp) {
sending = false;
if (!resp.code) {
document
.getElementById('messagesubject').value = "";
document
.getElementById('message').value = "";
document.getElementById('info').value = "Nachricht ist angekommen.";
} else {
console.log(resp.code + " : "
+ resp.message);
alert("Error : " + resp.code
+ ":" + resp.message);
document.getElementById('info').value = "Fehler bei der Zustellung!";
}
});
}
} else {
document.getElementById('info').value = "Es fehlen Eingaben.";
}
} catch (err) {
console.log(err+ line);
}
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>
</html>
Page updated
Report abuse