Input

Default type text

  • Odesláním souhlasím s podmínkami o zpracování osobních údajů. 

  •         {% include "@Components/forms/contact-form/contact-form.twig" with { props: {
  terms_src:"https://www.google.com/",
    inputs: [
    {
      label: "Jméno",
      required: true,
      validators: [
      {
        condition: "required",
        msg: "Jméno is required",
      }
      ]
    },
    {
      label: "Příjmení",
      required: true,
      validators: [
      {
        condition: "required",
        msg: "Příjmení is required",
      }
      ]
    },
    {
      label: "Email type",
      required: true,
      type: "email",
      validators: [
      {
        condition: "required",
        msg: "Email is required",
      },
      {
      condition: "email",
      msg: "Nevalidní email"
      }
      ]
    },
    {
      label: "Phone type",
      required: true,
      type: "tel",
      validators: [
      {
        condition: "required",
        msg: "Phone is required",
      }
      ]
    }
    ],
    textarea: {
      label: "Textarea"
    }
} } %}

      
  •           <form action="" class="f-contact" data-validate="jquery">

  <div class="f-contact__wrapper">

          <div class="f-wrap">
      <input class="f-base base-text" type="text" data-validators='[{"condition":"required","msg":"Jméno is required"}]'>
          <label class="f-label   --required">
  <span class="f-label__title">Jméno</span>
</label>
    
      </div>
          <div class="f-wrap">
      <input class="f-base base-text" type="text" data-validators='[{"condition":"required","msg":"Příjmení is required"}]'>
          <label class="f-label   --required">
  <span class="f-label__title">Příjmení</span>
</label>
    
      </div>
          <div class="f-wrap">
      <input class="f-base base-text" type="email" data-validators='[{"condition":"required","msg":"Email is required"},{"condition":"email","msg":"Nevalidní email"}]'>
          <label class="f-label   --required">
  <span class="f-label__title">Email type</span>
</label>
    
      </div>
          <div class="f-wrap">
      <input class="f-base base-text" type="tel" data-validators='[{"condition":"required","msg":"Phone is required"}]'>
          <label class="f-label   --required">
  <span class="f-label__title">Phone type</span>
</label>
    
      </div>
      </div>
      <div class="f-wrap">
            <label class="f-label">
  <span class="f-label__title">Textarea</span>
</label>
    
    <textarea class="f-base textarea"></textarea>
  </div>
    <div class="f-contact__bottom">

    <p class="f-contact__perex">
      Odesláním souhlasím s
      <a href="https://www.google.com/">podmínkami</a>
      o zpracování osobních údajů.
    </p>

    <div class="f-contact__btn-wrapper">
      <button class="btn --primary" type="submit">    <span class="btn__title">Odeslat</span>
  
  </button>
    </div>

  </div>

</form>

Schema