Generatore di moduli drag-and-drop: ticket e sondaggi senza modulo di contatto 7

La settimana scorsa stavo contando i plugin su uno dei siti dei miei clienti. Un normale negozio WooCommerce, attrezzature industriali, niente di esotico. E così guardo l'elenco dei plugin attivi - e c'è Contact Form 7 per un modulo di feedback, Conditional Fields, Flamingo per l'archiviazione di applicazioni, File Upload per caricare file e, ciliegina sulla torta, una sorta di componente aggiuntivo a pagamento per un bel design, perché i moduli CF7 standard sembrano essere stati inventati nel 1998. Cinque plugin. Cinque potenziali punti di fallimento. Cinque fonti di aggiornamento, ognuna delle quali può rompere qualcosa. E tutto questo affinché il cliente possa scrivere “voglio sapere il prezzo dell’olio idraulico, ecco il mio numero di telefono”.

Poi ho pensato: perché è successo questo? Perché la community di WordPress è abituata al fatto che per risolvere un problema è necessario assemblare un costruttore da cinque o sei plugin diversi, ognuno dei quali è scritto da un autore diverso, aggiornato in momenti diversi e compatibile con gli altri solo finché nessuno ha aggiornato nulla? Dopotutto, un modulo di feedback è apparentemente una delle cose più basilari su Internet. La persona ha compilato i campi, ha premuto un pulsante e i dati sono stati inviati al gestore. Cosa c'è di così difficile? Ma se scavi un po' più a fondo - aggiungi la logica condizionale, il caricamento dei file, l'archiviazione delle richieste nel database, le normali notifiche - e un compito semplice si trasforma in un progetto di ingegneria per l'integrazione di uno zoo di estensioni.

È stata questa esperienza che ci ha spinto a creare il nostro generatore di moduli all'interno di COS WP Woo. Non solo un altro plugin per i moduli - il mondo ne ha visti abbastanza - ma un modulo integrato che risolve completamente il problema. Con un builder visivo drag-and-drop, logica condizionale, archiviazione delle applicazioni, notifiche e-mail e inserimento tramite shortcode. Tutto in uno, nessuna dipendenza, nessun conflitto di versioni, nessun abbonamento annuale per ciascun componente aggiuntivo separatamente. E oggi voglio raccontarvi come funziona dall'interno, perché abbiamo preso queste decisioni e come il nostro approccio differisce da quello a cui tutti sono abituati.

Ma prima di immergerci nei dettagli tecnici, siamo onesti su cosa c'è che non va nelle soluzioni esistenti. Per non offendere nessuno: Contact Form 7 ha fatto un ottimo lavoro per l'ecosistema WordPress e merita rispetto. Ma è comprendere i problemi che aiuta a valutare il motivo per cui è necessaria un’alternativa.

Contact Form 7 è un plugin rilasciato nel 2007. Diciannove anni fa. Da allora è stato scaricato più di 340 milioni di volte e viene utilizzato su milioni di siti. Ma il punto è questo: la sua architettura è rimasta essenzialmente la stessa. I moduli vengono descritti utilizzando modelli di testo con tag come [testo* tuo-nome] e [e-mail* tua-e-mail]. Nessun editor visivo. Nessuna anteprima. Scrivi il codice del modulo nel campo di testo, salvalo, vai alla pagina e vedi se assomiglia a quello che volevi o no. E così via in cerchio. Per uno sviluppatore questo è tollerabile. Per un manager o un operatore di marketing che desidera modificare un modulo su un sito Web, questo è un muro. Un muro impenetrabile di parentesi quadre e parametri incomprensibili.

E questo è solo l'inizio. Vuoi che un campo venga visualizzato in base alla selezione in un altro? Imposta campi condizionali. Vuoi che le domande vengano archiviate in un database e non solo inviate all'ufficio postale? Metti Flamingo. Vuoi che il cliente possa allegare un PDF o una foto? Imposta il caricamento del file. Vuoi stili normali? Installa le skin CF7 o scrivi CSS manualmente. Ognuna di queste attività è un plugin separato con un autore separato, un ciclo di aggiornamento separato e una licenza separata. In un progetto ho contato sette plugin relativi a Contact Form 7. Sette. E il project manager si è lamentato del fatto che dopo aver aggiornato WordPress alla versione 6.5, tre moduli hanno smesso di funzionare perché uno dei componenti aggiuntivi era incompatibile. È una storia familiare?

Naturalmente ci sono alternative a pagamento: WPForms, Gravity Forms, Formidable Forms. Risolvono molti dei problemi di CF7: editor visivo, logica condizionale, archiviazione delle applicazioni, tutto in un unico pacchetto. Ma per questo chiedono soldi. WPForms Pro: $ 199 all'anno. Moduli di gravità - $ 259. E questo è per un sito. Se hai dieci progetti, moltiplicali. E se allo stesso tempo hai bisogno anche di estensioni WooCommerce per B2B, ricerca, consegna, sicurezza, il budget per i plugin inizia a sembrare indecente. Ho lavorato con un'azienda che pagava un totale di più di millecinquecento dollari all'anno solo per i plugin. E i moduli erano lontani dall'oggetto più costoso.

Perché creare moduli all'interno di un plugin WooCommerce

Ad essere onesti, quando stavamo progettando il modulo moduli per COS WP Woo, ci sono state delle controversie all'interno del team. L’argomentazione contraria suonava più o meno così: “I moduli sono un universo separato, perché trascinarli in un plugin di e-commerce?” E l'argomento non era privo di significato. I moduli sono un argomento davvero complesso, hanno i propri modelli UX, i propri requisiti di sicurezza (CSRF, XSS, convalida) e le proprie sfumature di archiviazione dei dati. Ma più lavoravo con veri negozi WooCommerce, più diventava chiaro: i moduli sono parte integrante di un negozio online. Non qualcosa di esterno, imbullonato lateralmente, ma un elemento organico.

Pensa con la tua testa. Modulo di richiesta CP: dove dovrebbe portare? Nel CRM di un responsabile delle vendite, che è legato a WooCommerce. Modulo di domanda per la selezione di un analogo: deve conoscere il catalogo dei prodotti. Modulo di richiamata: dovrebbe apparire nel contesto della pagina del prodotto. Modulo per il sondaggio sulla soddisfazione: è legato all'ordine. Tutti questi non sono "moduli sul sito" astratti, ma elementi del processo commerciale. E quando vivono in un plugin separato, perdi contesto. Il manager vede la richiesta in Flamingo, ma non vede da quale pagina proviene o quale prodotto stava guardando il cliente. Oppure lo vede, ma attraverso le stampelle: campi nascosti, tag UTM, passaggio di parametri tramite URL. Funziona tutto finché funziona. E poi si rompe, e nessuno capisce perché.

Quindi abbiamo deciso: i moduli fanno parte della piattaforma. Non un componente aggiuntivo, non un'integrazione, ma un modulo integrato che sa tutto sul contesto WooCommerce. Che memorizza i dati nelle stesse tabelle personalizzate degli altri moduli. Che invia e-mail tramite lo stesso modulo SMTP già configurato nel plug-in. Che è controllato tramite la stessa interfaccia React a cui è abituato l'amministratore. Questa decisione ha determinato l’architettura di tutto ciò che è venuto dopo.

Ora parliamo di come funziona nella pratica. Perché le soluzioni architetturali sono fantastiche, ma per l'amministratore del sito qualcos'altro è più importante: quanto velocemente può creare un modulo, pubblicarlo sulla pagina e iniziare a ricevere candidature.

Quando apri il modulo Moduli nell'amministratore COS WP Woo (percorso: Store - Moduli), viene visualizzato un elenco di tutti i moduli. Questa è una tabella con nomi, numero di campi, stato e numero di domande ricevute. Tutto è semplice e chiaro. Fai clic su "Crea modulo" e verrai indirizzato al designer a schermo intero. Ed è qui che inizia il divertimento.

La modalità a schermo intero è una decisione consapevole. Abbiamo sperimentato a lungo approcci diversi: un editor integrato nella barra laterale, una finestra modale, una pagina separata nel layout standard di WordPress. E siamo giunti alla conclusione che il progettista del modulo dovrebbe occupare l'intero schermo. Perché? Perché stai costruendo un oggetto visivo. Devi vedere come apparirà la forma in scala reale. Hai bisogno di spazio per trascinare i campi, impostare condizioni, visualizzare l'anteprima. Il builder inserito nella barra laterale di WordPress è come dipingere un'immagine attraverso il buco della serratura. È possibile, ma perché?

Canvas a schermo intero e trascinamento dei campi

Il progettista è diviso in tre zone. Sulla sinistra c'è un pannello con i tipi di campo disponibili. Al centro c'è l'area di disegno del modulo, dove i campi si trovano nell'ordine in cui li vedrà l'utente. Sulla destra c'è il pannello delle impostazioni per il campo selezionato. Questo layout a tre colonne è familiare a chiunque abbia lavorato con Figma, Canva o anche PowerPoint. Questo è un modello intuitivo che non richiede formazione.

I tipi di campo disponibili coprono quasi tutti gli scenari che ho riscontrato in progetti reali. Campo di testo - per nome, oggetto del ricorso, commento libero. Campo numerico: per quantità, volume, budget. E-mail - con convalida automatica del formato. Telefono - con una maschera di input in modo che il numero venga ricevuto in un formato uniforme. Textarea - per messaggi espansi. Elenco a discesa (Seleziona) - quando è necessario limitare la scelta a opzioni specifiche: tipo di attrezzatura, regione di consegna, metodo di comunicazione. Caselle per la selezione multipla: servizi di interesse, caratteristiche desiderate. Pulsanti di opzione: quando è necessario selezionare esattamente un'opzione. Data - con un calendario per selezionare la data di consegna o di consultazione desiderata. Caricamento file - per disegni, specifiche tecniche, fotografie. E anche un campo per la firma, per gli utenti mobili che possono firmare con il dito direttamente sullo schermo. Questo, tra l'altro, si è rivelato inaspettatamente richiesto sotto forma di certificati di accettazione e richieste di riparazioni in garanzia.

Ogni campo è un componente React che viene visualizzato sulla tela esattamente come lo vedrà un visitatore del sito. Nessuna "anteprima in una nuova scheda": vedi il risultato proprio mentre lavori. Abbiamo trascinato il campo dal pannello di sinistra sull'area di disegno ed è apparso. Fare clic su di esso e le impostazioni si aprono a destra: etichetta, segnaposto, obbligatorio, larghezza (intera o metà per layout a due colonne), valore predefinito, testo della descrizione comando. Tutto ciò cambia in tempo reale: abbiamo modificato l'etichetta a destra ed è stata immediatamente aggiornata sull'area di disegno.

Per implementare il drag-and-drop, utilizziamo la libreria @hello-pangea/dnd: questo è un fork di @hello-pangea, che a sua volta è una continuazione di react-beautiful-dnd di Atlassian. La scelta non è casuale. Abbiamo provato diverse opzioni: react-dnd, dnd-kit, Sortable.js con un wrapper React. Ognuno aveva i suoi vantaggi, ma @hello-pangea/dnd ha vinto in base a una combinazione di fattori. Fornisce un eccellente feedback tattile: l'elemento “decolla” dal pannello, segue il cursore e sull'area di disegno appare un segnaposto che mostra dove andrà l'elemento. Funziona correttamente con i touch screen, il che è importante perché sempre più persone gestiscono siti Web dai tablet. E non richiede la scrittura dei propri algoritmi di collisione, che dovrebbero essere configurati manualmente in dnd-kit.

Ma il visual designer è solo la parte esterna. Sotto il cofano, ogni modulo è una struttura JSON che memorizza una descrizione di tutti i campi, il loro ordine, le impostazioni e le regole di convalida. Quando salvi il modulo, questo JSON viene salvato nella tabella wpaic_forms. Quando un visitatore apre una pagina con un modulo, il codice PHP sul backend legge il JSON e genera HTML con il markup, la convalida e i gestori JavaScript corretti. Ciò significa che il modulo funziona anche se la parte React del plugin non è caricata: è completamente lato server sul front-end. Nessun ritardo nel rendering, nessun problema SEO.

E qui voglio toccare un punto che molti creatori di moduli ignorano. L'anteprima dal vivo è molto più di una semplice comodità. Questa è la prevenzione degli errori. Quando un manager crea un modulo in modalità testo, come in CF7, non vede il risultato. Sta indovinando. E poi si sorprende che il campo “Commento” appaia prima del campo “Nome”, o che le caselle di controllo siano disposte in colonna invece che in riga, o che su mobile il modulo sembri un lungo foglio. Con un visual designer, questi errori sono impossibili: vedi esattamente ciò che vedrà il cliente. E fa risparmiare ore. Lo so perché ho passato quelle ore a giocherellare con i modelli CF7 e ad aggiornare continuamente la pagina nel browser.

Ora parliamo di ciò che rende i moduli veramente potenti: la logica condizionale. Invia un modulo di domanda per la selezione dell'olio. Prima domanda: "Tipo di attrezzatura" - elenco a discesa: Automobili, Attrezzature industriali, Idraulica, Altro. Se il cliente seleziona "Automobili", vengono visualizzati i campi "Marca" e "Modello". Se si seleziona “Attrezzatura industriale”, compaiono “Tipo meccanismo” e “Condizioni operative”. Se "Altro" è un campo di testo per una descrizione libera. Senza logica condizionale, dovresti mostrare tutti i campi contemporaneamente e il modulo si trasformerebbe in un questionario di due pagine, che il cliente scapperà senza compilare.

Nel modulo di contatto 7, ciò richiede un plug-in Campi condizionali separato, che funziona tramite hack CSS e gestori JavaScript, che spesso entrano in conflitto con altri script sulla pagina. Abbiamo costruito la logica condizionale direttamente nel costruttore. Nelle impostazioni di ciascun campo è presente una sezione “Condizioni di visualizzazione”. Seleziona semplicemente: "Mostra questo campo se il campo [Tipo di attrezzatura] è [Veicoli]". Oppure "Nascondi questo campo se il campo [Budget] è inferiore a 10000". È possibile combinare diverse condizioni utilizzando "AND" o "OR". L'interfaccia per questo è un generatore di regole visive, simile a quello che utilizziamo per i campi personalizzati nel modulo CF. Nessun codice, nessuna formula di testo.

La logica condizionale viene gestita lato client tramite JavaScript, che viene generato automaticamente dalla descrizione del modulo JSON. Ciò significa che i campi appaiono e scompaiono istantaneamente, senza ricaricare la pagina, senza richieste AJAX. L'utente ha selezionato un'opzione nell'elenco e i campi richiesti sono apparsi senza problemi. Ne ho scelto un altro: i precedenti sono scomparsi, ne sono apparsi di nuovi. Questo crea la sensazione di un'interfaccia interattiva piuttosto che di un modulo HTML statico. E, cosa più importante, i campi nascosti non partecipano alla convalida: se un campo è nascosto da una condizione, non sarà considerato obbligatorio, anche se è contrassegnato come obbligatorio. Questo è un punto sottile in cui molte implementazioni inciampano.

Ricordo un progetto in cui stavamo utilizzando WPForms con logica condizionale e abbiamo riscontrato un bug: un campo obbligatorio nascosto bloccava l'invio del modulo perché la sua convalida veniva attivata anche quando il campo era invisibile. Il cliente non ha potuto inviare il modulo e se n'è andato. Abbiamo perso le applicazioni finché non l'abbiamo capito e abbiamo scritto una stampella in JavaScript. Questa è una di quelle lezioni che rimangono con te per molto tempo. Pertanto, nella nostra implementazione, i campi nascosti sono esclusi dalla validazione a livello architetturale: questa non è una correzione di bug, ma una regola fondamentale.

Applicazioni: non per la posta, ma per il database

Veniamo ora ad un argomento che, secondo me, è il principale punto debole del Contact Form 7 e di soluzioni gratuite simili. Dove vanno le applicazioni? In CF7 la risposta è semplice: tramite e-mail. La domanda è arrivata e ho inviato un'e-mail al gestore. Punto. Nessuna e-mail, nessuna domanda. E i server di posta elettronica tendono a perdere lettere. I filtri antispam tendono a bloccare le notifiche di WordPress, soprattutto se il server non è configurato perfettamente: nessun record SPF, nessun DKIM, nessun DMARC. Conosco personalmente tre casi in cui un'azienda ha perso richieste per settimane perché le notifiche del modulo di contatto 7 sono finite nello spam sul server di posta. E nessuno lo sapeva finché i clienti non hanno iniziato a chiamare con lamentele: "Ho lasciato una richiesta, perché nessuno ha richiamato?"

Flamingo risolve questo problema: memorizza i biglietti in un database WordPress. Ma questo è un plugin separato, con una propria interfaccia, una propria logica di archiviazione e proprie limitazioni. Le applicazioni vengono archiviate come post personalizzati (post_type), il che crea un carico sulla tabella wp_posts, che è già gonfia su siti di grandi dimensioni. Su uno dei nostri progetti con 16mila prodotti, la tabella wp_postmeta pesa 937 megabyte - e aggiungere richieste dai moduli sarebbe una follia.

Abbiamo seguito una strada diversa. Tutte le applicazioni sono archiviate in una tabella personalizzata wpaic_form_entries. Si tratta di una tabella dedicata con una struttura ottimale: ID record, ID modulo, dati della richiesta in formato JSON, data di creazione, stato (nuovo, letto, in corso, chiuso), indirizzo IP del mittente, User-Agent, ID utente (se autorizzato). Un tavolo su misura non è un capriccio, è una decisione architettonica consapevole. Non intasa wp_posts, ha gli indici giusti per ricerche e filtri rapidi e si adatta in modo lineare: diecimila invii sono veloci quanto dieci.

Nell'interfaccia amministrativa, le richieste vengono visualizzate in una comoda tabella con la possibilità di filtrare per modulo, stato, data e ricerca full-text. Puoi trovare tutte le applicazioni contenenti la parola "idraulica" o tutte le applicazioni della settimana scorsa o tutte le applicazioni non lette per un modulo specifico. Puoi aprire ciascuna applicazione, vedere tutti i dati in un bel formato, scaricare file allegati, modificare lo stato e aggiungere un commento interno.

E, ovviamente, esporta. I moduli senza esportazione sono come un CRM senza report. Inutile. Supportiamo l'esportazione in CSV con la selezione dei campi, filtrando per data e stato. Abbiamo caricato il CSV, lo abbiamo aperto in Excel o Fogli Google e abbiamo analizzato quali prodotti vengono richiesti più spesso, da quali regioni provengono le richieste, quali moduli convertono meglio. Questi sono i dati che perdi quando le applicazioni risiedono solo nella posta.

C'è un'altra sfumatura di cui si parla raramente. Quando le applicazioni sono archiviate in un database, hai il controllo. Sai esattamente quante domande sono state ricevute. Non “approssimativamente”, non “a giudicare dalla posta”, ma esattamente. Il manager non può dire "non c'era alcuna domanda": viene registrata nel sistema con data, ora, indirizzo IP e tutti i dati. Ciò è particolarmente importante per le aziende B2B, dove ogni richiesta può costare centinaia di migliaia di rubli. Perdere un'applicazione del genere a causa di un filtro antispam non è solo un inconveniente, è una perdita diretta.

Ma siamo onesti: sono necessarie anche le notifiche via email. Non tutti i manager accedono all'amministratore di WordPress ogni ora per verificare la presenza di nuove applicazioni. Abbiamo quindi implementato un doppio sistema: l'applicazione viene sempre salvata nel database (questa è una garanzia), e contemporaneamente viene inviata una email di notifica (questa è efficienza). Inoltre, l'e-mail viene inviata tramite il modulo SMTP integrato COS WP Woo, che puoi configurare una volta nella sezione Impostazioni e-mail. Nessun plugin SMTP separato, nessun SMTP WP Mail per $49/anno. Un modulo SMTP per tutto: notifiche di ordini, notifiche di applicazioni, notifiche di sicurezza.

Le notifiche e-mail sono personalizzabili. Per ogni modulo si definisce: a chi inviare la notifica al gestore (sono possibili più indirizzi), quale modello utilizzare, quali dati includere. E separatamente - una notifica al cliente: "Grazie, la tua domanda è stata accettata, ti contatteremo entro 24 ore". La notifica al cliente viene inviata all'e-mail specificata nel campo del tipo "E-mail": il plug-in determina automaticamente quale campo contiene l'indirizzo del destinatario. Modelli di email - HTML con segnaposto: {{field_name}}, {{form_title}}, {{submission_date}}. È possibile personalizzare l'aspetto, aggiungere il logo aziendale e le informazioni di contatto. Non abbiamo scritto un motore di modelli universale, ma uno strumento mirato per un'attività specifica, quindi funziona in modo prevedibile e non si rompe a causa di progetti non standard.

Ti parlo di un’altra soluzione tecnica che può sembrare una cosa da poco, ma nella pratica fa risparmiare nervi. Caricamento file. Nel modulo di contatto 7 con il plug-in Caricamento file, i file vengono allegati alle e-mail come allegati. Funziona finché qualcuno non invia un file da 25 megabyte che il tuo server di posta non lascia passare. O di 50 megabyte, quindi PHP si bloccherà con un errore di limite di memoria. Da noi i file vengono caricati in una directory protetta sul server (fuori dall'accesso pubblico in modo che i robot non scarichino i documenti del cliente) e sono collegati al record dell'applicazione tramite ID. Riceverai un collegamento per il download nella tua email, che funziona solo per gli amministratori autorizzati. È più sicuro, più affidabile e non dipende dalle restrizioni del server di posta. Il cliente può allegare un disegno da 50 megabyte e il gestore lo riceverà, garantito.

Ora - codici brevi. Sembrerebbe, cosa c'è da discutere qui? [wpaic_form id="42"] - e il modulo è apparso sulla pagina. Ma il diavolo, come sempre, è nei dettagli. Uno shortcode può essere inserito in un post, una pagina, un widget, un plugin pop-up, un modello di tema e persino una descrizione del prodotto WooCommerce. Il modulo si adatta al contenitore: se il contenitore è stretto (barra laterale o popup), il modulo passa alla modalità a colonna singola. Se è largo (pagina a schermo intero), i campi impostati a metà larghezza appariranno in due colonne. Questo è un comportamento reattivo che funziona immediatamente. Non devi preoccuparti delle query multimediali CSS: se ne occupa il designer.

Sapete cosa mi ha sempre infastidito dell'approccio di CF7 agli shortcode? Lì, lo shortcode è l'unico modo per inserirlo. Nessun blocco Gutenberg, nessun widget Elementor. Shortcode e basta. Nel 2026. Abbiamo anche iniziato con uno shortcode: questo è il meccanismo WordPress più universale che funziona ovunque. Ma il nostro shortcode è intelligente: accetta parametri per personalizzare l'aspetto. Puoi impostare un tema (chiaro, scuro, trasparente), puoi nascondere il titolo del modulo, puoi impostare un testo personalizzato per il pulsante di invio. E tutto questo senza una sola riga di CSS, tramite gli attributi dello shortcode.

Confronto equo: noi, WPForms, Gravity Forms e CF7

Avevo promesso un confronto onesto, quindi facciamolo senza cenni di marketing. Ogni soluzione ha i suoi punti di forza e non farò finta che il nostro costruttore sia perfetto.

Modulo di contatto 7: gratuito, leggero, testato nel tempo. Se hai bisogno di un modulo semplice senza logica condizionale e senza memorizzare applicazioni, CF7 può gestirlo. Tutti gli sviluppatori WordPress lo sanno, sono state scritte migliaia di guide per questo. Ma non appena il compito diventa un po’ più complicato “nome-e-mail-messaggio”, inizia lo zoo dei plugin. E il costo di questo zoo nel supportare e risolvere i conflitti spesso supera il costo di qualsiasi soluzione a pagamento.

WPForms è un ottimo plugin con un ottimo editor visivo. Il loro drag-and-drop è uno dei migliori sul mercato. Logica condizionale, archiviazione delle applicazioni, integrazione con CRM: è tutto lì. Ma WPForms è un plugin separato che risolve solo il problema dei moduli. Non riconosce il tuo catalogo WooCommerce, non è integrato con il tuo sistema di spedizione e non utilizza il tuo modulo SMTP. Esiste nella sua bolla. E costa $ 199 all'anno per la versione Pro, necessaria per la logica condizionale e il caricamento dei file. In 5 anni: mille dollari solo per i moduli.

Gravity Forms è forse il generatore di moduli più potente per WordPress. Moduli multi-step, calcoli, integrazioni con sistemi di pagamento, Webhook, uno straordinario ecosistema di componenti aggiuntivi. Ma questo potere ha un prezzo, sia in dollari (259 all’anno per una licenza Elite) che in complessità. Gravity Forms può fare tutto, ma configurarlo richiede tempo e competenza. Per i moduli di feedback semplici, è come sparare ai passeri da un cannone.

Il nostro generatore di moduli in COS WP Woo è la via d'oro. Non è destinato a sostituire Gravity Forms in scenari con calcoli complessi o sondaggi in più fasi con centinaia di domande. Ma copre al cento per cento le reali esigenze di un negozio WooCommerce. Moduli di feedback, richieste di selezione, richieste CP, sondaggi sulla soddisfazione, questionari per la registrazione B2B: tutto questo è integrato in pochi minuti in un costruttore visivo. Inoltre, i moduli fanno parte di un'unica piattaforma. Utilizzano il protocollo SMTP comune, sono archiviati in tabelle personalizzate ottimizzate e gestiti dalla stessa interfaccia di tutti gli altri moduli. E non costano soldi extra: sono inclusi nella licenza COS WP Woo.

Lascia che ti faccia un esempio concreto tratto dalla pratica. Il cliente è un distributore di oli industriali. Ha bisogno di tre moduli. Il primo è “Richiedi prezzo” nelle pagine dei prodotti: nome, azienda, telefono, email, elenco a discesa “Volume lotto” (da 20 a 200 litri, da 200 a 1000, da 1000), commento. Il secondo è "Selezione di un analogo" nella pagina del catalogo: tipo di attrezzatura (logica condizionale per campi aggiuntivi), olio attuale (testo), caratteristiche desiderate (caselle di controllo), caricamento di file (TOR o passaporto dell'attrezzatura). Il terzo è “Diventa partner” nella pagina “Cooperazione”: dettagli dell'azienda, TIN (con convalida della durata), regione, volume degli acquisti, caricamento dei documenti costitutivi.

Con Contact Form 7, questo progetto avrebbe richiesto: CF7 + Campi condizionali + Flamingo + Caricamento file + styling = 5 plugin e almeno 3 ore di personalizzazione (inclusa la modifica CSS). Con il plugin WPForms Pro - 1, $ 199 all'anno e circa un'ora di configurazione. Con il nostro builder: 0 plugin aggiuntivi, 0 costi aggiuntivi e circa 40 minuti nel visual builder. Inoltre tutti e tre i moduli sono immediatamente integrati con SMTP, le applicazioni vengono archiviate in un unico database con ricerca ed esportazione, e il gestore le vede nella stessa interfaccia dove gestisce tutto il resto.

Voglio parlare di un altro aspetto che spesso viene trascurato durante il confronto. Prestazione. Contact Form 7 carica i suoi stili e script su ogni pagina del sito, anche se non è presente alcun modulo. Questo è un problema noto che può essere risolto con plugin aggiuntivi (Asset CleanUp, Perfmatters) o modificando manualmente il codice. WPForms carica risorse solo sulle pagine dei moduli, ma il suo pacchetto JavaScript pesa 60-80 KB quando minimizzato. I nostri moduli vengono visualizzati sul server come HTML puro con JavaScript minimo per logica condizionale e convalida. Moduli CSS - 5 KB, JavaScript - 8 KB. E si caricano solo sulle pagine in cui è effettivamente presente lo shortcode del modulo. Per un negozio con 16mila pagine di prodotti, la differenza è evidente: ogni kilobyte in più di CSS e JS viene moltiplicato per migliaia di pagine nella cache, analizzando il tempo nel browser, da Core Web Vitals.

Vorrei menzionare anche la sicurezza. I moduli sono un punto di ingresso per gli aggressori. Iniezioni SQL tramite campi di input, XSS tramite campi di testo, attacchi CSRF tramite sostituzione di moduli, bot spam che inondano migliaia di applicazioni al minuto. Elaboriamo tutti i dati tramite le funzioni di sanificazione di WordPress: sanitize_text_field(), sanitize_email(), wp_kses_post() per i campi HTML. Ogni modulo è protetto da un token nonce. I file caricati vengono controllati in base al tipo MIME e all'estensione: non sarai in grado di caricare un file PHP anche se lo rinomini in .jpg. E se hai attivato il modulo Sicurezza in COS WP Woo, WAF controlla inoltre tutti i dati in entrata per individuare modelli di SQL injection e attacchi XSS. Questa è un'integrazione che non è possibile quando moduli e sicurezza sono plugin diversi di autori diversi.

E l'ultima cosa che voglio dire sul dispositivo tecnico. L'architettura del modulo moduli segue lo stesso modello di tutti gli altri moduli COS WP Woo: servizio PHP (FormService) per la logica aziendale, controller REST (FormController) per l'API, pagina React (FormBuilder) per l'interfaccia. Il servizio è registrato in class-plugin.php, gli endpoint funzionano tramite lo spazio dei nomi wpaic/v1, i dati sono archiviati in tabelle personalizzate. Se hai familiarità con l'architettura del nostro plugin, sai già come funzionano i moduli. In caso contrario, i moduli sono un ottimo punto di ingresso perché mostrano il modello nella sua forma più pura: dalla descrizione JSON del modulo tramite l'API REST al rendering sul front-end.

Quando il nostro costruttore non è sufficiente

Non voglio concludere questo articolo con la nota di marketing "la nostra soluzione è la migliore". Non sarebbe giusto. Esistono scenari per i quali il nostro generatore di moduli non è la scelta migliore.

Se hai bisogno di moduli multi-passo con decine di passaggi, una barra di avanzamento e il salvataggio dei risultati intermedi, dai un'occhiata a Gravity Forms. Lo hanno implementato in modo maturo e affidabile. Se hai bisogno di un'integrazione con un CRM come HubSpot, Salesforce o AmoCRM pronto all'uso, WPForms e Gravity Forms hanno componenti aggiuntivi già pronti, ma dovremo utilizzare Webhook o scrivere un'integrazione personalizzata. Se hai bisogno di moduli di pagamento con integrazione Stripe o PayPal direttamente nel modulo, questo non è il nostro scenario; per questo abbiamo un checkout WooCommerce completo con un modulo di pagamento. Se stai creando un questionario complesso con 100 domande con ramificazione e punteggio, hai bisogno di uno strumento specializzato come Typeform o Google Forms.

Ma se sei il proprietario o l'amministratore di un negozio WooCommerce e hai bisogno di moduli funzionanti per feedback, ticket, richieste CP, sondaggi con logica condizionale, caricamento di file e archiviazione di database, il nostro generatore di moduli lo farà più velocemente, in modo più affidabile ed economico rispetto a qualsiasi combinazione di componenti aggiuntivi CF7 + o un abbonamento annuale a WPForms Pro.

E sai qual è stata per me la prova più convincente che siamo sulla strada giusta? Non metriche tecniche, non il numero di tipologie di campi, non tabelle di confronto con i concorrenti. E quel momento in cui il responsabile del progetto di un cliente, una persona che per tutta la vita ha avuto paura di "entrare nel codice", ha messo insieme in venti minuti un modulo di domanda con logica condizionale, lo ha inserito in tre pagine tramite uno shortcode e il giorno successivo è arrivata la domanda: "Posso creare un altro modulo per un sondaggio? So già a grandi linee come fare". Questo è un vero indicatore della qualità dello strumento: quando una persona non ha bisogno di istruzioni, non ha bisogno di uno sviluppatore e non ha bisogno di cinque plugin per un modulo.

Prova COS WP Woo e costruisci il tuo primo modulo in cinque minuti. Il modulo Moduli è disponibile nella sezione Negozio - Moduli. Trascina e rilascia i campi, imposta le condizioni, inserisci uno shortcode nella pagina e inizia a ricevere applicazioni che sicuramente raggiungeranno il gestore.