ElementsKit viene fornito con il widget Contact Form 7 che si aggiunge alle funzionalità del plug-in per la creazione di moduli. Puoi personalizzare gli stili del modulo di contatto 7 con Elementor utilizzando al massimo le funzionalità del generatore di pagine.

Leggi questa documentazione per scoprire come creare e personalizzare il modulo utilizzando Contact Form 7 con Elementor.

Prerequisito: #

Questo widget è un componente aggiuntivo per Contact Form 7.

Pertanto è necessario avere Plug-in Modulo di contatto 7 installato sul tuo sito WordPress.

Passaggio 1: crea un modulo con il modulo di contatto 7 #

1. Vai a Contatto > Aggiungi nuovo.
2. Inserisci un nome per il modulo.
3. Configura le impostazioni e gli attributi del modulo.
4. Clicca sul Salva pulsante.

Passaggio 2: ottieni il modulo di contatto 7 in Elementor #

Per ottenere il modulo di contatto 7 su Elementor, abilita innanzitutto il widget ElementsKit Contact Form 7, quindi apri l'editor di Elementor e trascina e rilascia il widget nell'area di progettazione.

Abilita il widget Modulo di contatto 7 #

Per abilitare il widget Ticker contenuto:

1. Navigare verso ElementsKit > Widget dalla dashboard di WordPress.
2. Trovare il Modulo di contatto 7 widget dall'elenco e abilitare il widget.
3. Clicca sul SALVARE LE MODIFICHE.

Trascina e rilascia il widget #

Successivamente, trascina e rilascia ElementsKit Modulo di contatto 7 widget nell'editor di Elementor.

Passaggio 3: seleziona un modulo da modificare con Elementor #

In questo passaggio puoi selezionare il modulo che desideri modificare. Per questo, puoi selezionare il modulo dall'elenco a discesa.

In Contenuto > Modulo di contatto 7 > Stile troverai l'elenco dei moduli creati con Contact Form 7. Seleziona un modulo e procedi al passaggio successivo.

Passaggio 4: personalizza il modulo di contatto 7 con Elementor #

Ora puoi personalizzare gli stili delle etichette, del campo di input e del pulsante del modulo di contatto 7 con Elementor.

Etichetta #

1. Tipografia: Imposta la tipografia per il testo dell'etichetta.
2. Colore: Scegli un testo a colori per il testo dell'etichetta.
3. Margine: Regola il margine per l'etichetta del campo modulo.
4. Suggerimento: Puoi anche modificare la tipografia e il colore del segnaposto.

Ingresso #

1. Imbottitura: Regola il riempimento del campo di input.
2. Larghezza: È possibile regolare la larghezza del campo di input.
3. Altezza: È possibile modificare l'altezza del campo di input.
4. Margine inferiore: Modificare il margine nella parte inferiore del campo di input.

5. Altezza dell'area di testo: Per il campo textarea lungo, puoi modificarne l'altezza.
6. Imbottitura dell'area di testo: Puoi anche modificare il riempimento dell'area di testo.

7. Tipo di sfondo: Scegli un tipo di colore di sfondo (colore classico o sfumato).
8. Colore: Scegli un colore di sfondo per il campo di input.
9. Raggio del confine: Imposta il raggio del bordo per il campo di input.
10. Tipo di bordo: Seleziona il tipo di bordo del campo di input.
11. Ombra della scatola: È possibile impostare l'ombra della casella per il campo di input.

È possibile impostare questi attributi individualmente per Normale, Passa il mouse, E Modalità di messa a fuoco.

12. Tipografia: Imposta la tipografia per il testo di input.
13. Colore del testo: Scegli un colore per il testo di input.
14. Dimensione carattere segnaposto: Regola la dimensione del carattere del segnaposto.
15. Colore segnaposto: Scegli un colore per il testo segnaposto.