Standaard velden hiden in formulieren

Soms wil je in een formulier bepaalde velden verbergen voor eindgebruikers, bijvoorbeeld omdat ze automatisch worden gevuld, omdat ze alleen voor agents bedoeld zijn, of omdat hetzelfde veld op het ene formulier wel en op het andere niet gevraagd moet worden. Dit artikel beschrijft hoe je dat doet via het Help Center-thema.

Lees dit eerst: kan het ook zonder code?

Verbergen via het thema is een work-around. Er zijn twee standaardoplossingen die vaak beter werken, omdat ze ook gelden voor de API, e-mail en de ticketweergave:

Voorwaardelijke velden (Beheercentrum > Objecten en regels > Tickets > Formulieren > Voorwaarden). Hiermee toon je een veld alleen als een ander veld een bepaalde waarde heeft. Dit is de juiste oplossing als het verbergen afhangt van wat de klant invult.
Zichtbaarheid per veld (veldinstelling "Bewerkbaar voor eindgebruikers" uitzetten). Het veld verdwijnt dan uit alle formulieren in het Help Center. Alleen bruikbaar als je het veld nergens aan eindgebruikers wilt tonen.

Pas als je een veld op het ene formulier wél en op het andere niet wilt tonen, en dat niet afhangt van een ingevulde waarde, kom je uit bij de thema-aanpak hieronder.

Welke methode past bij jouw thema?

Er zijn twee generaties aanvraagformulieren, en ze vragen om een andere aanpak. Check eerst welke je hebt: open templates/new_request_page.hbs in je thema.

Staat er <div id="new-request-form"></div> en een <script type="module"> met renderNewRequestForm? Dan heb je het nieuwe formulier (Copenhagen v2 en hoger). Gebruik methode A.
Staat er {{#form 'request'}} met losse velden? Dan heb je het klassieke formulier. Gebruik methode B.

Let op: in het nieuwe formulier bestaat de wrapper div.form-field niet meer en is jQuery niet aanwezig. Scripts uit oudere artikelen en van internet werken daar dus niet.

Voorbereiding: de juiste ID's ophalen

Formulier-ID: Beheercentrum > Objecten en regels > Tickets > Formulieren. Open het formulier; het ID staat in de URL.
Veld-ID: Beheercentrum > Objecten en regels > Tickets > Velden. Open het veld; het ID staat in de URL. In de HTML van het formulier herken je het veld aan name="request[custom_fields][VELD_ID]".

✅ Methode A - Nieuw formulier (Copenhagen v2 en hoger)

Het formulier wordt door JavaScript opgebouwd nadat de pagina geladen is. Je kunt dus niet meteen na het laden naar de velden zoeken; je hebt een MutationObserver nodig die wacht tot ze verschijnen. Zet onderstaand script onderaan templates/new_request_page.hbs.

<script>
  (function () {
    // formulier-ID : [veld-ID's die verborgen worden]
    var HIDDEN_FIELDS = {
      "360000111111": [
        "360000222222", // Naam van het veld, voor je collega van later
        "360000333333"
      ],
      "360000444444": [
        "360000222222"
      ]
    };

    var formId = new URLSearchParams(window.location.search).get("ticket_form_id");
    var fieldIds = formId ? HIDDEN_FIELDS[formId] : null;
    if (!fieldIds || !fieldIds.length) return;

    // Zoek de wrapper van een veld: klim omhoog tot het element ook het label bevat.
    function fieldWrapper(el, form) {
      var node = el.parentElement;
      for (var i = 0; i < 6 && node && node !== form && node !== document.body; i++) {
        if (node.querySelector("label")) return node;
        node = node.parentElement;
      }
      return null;
    }

    function hideFields() {
      var form = document.querySelector("#new-request-form form") ||
                 document.querySelector("#new-request-form");
      if (!form) return false;
      var done = 0;
      fieldIds.forEach(function (id) {
        var input = form.querySelector('[name="request[custom_fields][' + id + ']"]');
        if (!input) return;
        var wrapper = fieldWrapper(input, form);
        if (!wrapper) return;
        if (wrapper.dataset.cmHidden !== "true") {
          wrapper.dataset.cmHidden = "true";
          wrapper.style.display = "none";
        }
        done++;
      });
      return done === fieldIds.length;
    }

    var container = document.getElementById("new-request-form");
    if (!container) return;

    if (!hideFields()) {
      var observer = new MutationObserver(function () {
        if (hideFields()) observer.disconnect();
      });
      observer.observe(container, { childList: true, subtree: true });
      setTimeout(function () { observer.disconnect(); }, 15000);
    }
  })();
</script>

👉 De URL van het formulier ziet er dan zo uit: /hc/nl/requests/new?ticket_form_id=FORM_ID. Wisselt de gebruiker van formulier, dan laadt de pagina opnieuw met het nieuwe ID in de URL, en klopt de selectie vanzelf.

Onderwerp of beschrijving verbergen

Deze twee velden hebben geen custom field-ID. Gebruik in plaats daarvan [name="request[subject]"] en [name="request[description]"] in dezelfde functie.

Wil je ze ook vooraf vullen, dan werkt input.value = "..." niet: het formulier is een React-component en overschrijft de waarde weer. Gebruik dit:

function setValue(el, value) {
  var proto = el.tagName === "TEXTAREA"
    ? window.HTMLTextAreaElement.prototype
    : window.HTMLInputElement.prototype;
  Object.getOwnPropertyDescriptor(proto, "value").set.call(el, value);
  el.dispatchEvent(new Event("input", { bubbles: true }));
}

Werkt de beschrijving een WYSIWYG-editor? Dan lukt vooraf invullen niet betrouwbaar. Vul het onderwerp in dat geval liever via een trigger, nadat het ticket is aangemaakt.

Methode B - Klassiek formulier

Heb je nog een ouder thema met {{#form 'request'}}, dan bestaat div.form-field wel en is de klassieke aanpak bruikbaar. Ook hier zet je het script onderaan templates/new_request_page.hbs.

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var formId = new URLSearchParams(window.location.search).get("ticket_form_id");
    if (formId !== "FORM_ID_HIER") return;

    ["request_subject", "request_description"].forEach(function (id) {
      var el = document.getElementById(id);
      if (el && el.closest(".form-field")) el.closest(".form-field").style.display = "none";
    });

    document.getElementById("request_subject").value = "Nieuw ticket";
  });
</script>

Custom fields hebben in dit thema het ID request_custom_fields_VELD_ID.

Twee dingen die vaak misgaan

1. Verplichte velden blokkeren het verzenden

Zendesk valideert een verborgen veld gewoon. Is het veld verplicht, dan krijgt de klant bij het verzenden de melding dat velden met een sterretje vereist zijn, terwijl het veld in kwestie nergens te zien is. Zet velden die je verbergt dus altijd op niet verplicht, of vul ze na het aanmaken via een trigger.

2. De velden staan nog in de ticketdetails

Het verbergen geldt alleen voor het aanvraagformulier. Op de pagina van een ingediend ticket (request_page.hbs) toont Zendesk alle formuliervelden in de zijbalk, inclusief de lege. In die template is het veld-ID niet beschikbaar in Handlebars, dus filteren op ID kan daar niet. Wat wel kan: velden zonder waarde helemaal niet tonen. Zet dit onderaan templates/request_page.hbs.

<script>
  (function () {
    function isEmpty(dd) {
      // Alleen dd's zonder child-elementen; status, organisatie, CC's en
      // bijlagen bevatten wel elementen en blijven dus altijd staan.
      if (dd.children.length > 0) return false;
      return dd.textContent.replace(/[\s\-‐-―−]/g, "") === "";
    }

    function hideEmptyDetails() {
      document.querySelectorAll(".request-details dd").forEach(function (dd) {
        if (!isEmpty(dd)) return;
        var dt = dd.previousElementSibling;
        if (dt && dt.tagName === "DT") dt.style.display = "none";
        dd.style.display = "none";
      });
    }

    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", hideEmptyDetails);
    } else {
      hideEmptyDetails();
    }
  })();
</script>

Vult een agent zo'n veld later alsnog, dan verschijnt het weer in de zijbalk. Wil je dat uitsluiten, dan moet je terug naar de veldinstelling "Bewerkbaar voor eindgebruikers".

Testen

Upload het thema als preview, niet meteen live.
Open /hc/nl/requests/new?ticket_form_id=FORM_ID en controleer of de juiste velden weg zijn.
Wissel naar een ander formulier en check of daar de juiste set verdwijnt.
Dien een testticket in en controleer of het verzenden lukt (verplichte velden).
Open het ticket als eindgebruiker en check de ticketdetails in de zijbalk.
Herhaal in elke actieve taal van je Help Center.

Let op bij thema-updates

Deze scripts staan in je templates. Werk je het thema bij naar een nieuwe versie van Copenhagen, dan worden de templates overschreven en verdwijnen ze. Zet de aanpassingen in versiebeheer of documenteer ze per klant, en zet ze na elke update terug.

Wanneer is dit handig?

Wanneer hetzelfde veld op het ene formulier wel en op het andere niet gevraagd moet worden
Als eindgebruikers alleen specifieke velden mogen invullen
Bij onboarding- of aanvraagformulieren met een vaste ticketstructuur
Wanneer je onderwerpregels wilt standaardiseren

Zoeken