Un utente ha chiesto
Categoria: Bootstrap for Contact Form 7 di WordPress
Domanda: Bootstrap per Contact Form 7 che crea caselle di avviso vuote

Con Contact Form 7 e Bootstrap per Contact Form 7 attivi, viene visualizzato un div “avviso” vuoto dove il [response] viene aggiunto lo shortcode.

Apparentemente il plugin Bootstrap per Contact Form 7 non distingue più tra i diversi tipi di risposta, né quando sono attivi o meno.

Qualcuno sa come risolvere questo problema?

Ho fatto una soluzione CSS hacker, ma sarebbe fantastico se fosse disponibile una vera soluzione! La mia soluzione alternativa non distingue tra i tipi di messaggio.

Ecco la mia soluzione. Nota che usa il colore giallo per tutti i messaggi, anche per il successo:


.wpcf7-form .wpcf7-response-output.alert {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.wpcf7-form .wpcf7-response-output:empty {
	display: none;
}

  • (@xsonic)

    L’ho notato anch’io.

    Ma puoi semplicemente usare:

    .wpcf7-response-output {
        display: none;
    }

    CF7 si applicherà style="display: block" al div, quindi sovrascriverà sopra il CSS.

    Un’altra domanda:

    Le notifiche di errore sul campo funzionano per te?

    (@hommealone)

    Ciao @xsonic

    Un’altra opzione è la tua soluzione CSS. Non ottengo alcun colore di sfondo nel messaggio di avviso con il tuo codice più semplice. Anche tu?

    D:

    Le notifiche di errore sul campo funzionano per te?

    Hai ragione. Nemmeno io li capisco.

    (@xsonic)

    Non ottengo alcun colore di sfondo nel messaggio di avviso con il tuo codice più semplice. Anche tu?

    Oh sì va bene. Ho dimenticato di aver corretto anche questo nel mio script. Ho già inviato una richiesta pull con le modifiche necessarie, ma lo sviluppatore del plugin sembra non rispondere: https://github.com/felixarntz/bootstrap-for-contact-form-7/pull/62

    Hai ragione. Nemmeno io li capisco.

    Così ho pensato. Questo plugin è attualmente inutilizzabile, non so se i manutentori lo abbiano abbandonato.

    Per una soluzione rapida puoi usare questo https://pastebin.com/aHvRpuVd e incollalo nel file assets/dist/js/scripts.min.js

    (@hommealone)

    @xsonic – Grazie per aver condiviso questo pezzo di codice.

    Hai scritto:

    Non so se i manutentori hanno rinunciato.

    Vedi: https://wordpress.org/support/topic/status-of-bootstrap-for-contact-form-7/

    non ho speranza.

    (@hommealone)

    @xsonic – La “correzione” risolve effettivamente i problemi del plug-in? Hai menzionato la tua richiesta pull github. Se questo funziona come un aggiornamento temporaneo, forse potresti menzionarlo qui, sul thread permanente dell’autore che ho iniziato:

    https://wordpress.org/support/topic/status-of-bootstrap-for-contact-form-7/

    Sarebbe bello se Felix potesse applicare almeno un altro aggiornamento finché non trova qualcuno che si occupi del plugin.

    (@claumiga)

    @xsonic – Grazie, il tuo codice funziona, almeno per ora

    (@hommealone)

    @xsonic
    Ho provato la tua correzione. Grazie per averlo pubblicato.

    Giusto per essere chiari, anche a te vengono sempre visualizzati elementi di avviso vuoti (con il colore di sfondo arancione dell’avviso di avviso), vero? (Va bene, è facile nascondere gli avvisi vuoti con una semplice regola CSS.)

    Inoltre, la tua versione non ha lo scopo di riattivare la nota di errore nel campo specifico con un errore, vero? Ancora non li capisco.

    (@xsonic)

    @hommealone Sì, devi anche aggiungere il CSS (la mia patch ha appena corretto il lato JS):

    .wpcf7-response-output {
        display: none;
    }

    Inoltre, la tua versione non ha lo scopo di riattivare la nota di errore nel campo specifico con un errore, vero? Ancora non li capisco.

    Ah scusa ho dimenticato di postare che devi cambiare modifications.php, troppo.

    Ecco la richiesta di sorteggio:

    https://github.com/felixarntz/bootstrap-for-contact-form-7/pull/62/commits/48d4459b495ffb1c57127b541b3a034d2579bf6b#diff-5cc774cd138abd6f79ae7413bdf16c48

    Pastebin dell’intero file qui:

    https://pastebin.com/1m8BmwyE

    Fammi sapere se questo funziona per te.

    (@hommealone)

    @xsonic
    Mi dispiace non aver potuto rispondere prima.

    Dopo aver applicato la tua modifica modifications.php file, le risposte ora sono normali risposte CF7, penso. Ma ancora nessun messaggio di errore specifico di seguito, ad esempio un campo “richiesto” vuoto.

    Ricevi questo tipo di notifica di errore specifica del contesto?

    (@ comonista34)

    @hommealone
    È lo stesso con me. Vedo i messaggi di errore, ma non hai i tipici colori Bootstrap, perché oltre alla classe “avviso” ad esempio manca la classe “allarme”.

    (@ comonista34)

    *facepalm* sono un idiota

    Non ho modificato “scripts.min.js”.

    Puoi almeno salvare solo il contenuto di scripts.js di @xsonic al suo interno. Quindi i colori sono tornati!

    Forse questo aiuta qualcuno.

    (@hommealone)

    @comonist34

    Strano, ma non riesco ancora a vedere quello che vedi tu, a quanto pare. Ho sostituito la versione @xsonic di entrambi scripts.min.js (che non è minimizzato ma non ha importanza per i nostri scopi) e modifications.php.

    Con tutte le modifiche ai file plug-in suggerite da @xsonic, ora vedo questi messaggi come il modo in cui CF7 li genera, senza stile bootstrap. In questo modo ottengono colori diversi per messaggi diversi in base al normale comportamento di CF7. Non male come soluzione. Puoi modellarli ulteriormente usando i CSS se necessario.

    Inoltre, non ricevo messaggi di suggerimento di campo non validi. Le stai ricevendo adesso?

    A proposito, sebbene non visualizzi messaggi di suggerimento per campi specifici che sono stati compilati in modo errato (o non compilati, per i campi obbligatori) – almeno per me !! – è possibile utilizzare CSS con le informazioni fornite da CF7 per evidenziare i campi che richiedono particolare attenzione e aggiungere un messaggio di convalida specifico del campo per svuotare i campi obbligatori. Fammi sapere se desideri il mio CSS (e alcuni javascript per i campi obbligatori vuoti) e posso pubblicarlo. Tuttavia…

    Non è chiaro quando non vale la pena modificare e creare soluzioni alternative per questo plugin, piuttosto che abbandonarlo e aggiungere semplicemente alcuni dei propri stili e js all’output CF7. Spero davvero che l’autore del plugin ritenga opportuno aggiornarlo ancora una volta, fino a quando non trova qualcun altro che se ne occupi!

    Domanda per @xsonic e @comonist34

    Dopo aver sostituito i due file modificati con @xsonic, ora funziona davvero come prima, senza ulteriori modifiche?

    E se è così… @xsonic – considereresti di vedere se l’autore ti permetterebbe di prendere in consegna il plugin, o di essere un contributore, anche temporaneamente forse? Almeno sembra che tu ne abbia una versione funzionante ora. È quindi possibile eseguire un aggiornamento.

    (@hommealone)

    Peccato, @xsonic e @comonist34, penso che ora funzioni.

    Se qualcuno è interessato, ecco il CSS che uso per far sembrare le cose e funzionare bene:

    .wpcf7-response-output:empty {
    	display: none;
    }
    .wpcf7-response-output.alert {
    	background-color: aliceblue;
    	border-radius: 5px;
    	border: 1px solid silver;
    }
    .wpcf7-form.invalid .wpcf7-response-output.alert {
    	background-color: moccasin;
    }
    

    (Con le modifiche apportate a modifications.php e assets/scripts.min.js che @xsonic ha fornito!)

    (@ comonista34)

    @hommealone Grazie.
    proverò più tardi.

    Il codice di Github non ha risolto completamente il problema per me.

    Penso che ci siano ancora parti in scripts.js / scripts.min.js che non funzionano. Ad esempio, c’è una parte che dovrebbe nascondere il messaggio, se è vuota.
    CSS è una soluzione alternativa. Ma l’obiettivo principale dovrebbe essere quello di utilizzare classi bootstrap native e nessun CSS aggiuntivo.

    Al momento non ho tempo per approfondire.

    (@hommealone)

    @comonist34

    Va bene. Sì, le cose @xsonic non funzionano al 100% e tutte queste cose sono soluzioni alternative fino a quando l’autore del plug-in non esegue un vero aggiornamento (si spera, per favore!) O trova qualcuno che si occupi del plug-in. Ho dozzine di moduli in totale, su dozzine di siti creati utilizzando questo plugin, quindi sono felice di utilizzare una soluzione alternativa per ora e continuare a sperare in una soluzione reale, piuttosto che ricodificare tutti questi moduli da zero.

    Per favore, aggiungi il tuo supporto per fargli lavorare sodo per trovare un nuovo autore di plugin, o almeno per fare un aggiornamento aggiuntivo, qui:

    https://wordpress.org/support/topic/request-for-maintenance/

    Durante questo periodo, ho aggiornato un po’ la soluzione CSS (messaggio verde di successo e suggerimenti rossi di errore):

    .wpcf7-response-output:empty {
    	display: none;
    }
    .wpcf7-response-output.alert {
    	background-color: #d9ffd9; /* or aliceblue if you prefer a blue success alert */
    	border-radius: 5px;
    	border: 1px solid silver;
    }
    .wpcf7-form.invalid .wpcf7-response-output.alert {
    	background-color: moccasin;
    }
    .wpcf7-form.invalid div.form-group.has-error input,
    .wpcf7-form.invalid div.form-group.has-error textarea {
    	border-color: #a71d2a;
    }
    form.wpcf7-form .form-group span.help-block.wpcf7-not-valid-tip {
    	color: #a71d2a;
    	font-size: 1rem; /* adjust if you need to */
    	font-style: italic; /* just my preference */
    }
    

    Questo risolve le lacune che esistono ancora nelle impostazioni di @xsonic.

Hai risolto il tuo problema?

0 / 0

Lascia un commento 0

Il tuo indirizzo email non sarà pubblicato. Required fields are marked *