<html><head></head><body><div data-t-name="FreeHtmlEmbed"><div style="text-align: center">blue Cinema Chur</div></div><div class="m-sectionhead m-sectionhead--centered">
  <div class="row justify-content-center">
    <div class="col-12 col-xl-10">
      <h3 class="m-sectionhead__title">Teilnehmen &amp; gewinnen</h3>
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-12 col-md-8 col-xl-6">
      <p class="m-sectionhead__text">Achtung, die erfassten Einträge laufen bereits bereits in unsere Datenbank</p>
    </div>
  </div>
</div><div data-t-name="FreeHtmlEmbed"><div>
    <title>Form Validation Example</title>
    <style>
        /* Add CSS for mobile view */
        @media screen and (max-width: 600px) {
            .container {
                max-width: 100%;
                padding: 10px;
            }
        }

        /* Add CSS for desktop view */
        @media screen and (min-width: 601px) {
            .container {
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
            }
        }

        .input-field {
            box-sizing: border-box;
            font-family: 'TheSans', sans-serif;
            font-size: 16px;
            height: 48px;
            padding-left: 14px;
            margin-bottom: 14px;
            border: 1px solid #C4C4C4;
            width: 100%;
            border-radius: 4px;
        }

        .input-field-plus-description {
            box-sizing: border-box;
            font-family: 'TheSans', sans-serif;
            font-size: 16px;
            height: 48px;
            padding-left: 14px;
            margin-bottom: 1px;
            border: 1px solid #C4C4C4;
            width: 100%;
            border-radius: 4px;
        }

        .input-field-hidden {
            display: none;
        }

        .hint-text {
            font-size: 14px;
            color: grey;
            margin-bottom: 40px;

        }

        .legal-link {
            font-size: 16px;
            color: #11AAFF;
            margin-bottom: 20px;

        }

        .checkbox-label {
            font-size: 16px;
            margin-bottom: 20px;

        }

        .g-recaptcha {
            margin-top: 10px;
        }

        /* Add more CSS styles as needed */
    </style>

    <div class="container">
        <form action="https://test.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
            <input type="hidden" name="captcha_settings" value="{&quot;keyname&quot;:&quot;CinemaRecapcha&quot;,&quot;fallback&quot;:&quot;true&quot;,&quot;orgId&quot;:&quot;00D1r000000fZMA&quot;,&quot;ts&quot;:&quot;&quot;}">
            <input type="hidden" name="oid" value="00D1r000000fZMA">
            <input type="hidden" name="retURL" value="https://www.blueplus.ch/de/danke-fuer-deine-teilnahme">
            <input type="hidden" name="Campaign_ID" value="70169000000jyXCAAY">
            <input type="hidden" name="member_status" value="sent">

            <label for="first_name">Vorname</label>
            <input required="" class="input-field" id="first_name" maxlength="40" name="first_name" size="20" type="text">

            <label for="last_name">Name</label>
            <input required="" class="input-field" id="last_name" maxlength="80" name="last_name" size="20" type="text">

            <label for="email">E-Mail</label>
            <input required="" class="input-field" id="email" maxlength="80" name="email" size="20" type="email">

            <label for="mobile">Telefonnummer</label>
            <input required="" class="input-field-plus-description" id="mobile" maxlength="40" name="mobile" size="20" type="tel" pattern="[0-9]{10}">
            <div class="hint-text">Beispielsweise 079 123 45 67</div>

            <select class="input-field-hidden" id="lead_source" name="lead_source" value="blueCinema"></select>

            <input type="hidden" id="00N6900000LVtax" maxlength="255" name="00N6900000LVtax" value="Chur">

            <div class="g-recaptcha" data-sitekey="6Lf4sconAAAAAGcCKwm1x7BRucKkrqYTe7E0r-uN"></div><br>

            <div class="legal-link">
                 <a href="https://www.blueplus.ch/de/einlaufkind-teilnahmebedingungen" target="_blank">Teilnahmebedingungen</a><br>
            </div>


            <input class="a-button" type="submit" name="submit">
        </form>

        <script src="https://www.google.com/recaptcha/api.js"></script>
        <script>
            function timestamp() {
                var response = document.getElementById("g-recaptcha-response");
                if (response == null || response.value.trim() == "") {
                    var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);
                    elems["ts"] = JSON.stringify(new Date().getTime());
                    document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems);
                }
            }
            setInterval(timestamp, 500);

            document.getElementById('email').addEventListener('input', function() {
                const emailInput = document.getElementById('email');
                const emailValue = emailInput.value;
                const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

                if (!emailPattern.test(emailValue)) {
                    emailInput.setCustomValidity('Please enter a valid email address with a top-level domain (e.g., example@example.com).');
                } else {
                    emailInput.setCustomValidity('');
                }
            });
        </script>
    </div>
</div></div></body></html>