Webflow Formular mit dynamischem Eingabefeld – So blendest du Felder mit JavaScript ein

Warum dynamische Eingabefelder sinnvoll sind

Dynamische Felder verbessern nicht nur die Nutzererfahrung, sondern führen zu höherer Formular-Qualität:

• Nur relevante Felder werden angezeigt
• Pflichtfelder werden validiert
• Saubere, strukturierte Anfragen
• Schnell eingebaut und flexibel konfigurierbar

‍

Schritt-für-Schritt: So baust du das Formular in Webflow

1. Erstelle ein Radio-Feld mit Optionen – z. B. "Webdesign", "SEO", "Sonstiges"
2. Füge ein Textfeld für die Eingabe bei "Sonstiges" ein
3. Gib dem Textfeld eine ID, z. B. Sonstiges
4. Um den Wrapper des Textfelds legst du eine div mit der Klasse sonstiges-wrapper
5. Stelle display: none für diese Klasse sonstiges-wrapper ein
6. Füge den oben gezeigten Script-Block direkt nach dem Formular ein

‍

JavaScript-Lösung mit 5 flexiblen Einstellungen

Hier ist das Script, das du in dein Webflow-Projekt einfügen kannst. Es wird nach dem Formular als Custom Code-Embed eingebaut:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const CONFIG = {
      otherFieldInputId: "Sonstiges",
      otherFieldWrapperClass: "sonstiges-wrapper",
      radioGroupName: "Leistungen",
      showFieldWhenValueIs: "Sonstiges",
      formSelector: "#contact-form"
    };

    const otherFieldInput = document.getElementById(CONFIG.otherFieldInputId);
    const otherFieldWrapper = document.querySelector(`.${CONFIG.otherFieldWrapperClass}`);
    const radioButtons = document.querySelectorAll(`input[name="${CONFIG.radioGroupName}"]`);
    const form = document.querySelector(CONFIG.formSelector);
    const submitButton = form?.querySelector('input[type="submit"]');

    if (!otherFieldInput || !otherFieldWrapper || !radioButtons.length || !form || !submitButton) {
      console.warn("❌ Ein oder mehrere wichtige Elemente wurden nicht gefunden.");
      return;
    }

    otherFieldWrapper.style.display = "none";
    otherFieldInput.removeAttribute("required");
    disableSubmit();

    radioButtons.forEach(radio => radio.addEventListener("click", handleChange));
    otherFieldInput.addEventListener("input", checkAllRequired);
    form.querySelectorAll("input, textarea, select").forEach(field => {
      field.addEventListener("input", checkAllRequired);
      field.addEventListener("change", checkAllRequired);
    });

    handleChange();

    function handleChange() {
      const selected = document.querySelector(`input[name="${CONFIG.radioGroupName}"]:checked`);
      if (!selected) return;

      if (selected.value === CONFIG.showFieldWhenValueIs) {
        otherFieldWrapper.style.display = "block";
        otherFieldInput.setAttribute("required", "true");
      } else {
        otherFieldWrapper.style.display = "none";
        otherFieldInput.removeAttribute("required");
        otherFieldInput.value = "";
      }

      checkAllRequired();
    }

    function checkAllRequired() {
      const requiredFields = form.querySelectorAll("[required]");
      let allValid = true;

      requiredFields.forEach(field => {
        if (!field.value.trim()) {
          allValid = false;
        }
        if (field.type === "checkbox" && !field.checked) {
          allValid = false;
        }
      });

      allValid ? enableSubmit() : disableSubmit();
    }

    function disableSubmit() {
      submitButton.disabled = true;
      submitButton.style.opacity = "0.5";
      submitButton.style.pointerEvents = "none";
    }

    function enableSubmit() {
      submitButton.disabled = false;
      submitButton.style.opacity = "1";
      submitButton.style.pointerEvents = "auto";
    }
  });
</script>

‍

Was bedeuten die 5 Einstellungen im Script?

Mit diesen 5 Angaben sagst du dem Script, wie dein Formular aufgebaut ist, damit es weiß, wann welches Feld angezeigt und ob der Button aktiviert werden soll.

otherFieldInputId
Die ID von dem Textfeld, das du zeigen willst (z. B. für „Sonstiges“).

otherFieldWrapperClass
Die Klasse des Elements, das dieses Textfeld umschließt – wird ein- und ausgeblendet.

radioGroupName
Der Name der Radio-Button-Gruppe, aus der der Nutzer wählen kann.

showFieldWhenValueIs
Der Wert, bei dem das Textfeld angezeigt werden soll (z. B. “Sonstiges”).

formSelector
Der Name oder die Klasse deines Formulars – damit das Script weiß, welches Formular gemeint ist.

‍

Diese Einstellungen kannst du ganz einfach anpassen, so funktioniert das Script auch mit deinem eigenen Formular in Webflow.

‍

Fazit: Einfache Verbesserung mit großer Wirkung

Mit wenigen Schritten machst du dein Webflow-Formular dynamischer, aufgeräumter und benutzerfreundlicher. Und dank der Konfigurierbarkeit kannst du das Snippet beliebig in deinen Projekten wiederverwenden.

‍

Webflow Cloneable

Hier geht zum Webflow Cloneable

‍

Demo Seite

https://youtube-dynamisches-input-feld.webflow.io/

‍

‍

‍