Embed

<div id='crmWebToEntityForm' class='crmWebToEntityForm' style='background-color: #0F0F0F; color: white; max-width: 100%; padding: 25px; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; flex-wrap: wrap;'>
	
    <div class="centered-content" style='flex: 1; padding-right: 20px; margin-bottom: 20px; text-align: center;'>
        <h2 style='color: white; font-size: 32px; margin-bottom: 25px;'>Kontaktieren Sie uns</h2>
        <p style='font-size: 18px; line-height: 1.7;'>
            Haben Sie Fragen zu unseren Dienstleistungen oder möchten Sie mehr über uns erfahren? Zögern Sie nicht, das untenstehende Formular auszufüllen.
        </p>
		
		<p style='font-size: 18px; line-height: 1.7;'>
           Unser Team wird sich so schnell wie möglich bei Ihnen melden.
        </p>
    </div>
	
   
<div class="form-container" style='flex: 1; background-color: #0F0F0F; padding: 25px; border-radius: 10px;'>
    <form action='https://crm.zoho.eu/crm/WebToLeadForm' name='WebToLeads238239000002437002' method='POST' ... >
	
            
            <input type='text' style='display:none;' name='xnQsjsdp' value='551f029fb7fd60fe700911b0798d946959d276e518e7b4d99a3f75ec901b8f6b'></input> 
            <input type='hidden' name='zc_gad' id='zc_gad' value=''></input>
            <input type='text' style='display:none;' name='xmIwtLD' value='7f0da5cc33acc9172dfd6772a68334258c2b86c61a9c5081dd9772b99ddd3733'></input> 
            <input type='text'  style='display:none;' name='actionType' value='TGVhZHM='></input>
			<input type='text' style='display:none;' name='returnURL' value='https://www.maxQ.solutions'> </input>
            <input type='text' style='display:none;' id='ldeskuid' name='ldeskuid'></input>
            <input type='text' style='display:none;' id='LDTuvid' name='LDTuvid'></input>
            <input type="hidden" name="Lead_Status" value="New"></input>
			<input type="hidden" name="Lead_Source" value="Webformular"></input>


        <label for="Company" style='color: #FFFFFF;'>Unternehmen:</label>
        <input type="text" id="Company" name="Company" style="width: 100%;"> 

        <div class="input-row">
            <div>
                <label for="First Name" style='color: #FFFFFF;'>Vorname:</label>
                <input type="text" id="First Name" name="First Name">
            </div>
            <div>
                <label for="Last Name" style='color: #FFFFFF;'>Nachname:</label>
                <input type="text" id="Last Name" name="Last Name">
            </div>
        </div>

        <div class="input-row">
            <div>
                <label for="Email" style='color: #FFFFFF;'>E-Mail:</label>
                <input type="email" id="Email" name="Email">
            </div>
            <div>
                <label for="Phone" style='color: #FFFFFF;'>Telefon:</label>
                <input type="tel" id="Phone" name="Phone">
            </div>
        </div>
		<label for="Description" style='color: #FFFFFF;'>Nachricht:</label>
<textarea id="Description" name="Description" style="width: 100%; height: 150px;"></textarea>
        <div style="margin-top: 20px;">
            <input type="submit" value="Absenden" ... >
        </div>
    </form>
</div>
        



<style>
    /* ... Ihr CSS-Code ... */
/* Allgemeine Stile */
#crmWebToEntityForm, .crmWebToEntityForm {
    box-sizing: border-box; /* Dies stellt sicher, dass die Polsterung und der Rand in die Gesamtbreite des Elements einbezogen werden */
}
/* Stil für den Formular-Container */
.form-container {
    margin: 0 auto; 
    width: 100%; 
    max-width: 800px; /* Erhöhte maximale Breite */
}
   .input-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .input-row > div {
        width: 48%; /* Etwas weniger als 50%, um Platz für den Abstand zwischen den Feldern zu lassen */
    }

    /* Reduzierter Abstand zwischen Überschrift und Eingabefeld */
    .crmWebToEntityForm label {
        margin-bottom: 5px;
    }
.crmWebToEntityForm input[type="text"],
.crmWebToEntityForm input[type="email"],
.crmWebToEntityForm input[type="tel"],
.crmWebToEntityForm textarea {
    color: #000000; /* Schwarz */
}

/* Stil für alle Eingabefelder, Labels und das select-Element */
.crmWebToEntityForm label,
.crmWebToEntityForm input[type="text"],
.crmWebToEntityForm input[type="email"],
.crmWebToEntityForm input[type="tel"],
.crmWebToEntityForm select {
    display: block; /* Stellt sicher, dass jedes Element seine eigene Zeile einnimmt */
    width: 100%; /* Setzt die Breite auf die volle verfügbare Breite */
    padding: 8px; /* Leichte Reduzierung der Polsterung für bessere Lesbarkeit und Optik */
    box-sizing: border-box; /* Stellt sicher, dass die Polsterung und der Rand in die Gesamtbreite des Elements einbezogen werden */
    margin-bottom: 8px; /* Reduzierter Abstand zwischen den Eingabefeldern und Labels */
    border: 1px solid #ccc; /* Einheitlicher Rand für alle Eingabefelder */
    border-radius: 4px; /* Abgerundete Ecken für ein weicheres Aussehen */
}
.crmWebToEntityForm label {
    border: none; /* Entfernt den Rahmen */
    background-color: transparent; /* Stellt sicher, dass der Hintergrund transparent ist */
}


/* Stil für den Absenden-Button */
.crmWebToEntityForm input[type="submit"] {
    background-color: #FFFFFF; /* Hintergrundfarbe */
    color: #0F0F0F; /* Textfarbe */
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s; /* sanfter Übergang bei Farbänderung */
}

.crmWebToEntityForm input[type="submit"]:hover {
    background-color: #e6e6e6; /* leicht grauer Hintergrund beim Überfahren mit der Maus */
}

#crmWebToEntityForm {
    flex-direction: column; /* Ändert die Anordnung so, dass die Elemente untereinander angezeigt werden */
    padding: 20px; /* Einheitliche Polsterung */
}

.centered-content {
    padding-right: 0; /* Entfernen Sie das rechte Polster */
    margin-bottom: 20px; /* Abstand zum Formular */
}

.form-container {
    margin: 0 auto; /* Zentriert den Container */
    width: 100%; /* Setzt die Breite auf die volle verfügbare Breite */
    max-width: 650px; /* Begrenzt die maximale Breite des Containers */
}

</style>


<script>
    function validateEmail238239000002437002() {
        var form = document.forms['WebToLeads238239000002437002'];
        var emailFld = form.querySelectorAll('[ftype=email]');
        var i;
        for (i = 0; i < emailFld.length; i++) {
            var emailVal = emailFld[i].value;
            if ((emailVal.replace(/^\s+|\s+$/g, '')).length != 0) {
                var atpos = emailVal.indexOf('@');
                var dotpos = emailVal.lastIndexOf('.');
                if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal.length) {
                    alert('Please enter a valid email address. ');
                    emailFld[i].focus();
                    return false;
                }
            }
        }
        return true;
    }

    function checkMandatory238239000002437002() {
    var mndFileds = new Array('Company', 'Last Name', 'Email', 'Phone');
    var fldLangVal = new Array('Unternehmen', 'Name', 'Email', 'Telefon');
    for (i = 0; i < mndFileds.length; i++) {
        var fieldObj = document.forms['WebToLeads238239000002437002'][mndFileds[i]];
        if (fieldObj) {
            if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length == 0) {
                if (fieldObj.type == 'file') {
                    alert('Please select a file to upload.');
                    fieldObj.focus();
                    return false;
                }
                alert(fldLangVal[i] + ' cannot be empty.');
                fieldObj.focus();
                return false;
            } else if (fieldObj.nodeName == 'SELECT') {
                if (fieldObj.options[fieldObj.selectedIndex].value == '-None-') {
                    alert(fldLangVal[i] + ' cannot be none.');
                    fieldObj.focus();
                    return false;
                }
            } else if (fieldObj.type == 'checkbox') {
                if (fieldObj.checked == false) {
                    alert('Please accept  ' + fldLangVal[i]);
                    fieldObj.focus();
                    return false;
                }
            }
            try {
                if (fieldObj.name == 'Last Name') {
                    name = fieldObj.value;
                }
            } catch (e) {}
        }
    }
    trackVisitor();
    if(!validateEmail238239000002437002()){return false;}
    alert('Vielen Dank für Ihre Anfrage! Wir werden uns in Kürze bei Ihnen melden.');
    window.location.href = 'IHRE_HOME_URL'; // Ersetzen Sie IHRE_HOME_URL durch die tatsächliche URL Ihrer Homepage
    document.querySelector('.crmWebToEntityForm .formsubmit').setAttribute('disabled', true);
}


    function trackVisitor() {
        try {
            if ($zoho) {
                var LDTuvidObj = document.forms['WebToLeads238239000002437002']['LDTuvid'];
                if (LDTuvidObj) {
                    LDTuvidObj.value = $zoho.salesiq.visitor.uniqueid();
                }
                var firstnameObj = document.forms['WebToLeads238239000002437002']['First Name'];
                if (firstnameObj) {
                    name = firstnameObj.value + ' ' + name;
                }
                $zoho.salesiq.visitor.name(name);
                var emailObj = document.forms['WebToLeads238239000002437002']['Email'];
                if (emailObj) {
                    email = emailObj.value;
                    $zoho.salesiq.visitor.email(email);
                }
            }
        } catch (e) {}
    }
</script>
<script type='text/javascript' id='VisitorTracking'>
    var $zoho = $zoho || {};
    $zoho.salesiq = $zoho.salesiq || {
        widgetcode: 'siqc539d71ef57dcea1bbdfe06b3fbd0f4e4117d7b1a25e58ad76a441139b3113a1',
        values: {},
        ready: function() {}
    };
    var d = document;
    s = d.createElement('script');
    s.type = 'text/javascript';
    s.id = 'zsiqscript';
    s.defer = true;
    s.src = 'https://salesiq.zoho.eu/widget';
    t = d.getElementsByTagName('script')[0];
    t.parentNode.insertBefore(s, t);
</script>