Utilizzate Gravity Forms in WordPress e avete bisogno di creare un campo input readonly?
In questo articolo vedremo come è possibile fare ciò utilizzando poche righe di codice e assegnando al nostro campo input creato con Gravity Forms, un potente plugin per la creazione di moduli di contatti in WordPress, una semplice classe CSS.
Leggete attentamente questo articolo e in pochi minuti creerete il vostro campo input readonly!
I STEP: Inserire del codice nel file functions.php
Come prima cosa dovrete inserire il seguente codice nel vostro file functions.php che troverete nel tema del vostro sito WordPress. Nel caso in cui aveste usato un tema figlio potrete inserire lo stesso codice nel file functions.php del vostro child theme.
function enqueue_gravityforms_inputreadonly() {
wp_enqueue_script('gravityforms_inputreadonly', get_template_directory_uri() . '/path-directory-js-del-tema/gravity-forms-inputreadonly.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'enqueue_gravityforms_inputreadonly' );
dove path-directory-js-del-tema è la cartella dove andrete a mettere il file gravity-forms-inputreadonly.js
II STEP: Creare il file js gravity-forms-inputreadonly.js
Una volta inserito il codice all’interno del file functions.php che serve per dire al nostro tema di caricare il file js chiamato gravity-forms-inputreadonly.js non rimane altro che crearlo all’interno della directory dove teniamo tutti i file js del tema e all’interno del file scriviamo questo codice:
jQuery(document).ready(function(jQuery){
jQuery("input.disabled").attr('disabled','disabled');
});
III STEP: Creiamo il campo input in Gravity Forms e assegnamo la classe CSS disabled
Ora non rimane altro che creare il nostro campo input con Gravity Forms e nella tab Avanzato del nostro campo inseriamo la classe css disabled come potete vedere dall’immagine seguente:
Seguite gli step descritti in questa guida e riuscirete a creare un campo input readonly in pochissimi minuti!
Osservazioni
Chiaramente grazie al codice che avete inserito nel file functions.php e al file js potrete creare quanti più input field vorrete semplicemente assegnando la classe css disabled nella tab Avanzato del campo desiderato.
