Embedded Files
Web to Lead
Web to Lead
Web To Lead: so haben wir das eingebunden siehe: https://www.meineneuetelefonanlage.de oder https://bpaas.brandsmill.de/kontakt
Jeder Website Gestalter hat damit einen einfachen Zugang zum Speichern von Eingaben mit anschließender Workflow Automatisierung.
Das gezeigt Formular ist direkt an einen Mandanten gebunden und nach dem Speichern wird ein Kontakt angelegt, ein Lead wird gestartet und es wird geprüft ob der Kontakt auf XING ist... um ggf. Details zu aktualisieren.
Den Workflow dazu und das Zielformular habt ihr bereits in Eurem System oder über den BPM Marktplatz.
Dies ist das HTML dazu
Dies ist das HTML dazu
Das was fett unterlegt ist muss man anpassen. Das HTML gestaltet man wie gewünscht. Man benötigt einen Button auf dem man das Speichern per Click aktiviert siehe:
document.getElementById('save').onclick = function() {
saveForm();
Danach übernimmt man die Input Felder und diese werden den Formularfeldern im Brand's Mill Formular zugeordnet:
var formFields = "{\"F51\":\"";
formFields += document.getElementById('name').value
+ "\"},";
Das im Feld formFields gesammelte ergibt einen JSON Wert den Brand's Mill empfängt, prüft, speichert um einen Workflow zu starten.
Der Empfang wird an einen Mandanten übergeben. Dazu sind die Zeilen
var clientID = "????????";
var formID = "?????????";
mit der Mandant Nr. [n] und der Form ID zu belegen.
<!doctype html>
<html>
<head>
<meta
http-equiv="content-type"
content="text/html; charset=UTF-8" />
<title>brand's mill Anfrage</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