Mező írásvédetté (csak olvashatóvá) tétele

Egy mező írásvédetté tétele hasznos, ha a mezőt üzenetek vagy számított értékek dinamikus megjelenítésére használod, és a látogató ne írhassa át. A Gravity Forms ehhez nem ad beépített beállítást, ezért JavaScriptet kell használnod.

Előkészület: egyedi CSS-osztály

Add meg az írásvédetté tenni kívánt mezőnek az Egyedi CSS-osztály beállításban a gf_readonly osztályt (más nevet is használhatsz, akkor a kódban is azt írd). A szkriptek ezzel az osztállyal találják meg a mezőt, és beállítják rajta a readonly attribútumot.

A kódok az űrlap kirajzolása után lefutó gform/postRender eseményre kapcsolódnak.

Bekezdésszöveg mező

document.addEventListener('gform/postRender', (event) => {
  const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
  const textareas = Array.from(gform.utils.getNodes('.gf_readonly textarea', false, form, true));

  textareas.forEach(textarea => {
    textarea.readOnly = true;
  });
});

Szöveges beviteli mezők

Ez minden olyan mezőtípusnál működik, amelynek HTML-beviteli eleme szöveges, például a dátumválasztónál is.

document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const inputs = Array.from(gform.utils.getNodes('.gf_readonly input', false, form, true));

    inputs.forEach(input => {
        input.readOnly = true;
    });
});

Jelölőnégyzetek

A jelölőnégyzeteknél a readonly attribútum nem hat, ezért a kattintást kell letiltani.

document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const checkboxes = Array.from(gform.utils.getNodes('.gf_readonly input[type=checkbox]', false, form, true));

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', (event) => event.preventDefault());
    });
});

Rádiógombok

document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const radioButtons = Array.from(gform.utils.getNodes('.gf_readonly input[type=radio]', false, form, true));

    radioButtons.forEach(radio => {
        radio.addEventListener('click', (event) => event.preventDefault());
    });
});

Hová tedd a kódot

A JavaScriptet az oldal frontendjén kell betöltened. A lehetőségeket a JavaScript hozzáadása az oldal frontendjéhez fejezet írja le.

Kód nélküli megoldás

Ha nem szeretnél kódot írni, harmadik féltől származó bővítmény is megoldja, például a Gravity Wiz csapat GP Read Only nevű bővítménye. A harmadik féltől származó megoldásokat a Gravity Forms csapata nem vizsgálja és nem támogatja: te felelsz azért, hogy megfelelnek-e a projekted funkcionális, biztonsági, jogi és költségigényeinek.