contact_form.html

{% load wagtailcore_tags wagtailimages_tags static %}
<style>
    .contact-form input, select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid rgb(200, 200, 200);
      box-sizing: border-box;
      margin-bottom: 16px;
      resize: vertical;
      border-radius: 5px;
      transition: 300ms;
      font-size: 0.9rem;
      font-family: 'Roboto';
    }
    .contact-form input:hover{
      border-color:black;
    }
    .contact-form select:hover{
      border-color:black;
    }
    .contact-form textarea:hover{
      border-color:black;
    }

    @media (prefers-color-scheme: dark) {
        .contact-form input, select, textarea {
          background-color: var(--body-bg);
          color: var(--body-color)
          border: 1px solid rgb(200, 200, 200);
        }
        .contact-form input:hover{
          border-color: white;
        }
        .contact-form select:hover{
          border-color: white;
        }
        .contact-form textarea:hover{
          border-color: white;
        }
    }
  </style>
  <style>
      @media screen and (max-width: 767px) {
        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="tel"],
        input[type="password"],
        textarea {
          font-size: 1em;
        }
      }

      p.body {
        color:var(--color-muted);
      }

      form.contact-form label{
        color:var(--color-muted)
      }

       @media (prefers-color-scheme: dark) {

            p.body {
              color:var(--body-color)
            }

          form.contact-form label{
            color:var(--link-color)
          }

       }
    </style>
  <div class="container" id="contact-section">
      <h2>Let's chat</h2>

      <p class="body" style=" max-width: 65ch;">Do you like what you see, and want to talk more? </p>

      <form class="contact-form" id="contact-form" action="{% url 'contact' %}" method="POST">
        {% csrf_token %}

        <hr style="opacity: 0.0875;
                border: 0;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 1px;
                background-color: currentColor;
                max-width: none;">
        <div class="row-list" style="margin: .9rem 0; font-family: 'lato';">
          <div class="col1" style="">
              <label for="contact-name" >Name</label>

          </div>

          <div class="col2 large" style="">
            <input type="text" name="name" id="contact-name" placeholder="Name">
          </div>
        </div>

        <div class="row-list" style="margin: .9rem 0; font-family: 'lato';">
          <div class="col1" style="">
            <label for="contact-email" style="">Email</label>

          </div>

          <div class="col2 large" style="">
            <input type="email" id="contact-email" required name="email" placeholder="Email">
          </div>
        </div>
        <div class="row-list" style="margin: .9rem 0; font-family: 'lato';">
          <div class="col1" style="">
            <label for="contact-message" >Message</label>

          </div>

          <div class="col2 large" style="">
            <textarea required
             type="text" name="message" id="contact-message" placeholder="Message"></textarea>
          </div>
        </div>





        <script>
          function onSubmit() {
            document.getElementById('contact-form').submit();
          }
        </script>
        <button href="#contact-form"
                data-sitekey="6Le0-T8hAAAAAGM7KeQHTtquC1lPIPzigWtv5yhL"
                data-callback='onSubmit'
                data-action='submit'
                style="border: none;background: none;padding: inherit;cursor: pointer;font: inherit; color: var(--body-color);"
                class="link g-recaptcha" type="submit">Send<img class="smart-invert" style="margin-left: 0.5ch;" src="{% static 'icons/arrow.png' %}" width="9"></button>


      </form>

      <script src="https://www.google.com/recaptcha/api.js?render=6Le0-T8hAAAAAMW00j_qGs86mHRIale_sY4b6P6K"></script>
        <style>
        .grecaptcha-badge{
            display:none;
        }
        </style>
  </div>