Styleguide

Contact Form 

<div class="compact" role="form" aria-label="Contact form">

    <h2 class="h4 mb-2">Kundenbetreuung Deutschland</h2>

    <p class="mb-4">Sie haben hier die Möglichkeit, eine Nachricht an TIMOCOM zu senden. Wenn Sie möchten, können Sie Ihre Telefonnummer hinterlassen - wir rufen Sie dann umgehend zurück (Mo-Do 8:00-18:00 Uhr und Fr 8:00-17:00 Uhr).</p>

    <form name="contactForm" id="ContactForm" class="form-group" action="?formAct=#form" method="post" data-validate="true">
        <h4 class="mb-3">Kontaktformular</h4>
        <fieldset>
            <input type="text" name="username" value="" class="form-control importantField d-none" />
            <input type="hidden" name="id" value="77456073-BBA6-D101-5E196B27D1E852D3" />
            <input type="hidden" name="product" value="tco" />
            <input type="hidden" name="action" value="Internet Mail" />
            <div class="alert alert-danger mb-3 animated bounceIn d-none" id="fillFieldsValid" role="alert">
                <p class="mb-0"><i class="icon-solid-exclamation-triangle mr-1"></i><span>Bitte füllen Sie die markierten Felder korrekt aus.</span></p>
            </div>
            <div class="form-group">
                <input id="contactPerson" type="text" class="form-control form-control-lg border-bottom-0 radius-bl-0 radius-br-0" name="contactPerson" data-mandatory="true" data-ruletype="PersonName" required="" />
                <label class="form-control-placeholder" for="contactPerson">Name,
                    Vorname *</label>
            </div>
            <div class="form-group">
                <input id="contactCompany" type="text" class="form-control form-control-lg border-bottom-0 radius-0" name="company" data-mandatory="true" data-ruletype="CompanyName" required="" />
                <label class="form-control-placeholder" for="contactCompany">Firma *</label>
            </div>
            <div class="form-group">
                <input id="contactTimocomId" type="text" class="form-control form-control-lg border-bottom-0 radius-0" maxlength="6" name="timoComId" data-mandatory="false" data-ruletype="Integer" required="" />
                <label class="form-control-placeholder" for="contactTimocomId">TIMOCOM
                    ID</label>
            </div>
            <div class="form-group">
                <input id="contactPhone" type="text" class="form-control form-control-lg border-bottom-0 radius-0" name="phoneNumber" data-mandatory="true" data-ruletype="Phone" required="" />
                <label class="form-control-placeholder" for="contactPhone">Telefon *</label>
            </div>
            <div class="form-group">
                <input id="eMail" type="text" class="form-control form-control-lg border-bottom-0 radius-0" name="eMail" data-mandatory="true" data-ruletype="Email" required="" />
                <label class="form-control-placeholder" for="eMail">E-Mail *</label>
            </div>
            <div class="form-group">
                <input id="street" type="text" class="form-control form-control-lg border-bottom-0 radius-0" name="street" data-mandatory="false" data-ruletype="String" required="" />
                <label class="form-control-placeholder" for="street">Straße</label>
            </div>
            <div class="form-group">
                <input id="contactZipCode" type="text" class="form-control form-control-lg border-bottom-0 radius-0" name="zipCode" data-mandatory="true" data-ruletype="ZipCode" required="" data-country="#country" />
                <label class="form-control-placeholder" for="contactZipCode">PLZ *</label>
            </div>
            <div class="form-group">
                <input id="contactCity" type="text" class="form-control form-control-lg border-bottom-0 radius-0" name="city" data-mandatory="false" data-ruletype="StartWithLetter" required="" />
                <label class="form-control-placeholder" for="contactCity">Ort</label>
            </div>
            <div class="form-group">

                <select name="country" id="country" class="form-control form-control-lg border-bottom-0 radius-0" aria-label="Country" data-mandatory="true" data-ruletype="Country" data-dependencyattribute="data-country" data-revalidatedependendies="true">

                    <option value="AD">AD... Andorra</option>

                    <option value="AE">AE... Vereinigte Arabische Emirate</option>

                    <option value="AF">AF... Afghanistan</option>

                    <option value="AL">AL... Albanien</option>

                    <option value="AM">AM... Armenien</option>

                    <option value="AT">AT... Österreich</option>

                    <option value="AZ">AZ... Aserbaidschan</option>

                    <option value="BA">BA... Bosnien-Herzegowina</option>

                    <option value="BE">BE... Belgien</option>

                    <option value="BG">BG... Bulgarien</option>

                    <option value="BH">BH... Bahrain</option>

                    <option value="BR">BR... Brasilien</option>

                    <option value="BY">BY... Weißrussland</option>

                    <option value="CH">CH... Schweiz</option>

                    <option value="CN">CN... China</option>

                    <option value="CY">CY... Zypern</option>

                    <option value="CZ">CZ... Tschechien</option>

                    <option value="DE" selected="selected">DE... Deutschland</option>

                    <option value="DK">DK... Dänemark</option>

                    <option value="DZ">DZ... Algerien</option>

                    <option value="EE">EE... Estland</option>

                    <option value="EG">EG... Ägypten</option>

                    <option value="ER">ER... Eritrea</option>

                    <option value="ES">ES... Spanien</option>

                    <option value="ET">ET... Äthiopien</option>

                    <option value="FI">FI... Finnland</option>

                    <option value="FO">FO... Färöer Inseln</option>

                    <option value="FR">FR... Frankreich</option>

                    <option value="GB">GB... Großbritannien</option>

                    <option value="GE">GE... Georgien</option>

                    <option value="GI">GI... Gibraltar</option>

                    <option value="GR">GR... Griechenland</option>

                    <option value="HR">HR... Kroatien</option>

                    <option value="HU">HU... Ungarn</option>

                    <option value="IE">IE... Irland</option>

                    <option value="IL">IL... Israel</option>

                    <option value="IN">IN... Indien</option>

                    <option value="IQ">IQ... Irak</option>

                    <option value="IR">IR... Iran</option>

                    <option value="IS">IS... Island</option>

                    <option value="IT">IT... Italien</option>

                    <option value="JO">JO... Jordanien</option>

                    <option value="KG">KG... Kirgistan</option>

                    <option value="KW">KW... Kuwait</option>

                    <option value="KZ">KZ... Kasachstan</option>

                    <option value="LB">LB... Libanon</option>

                    <option value="LI">LI... Liechtenstein</option>

                    <option value="LT">LT... Litauen</option>

                    <option value="LU">LU... Luxemburg</option>

                    <option value="LV">LV... Lettland</option>

                    <option value="LY">LY... Libyen</option>

                    <option value="MA">MA... Marokko</option>

                    <option value="MC">MC... Monaco</option>

                    <option value="MD">MD... Moldawien</option>

                    <option value="ME">ME... Montenegro</option>

                    <option value="MK">MK... Nordmazedonien</option>

                    <option value="MN">MN... Mongolei</option>

                    <option value="MT">MT... Malta</option>

                    <option value="NL">NL... Niederlande</option>

                    <option value="NO">NO... Norwegen</option>

                    <option value="NP">NP... Nepal</option>

                    <option value="OM">OM... Oman</option>

                    <option value="PK">PK... Pakistan</option>

                    <option value="PL">PL... Polen</option>

                    <option value="PT">PT... Portugal</option>

                    <option value="QA">QA... Katar</option>

                    <option value="RO">RO... Rumänien</option>

                    <option value="RS">RS... Serbien</option>

                    <option value="RU">RU... Russland</option>

                    <option value="SA">SA... Saudi-Arabien</option>

                    <option value="SE">SE... Schweden</option>

                    <option value="SI">SI... Slowenien</option>

                    <option value="SK">SK... Slowakei</option>

                    <option value="SM">SM... San Marino</option>

                    <option value="SY">SY... Syrien</option>

                    <option value="TJ">TJ... Tadschikistan</option>

                    <option value="TM">TM... Turkmenistan</option>

                    <option value="TN">TN... Tunesien</option>

                    <option value="TR">TR... Türkei</option>

                    <option value="UA">UA... Ukraine</option>

                    <option value="UZ">UZ... Usbekistan</option>

                    <option value="VA">VA... Vatikan</option>

                    <option value="YE">YE... Jemen</option>

                </select>

            </div>
            <div class="form-group">
                <textarea id="contactMessage" class="form-control form-control-lg border-bottom-0 radius-tl-0 radius-tr-0" name="message" cols="50" rows="5" style="margin:" data-mandatory="true" data-ruletype="String" required="" wrap="physical"></textarea>

                <label class="form-control-placeholder" for="contactMessage">
                    Nachricht *
                </label>
            </div>

            <div class="frc-captcha bg-transparent w-100 d-flex justify-content-center pt-3" data-sitekey="FCMT00JSKVE85ECK" data-lang="de" data-puzzle-endpoint="https://eu-api.friendlycaptcha.eu/api/v1/puzzle" data-solution-field-name="fCaptchaSolution" data-attached="1">
                <div class="frc-container">
                    <svg class="frc-icon" role="img" xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 24 24">
                        <path d="M17,11c0.34,0,0.67,0.04,1,0.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82c0.55-0.13,1.08-0.32,1.6-0.55 C11.41,19.47,11,18.28,11,17C11,13.69,13.69,11,17,11z"></path>
                        <path d="M17,13c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4C21,14.79,19.21,13,17,13z M17,14.38"></path>
                    </svg>
                    <div class="frc-content">
                        <span class="frc-text">Anti-Roboter-Verifizierung</span>
                        <button type="button" class="frc-button">Hier klicken</button>

                    </div>
                </div><span class="frc-banner"><a href="https://friendlycaptcha.com/" rel="noopener" target="_blank"><b>Friendly</b>Captcha ⇗</a></span>
                <input name="fCaptchaSolution" class="frc-captcha-solution" type="hidden" value=".UNSTARTED" />
            </div>

            <button type="submit" class="btn btn-lg btn-block btn-primary mt-4" name="formContactTC" value="Formular senden">Formular senden</button>
        </fieldset>
    </form>
</div>
 
<div class="compact" role="form" aria-label="Contact form">

  {{render "@section-intro" intro}}

  <form
    name="contactForm"
    id="ContactForm"
    class="form-group"
    action="?formAct=#form"
    method="post"
    data-validate="true"
  >
    <h4 class="mb-3">Kontaktformular</h4>
    <fieldset>
      <input
        type="text"
        name="username"
        value=""
        class="form-control importantField d-none"
      />
      <input
        type="hidden"
        name="id"
        value="77456073-BBA6-D101-5E196B27D1E852D3"
      />
      <input type="hidden" name="product" value="tco" />
      <input type="hidden" name="action" value="Internet Mail" />
      <div
        class="alert alert-danger mb-3 animated bounceIn d-none"
        id="fillFieldsValid"
        role="alert"
      >
        <p class="mb-0"><i
            class="icon-solid-exclamation-triangle mr-1"
          ></i><span>Bitte füllen Sie die markierten Felder korrekt aus.</span></p>
      </div>
      <div class="form-group">
        <input
          id="contactPerson"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-bl-0 radius-br-0"
          name="contactPerson"
          data-mandatory="true"
          data-ruletype="PersonName"
          required=""
        />
        <label class="form-control-placeholder" for="contactPerson">Name,
          Vorname *</label>
      </div>
      <div class="form-group">
        <input
          id="contactCompany"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          name="company"
          data-mandatory="true"
          data-ruletype="CompanyName"
          required=""
        />
        <label class="form-control-placeholder" for="contactCompany">Firma *</label>
      </div>
      <div class="form-group">
        <input
          id="contactTimocomId"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          maxlength="6"
          name="timoComId"
          data-mandatory="false"
          data-ruletype="Integer"
          required=""
        />
        <label class="form-control-placeholder" for="contactTimocomId">TIMOCOM
          ID</label>
      </div>
      <div class="form-group">
        <input
          id="contactPhone"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          name="phoneNumber"
          data-mandatory="true"
          data-ruletype="Phone"
          required=""
        />
        <label class="form-control-placeholder" for="contactPhone">Telefon *</label>
      </div>
      <div class="form-group">
        <input
          id="eMail"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          name="eMail"
          data-mandatory="true"
          data-ruletype="Email"
          required=""
        />
        <label class="form-control-placeholder" for="eMail">E-Mail *</label>
      </div>
      <div class="form-group">
        <input
          id="street"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          name="street"
          data-mandatory="false"
          data-ruletype="String"
          required=""
        />
        <label class="form-control-placeholder" for="street">Straße</label>
      </div>
      <div class="form-group">
        <input
          id="contactZipCode"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          name="zipCode"
          data-mandatory="true"
          data-ruletype="ZipCode"
          required=""
          data-country="#country"
        />
        <label class="form-control-placeholder" for="contactZipCode">PLZ *</label>
      </div>
      <div class="form-group">
        <input
          id="contactCity"
          type="text"
          class="form-control form-control-lg border-bottom-0 radius-0"
          name="city"
          data-mandatory="false"
          data-ruletype="StartWithLetter"
          required=""
        />
        <label class="form-control-placeholder" for="contactCity">Ort</label>
      </div>
      <div class="form-group">

        <select
          name="country"
          id="country"
          class="form-control form-control-lg border-bottom-0 radius-0"
          aria-label="Country"
          data-mandatory="true"
          data-ruletype="Country"
          data-dependencyattribute="data-country"
          data-revalidatedependendies="true"
        >

          <option value="AD">AD... Andorra</option>

          <option value="AE">AE... Vereinigte Arabische Emirate</option>

          <option value="AF">AF... Afghanistan</option>

          <option value="AL">AL... Albanien</option>

          <option value="AM">AM... Armenien</option>

          <option value="AT">AT... Österreich</option>

          <option value="AZ">AZ... Aserbaidschan</option>

          <option value="BA">BA... Bosnien-Herzegowina</option>

          <option value="BE">BE... Belgien</option>

          <option value="BG">BG... Bulgarien</option>

          <option value="BH">BH... Bahrain</option>

          <option value="BR">BR... Brasilien</option>

          <option value="BY">BY... Weißrussland</option>

          <option value="CH">CH... Schweiz</option>

          <option value="CN">CN... China</option>

          <option value="CY">CY... Zypern</option>

          <option value="CZ">CZ... Tschechien</option>

          <option value="DE" selected="selected">DE... Deutschland</option>

          <option value="DK">DK... Dänemark</option>

          <option value="DZ">DZ... Algerien</option>

          <option value="EE">EE... Estland</option>

          <option value="EG">EG... Ägypten</option>

          <option value="ER">ER... Eritrea</option>

          <option value="ES">ES... Spanien</option>

          <option value="ET">ET... Äthiopien</option>

          <option value="FI">FI... Finnland</option>

          <option value="FO">FO... Färöer Inseln</option>

          <option value="FR">FR... Frankreich</option>

          <option value="GB">GB... Großbritannien</option>

          <option value="GE">GE... Georgien</option>

          <option value="GI">GI... Gibraltar</option>

          <option value="GR">GR... Griechenland</option>

          <option value="HR">HR... Kroatien</option>

          <option value="HU">HU... Ungarn</option>

          <option value="IE">IE... Irland</option>

          <option value="IL">IL... Israel</option>

          <option value="IN">IN... Indien</option>

          <option value="IQ">IQ... Irak</option>

          <option value="IR">IR... Iran</option>

          <option value="IS">IS... Island</option>

          <option value="IT">IT... Italien</option>

          <option value="JO">JO... Jordanien</option>

          <option value="KG">KG... Kirgistan</option>

          <option value="KW">KW... Kuwait</option>

          <option value="KZ">KZ... Kasachstan</option>

          <option value="LB">LB... Libanon</option>

          <option value="LI">LI... Liechtenstein</option>

          <option value="LT">LT... Litauen</option>

          <option value="LU">LU... Luxemburg</option>

          <option value="LV">LV... Lettland</option>

          <option value="LY">LY... Libyen</option>

          <option value="MA">MA... Marokko</option>

          <option value="MC">MC... Monaco</option>

          <option value="MD">MD... Moldawien</option>

          <option value="ME">ME... Montenegro</option>

          <option value="MK">MK... Nordmazedonien</option>

          <option value="MN">MN... Mongolei</option>

          <option value="MT">MT... Malta</option>

          <option value="NL">NL... Niederlande</option>

          <option value="NO">NO... Norwegen</option>

          <option value="NP">NP... Nepal</option>

          <option value="OM">OM... Oman</option>

          <option value="PK">PK... Pakistan</option>

          <option value="PL">PL... Polen</option>

          <option value="PT">PT... Portugal</option>

          <option value="QA">QA... Katar</option>

          <option value="RO">RO... Rumänien</option>

          <option value="RS">RS... Serbien</option>

          <option value="RU">RU... Russland</option>

          <option value="SA">SA... Saudi-Arabien</option>

          <option value="SE">SE... Schweden</option>

          <option value="SI">SI... Slowenien</option>

          <option value="SK">SK... Slowakei</option>

          <option value="SM">SM... San Marino</option>

          <option value="SY">SY... Syrien</option>

          <option value="TJ">TJ... Tadschikistan</option>

          <option value="TM">TM... Turkmenistan</option>

          <option value="TN">TN... Tunesien</option>

          <option value="TR">TR... Türkei</option>

          <option value="UA">UA... Ukraine</option>

          <option value="UZ">UZ... Usbekistan</option>

          <option value="VA">VA... Vatikan</option>

          <option value="YE">YE... Jemen</option>

        </select>

      </div>
      <div class="form-group">
        <textarea
          id="contactMessage"
          class="form-control form-control-lg border-bottom-0 radius-tl-0 radius-tr-0"
          name="message"
          cols="50"
          rows="5"
          style="margin:"
          data-mandatory="true"
          data-ruletype="String"
          required=""
          wrap="physical"
        ></textarea>

        <label class="form-control-placeholder" for="contactMessage">
          Nachricht *
        </label>
      </div>

      <div
        class="frc-captcha bg-transparent w-100 d-flex justify-content-center pt-3"
        data-sitekey="FCMT00JSKVE85ECK"
        data-lang="de"
        data-puzzle-endpoint="https://eu-api.friendlycaptcha.eu/api/v1/puzzle"
        data-solution-field-name="fCaptchaSolution"
        data-attached="1"
      ><div class="frc-container">
          <svg
            class="frc-icon"
            role="img"
            xmlns="http://www.w3.org/2000/svg"
            height="32"
            width="32"
            viewBox="0 0 24 24"
          ><path
              d="M17,11c0.34,0,0.67,0.04,1,0.09V6.27L10.5,3L3,6.27v4.91c0,4.54,3.2,8.79,7.5,9.82c0.55-0.13,1.08-0.32,1.6-0.55 C11.41,19.47,11,18.28,11,17C11,13.69,13.69,11,17,11z"
            ></path><path
              d="M17,13c-2.21,0-4,1.79-4,4c0,2.21,1.79,4,4,4s4-1.79,4-4C21,14.79,19.21,13,17,13z M17,14.38"
            ></path></svg>
          <div class="frc-content">
            <span class="frc-text">Anti-Roboter-Verifizierung</span>
            <button type="button" class="frc-button">Hier klicken</button>

          </div>
        </div><span class="frc-banner"><a
            href="https://friendlycaptcha.com/"
            rel="noopener"
            target="_blank"
          ><b>Friendly</b>Captcha ⇗</a></span>
        <input
          name="fCaptchaSolution"
          class="frc-captcha-solution"
          type="hidden"
          value=".UNSTARTED"
        /></div>

      <button
        type="submit"
        class="btn btn-lg btn-block btn-primary mt-4"
        name="formContactTC"
        value="Formular senden"
      >Formular senden</button>
    </fieldset>
  </form>
</div>
 
{
  "intro": {
    "headline": {
      "class": "h4 mb-2",
      "text": "Kundenbetreuung Deutschland"
    },
    "paragraphs": [
      {
        "class": "mb-4",
        "text": "Sie haben hier die Möglichkeit, eine Nachricht an TIMOCOM zu senden. Wenn Sie möchten, können Sie Ihre Telefonnummer hinterlassen - wir rufen Sie dann umgehend zurück (Mo-Do 8:00-18:00 Uhr und Fr 8:00-17:00 Uhr)."
      }
    ]
  }
}

No notes defined.