Create a form containing 4 numberfields only accepting double numbers, with one field autofilled

[Nosleep (Atle Røisland)]

Hi!

I’m about to begin with a new form, that when filled out correctly it will send you to another page within the website.

The form needs to contain 4 number fields, that is restricted to contain only two numbers in each field. ( {10} {75} {50} {00} is the final solution to let you through)

Can anyone with some coding skills please help me a little on the way here? I guess this can’t be done with the native forms in Webflow, or with logic?

Thanks in advance.
Atle

---

Here is my site Read-Only: Haven’t started the project yet
(how to share your site Read-Only link)

[Nosleep (Atle Røisland)]

I was able to get this working fine, after a long conversation with my pal ChatGPT.

Here’s the final code, if anyone needs it:

<!-- HTML kode for skjemaet -->
<div class="form-container">
<form id="customForm" class="form-wrapper">
<div class="form-wrapper-flex">
<div class="input-wrapper">
<img src="URL to icon here" class="form-icon">
  <input class="input-field" type="text" id="vannkraft" name="vannkraft" maxlength="2" required>
  <label for="vannkraft">Vannkraft</label>
</div>

  <div class="input-wrapper">
  <img src="URL to icon here" class="form-icon">
  <input class="input-field highlighted" type="text" id="havvind" name="havvind" maxlength="2" value="75" required>
  <label for="havvind">Havvind</label>
</div>

  <div class="input-wrapper">
  <img src="URL to icon here" class="form-icon">
  <input class="input-field" type="text" id="solkraft" name="solkraft" maxlength="2" required>
  <label for="solkraft">Solkraft</label>
</div>

  <div class="input-wrapper">
  <img src="URL to icon here" class="form-icon">
  <input class="input-field" type="text" id="batteri" name="batteri" maxlength="2" required>
  <label for="batteri">Batteri</label>
</div>
</div>
  <button type="submit" class="form-submit">Åpne invitasjon</button>
</form>
  </div>

<!-- JavaScript kode for validering og innsending -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById('customForm');
  const vannkraftInput = document.getElementById('vannkraft');
  const havvindInput = document.getElementById('havvind');
  const solkraftInput = document.getElementById('solkraft');
  const batteriInput = document.getElementById('batteri');

  // Fjern tidligere event listeners for å forhindre flere alert-meldinger
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // Hindre standard form submissjon
    
    const vannkraft = vannkraftInput.value.trim();
    const havvind = havvindInput.value.trim();
    const solkraft = solkraftInput.value.trim();
    const batteri = batteriInput.value.trim();

    // Sjekke at alle verdiene er nummeriske og har nøyaktig 2 sifre
    const isTwoDigits = (value) => /^\d{2}$/.test(value);

    if (!isTwoDigits(vannkraft) || !isTwoDigits(havvind) || !isTwoDigits(solkraft) || !isTwoDigits(batteri)) {
      alert('Hvert felt må inneholde nøyaktig 2 sifre.');
      return;
    }

    if (vannkraft === '10' && havvind === '75' && solkraft === '50' && batteri === '00') {
      // Viderekoble til en ny side
      window.location.href = '/invitasjon'; // Endre '/ny-side' til URL-en du ønsker å videresende til
    } else {
      alert('Vennligst fyll inn riktig nummer for hvert felt.');
    }
  }, { once: true });
});
</script>

[DuncanHamra (from Memberstack)]

We ran into this issue as well when working on a client project and created a solution for how to validate text inputs.

If you check out the tutorial video you’ll get walked through the issue as well as implementing the solution from start to finish.

#127 - Validate Text Inputs | Webflow Powerups

Please feel free to tag me if you have any questions!

Happy Thursday!