Contact form for Bootstrap sites

01<form class="needs-validation" novalidate
02      action="https://splitforms.com/api/submit" method="POST">
03  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
04 
05  <div class="mb-3">
06    <label class="form-label">Name</label>
07    <input name="name" type="text" class="form-control" required />
08    <div class="invalid-feedback">Please enter your name.</div>
09  </div>
10 
11  <div class="mb-3">
12    <label class="form-label">Email</label>
13    <input name="email" type="email" class="form-control" required />
14    <div class="invalid-feedback">Valid email required.</div>
15  </div>
16 
17  <div class="mb-3">
18    <label class="form-label">Message</label>
19    <textarea name="message" class="form-control" rows="4" required></textarea>
20    <div class="invalid-feedback">Please add a message.</div>
21  </div>
22 
23  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
24 
25  <button type="submit" class="btn btn-primary">Send message</button>
26</form>
27 
28<script>
29  (() => {
30    const forms = document.querySelectorAll('.needs-validation');
31    Array.from(forms).forEach(form => {
32      form.addEventListener('submit', e => {
33        if (!form.checkValidity()) { e.preventDefault(); e.stopPropagation(); }
34        form.classList.add('was-validated');
35      });
36    });
37  })();
38</script>