Come creare un modulo di preventivo con il modulo di contatto di Divi

Un modulo di preventivo (noto anche come modulo di richiesta di preventivo) è un'ottima soluzione per le piccole imprese che desiderano acquisire contatti qualificati senza il fastidio di rispondere al telefono. Un buon modulo di preventivo può risolvere le uova marce che non sono pronte per il tuo servizio ponendo le giuste domande di qualificazione. Può anche aiutare a individuare le esigenze di un cliente in modo da poter preparare una risposta/offerta efficace e chiudere la vendita una volta che le avrai ricevute al telefono.

Ci sono una serie di ottimi plugin per moduli là fuori dedicati all'elaborazione dei moduli. Ma se stai cercando una soluzione semplice ed efficace per il tuo sito Divi, il modulo di modulo di contatto aggiornato di Divi è proprio ciò di cui hai bisogno.

Oggi ti guiderò attraverso il processo di creazione di un modulo di preventivo semplice ma potente utilizzando la logica condizionale per qualificare meglio i lead. Aggiungerò anche alcune funzionalità di progettazione avanzate utilizzando CSS personalizzati che renderanno il modulo ancora più pulito e leggibile.

Iniziamo.

Implementazione del design con Divi

Costruire la sezione dell'intestazione a schermo intero

Il modulo di preventivo può essere aggiunto a qualsiasi pagina, ma per questo esempio utilizzerò una pagina dedicata solo per il modulo di preventivo.

Per accogliere il visitatore sto utilizzando un'intestazione a schermo intero che obbliga l'utente a fare clic sul pulsante oa scorrere per visualizzare il modulo. Questa è una caratteristica interessante che crea un'esperienza più personale e riscalda l'utente all'idea di scorrere e fare clic prima di vedere il modulo. In alcuni casi, sembra un po' poco invitante e opprimente quando arrivo a una pagina con nient'altro che un lungo modulo da compilare. Questo è facoltativo ovviamente e lo proverei sicuramente per vedere se converte meglio senza l'intestazione a schermo intero.

Utilizzando Visual Builder, aggiungi una sezione a larghezza intera e un modulo di intestazione a larghezza intera nella parte superiore della pagina.

Aggiorna le impostazioni dell'intestazione a larghezza intera come segue:

Opzioni di contenuto

Titolo: [inserire titolo; cerca di essere più personale piuttosto che un titolo noioso come "Quote Form"]
Testo del sottotitolo: [inserire il testo del sottotitolo]

Testo pulsante n. 1: [inserire il testo del pulsante; qualcosa come "mostrami" o "Facciamolo"]
URL pulsante #1: #quote (questo verrà utilizzato per l'ID CSS di ancoraggio che scorrerà fino alla sezione contenente il modulo sottostante)
URL immagine logo: [inserisci immagine logo]
Sovrapposizione sfondo: rgba(0,0,0,0.7)
Immagine di sfondo: [carica la tua immagine di sfondo 1920 x 1080]

Opzioni di progettazione

Orientamento del testo e del logo: al centro
Rendi schermo intero: SI
Mostra pulsante di scorrimento verso il basso: S
Icona: [scegli icona]
Scorri verso il basso Colore icona: #999999
Colore del testo: chiaro
Carattere del titolo: Ubuntu
Dimensione carattere titolo: 36px
Carattere sottotitolo: Ubuntu
Dimensione carattere sottotitolo: 22 px
Usa stili personalizzati per il pulsante uno: S
Dimensione del testo del pulsante uno: 20 px
Colore del testo del pulsante uno: #ffffff
Colore di sfondo del pulsante uno: # e09900;
Pulsante Un colore del bordo: #e09900
Spaziatura di una lettera del pulsante: 1px
Carattere del pulsante uno: Ubuntu

Salva le impostazioni

Costruire il modulo di preventivo

Ora per il modulo di preventivo, utilizzeremo il modulo di contatto di Divi. Per prima cosa dobbiamo aggiungere una sezione regolare con una riga a larghezza intera (1 colonna). Quindi aggiungi un modulo Modulo di contatto alla riga.

Aggiorna le impostazioni del modulo di contatto come segue.

Opzioni di contenuto?

Titolo: [definire un titolo per il modulo di contatto o aggiungere ulteriori istruzioni]
Pulsante Invia testo: Richiedi preventivo
Email: [inserisci l'indirizzo email a cui inviare i messaggi]
Abilita URL di reindirizzamento: S (è facoltativo ma è una buona idea)
URL di reindirizzamento: [inserisci l'URL di reindirizzamento a una pagina di ringraziamento personalizzata]

Opzioni di progettazione

Carattere del titolo: Ubuntu
Dimensione carattere titolo: 30px
Spaziatura tra lettere del titolo: 1px
Carattere del campo modulo: Ubuntu
Dimensione carattere campo modulo: 24 px
Colore testo campo modulo: #e09900
Raggio bordo input: 5px
Usa bordo: S
Colore bordo: #999999
Larghezza bordo: 1px
Usa stili personalizzati per il pulsante: S
Dimensione del testo del pulsante: 24 px
Colore del testo del pulsante: #ffffff
Colore di sfondo del pulsante: # e09900;
Colore bordo pulsante: #e09900
Spaziatura tra le lettere dei pulsanti: 1px
Carattere del pulsante: Ubuntu

Opzioni avanzate (CSS personalizzato)

Campo Captcha:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Testo del captcha:

Font-size: 24px

Salva le impostazioni

Aggiunta dei campi del modulo preventivo

Non quello che hai le tue impostazioni in atto, è il momento di aggiungere i nostri elementi del modulo. Per impostazione predefinita, il modulo contiene i campi "nome", "email" e "messaggio". È possibile eliminare "messaggio".

Campo aziendale

Sotto il campo "e-mail" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : azienda
Titolo : Qual è il nome della tua azienda?
Campo obbligatorio : SI

Campo di servizio

Sotto il campo "azienda" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : servizio
Titolo : Come possiamo aiutarti oggi?
Tipo : pulsanti di opzione
Opzioni :

• Produzione di siti web
• Sviluppo di app
• Direzione artistica
• Creazione video

Campo obbligatorio : SI

Campo scopo artistico

Sotto il campo "servizio" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : art_purpose
Titolo : Di che tipo di direzione artistica hai bisogno?
Tipo : pulsanti di opzione
Opzioni :

• Disegno grafico
• Pubblicità
• marchio
• Confezione

Campo obbligatorio : SI
Abilita logica condizionale
Relazione : QUALSIASI
Regole : come possiamo aiutarti oggi? > Uguale > Direzione artistica

Nota : questa logica mostra questo campo ogni volta che un utente seleziona "Direzione artistica" dalla domanda precedente.

Campo Scopo Web

Sotto il campo "art_purpose" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : scopo_web
Titolo : Di che tipo di sito web hai bisogno?
Tipo : pulsanti di opzione
Opzioni :

• E-Commerce
• Blog
• Applicazione Web
• Pagina di destinazione

Campo obbligatorio : SI
Abilita logica condizionale
Relazione : QUALSIASI
Regole : come possiamo aiutarti oggi? > Equals > Produzione di siti web

Nota : questa logica mostra questo campo ogni volta che un utente seleziona "Produzione Web" dalla domanda precedente.

Campo video

Sotto il campo "web_purpose" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : video
Titolo : Su quale dispositivo vuoi che venga mostrato il video?
Tipo : pulsanti di opzione
Opzioni :

• Cellulare
• Tavoletta
• Monitor o TV
• Proiettore

Campo obbligatorio : SI
Abilita logica condizionale
Relazione : QUALSIASI
Regole : come possiamo aiutarti oggi? > Uguale > Creazione video

Nota : questa logica mostra questo campo ogni volta che un utente seleziona "Creazione video" dalla domanda precedente.

Campo piattaforma app

Sotto il campo "video" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : app_platform
Titolo : Su quale piattaforma vuoi che venga sviluppata l'app?
Tipo : pulsanti di opzione
Opzioni :

• iOS
• Android
• finestre
• Mora

Campo obbligatorio : SI
Abilita logica condizionale
Relazione : QUALSIASI
Regole : come possiamo aiutarti oggi? > Uguale > Sviluppo di app

Nota : questa logica mostra questo campo ogni volta che un utente seleziona "Sviluppo app" dalla domanda precedente.

Campo di bilancio

Sotto il campo "app_platform" aggiungi un nuovo campo e aggiorna le impostazioni in Opzioni contenuto come segue:

ID campo : budget
Titolo : Se hai un budget in mente, faccelo sapere.
Tipo : pulsanti di opzione
Opzioni :

• Meno di $1k
• Circa $ 5k
• Maggiore di $ 10k

Campo obbligatorio : NO
Abilita logica condizionale
Relazione : QUALSIASI
Regole :
Come possiamo aiutarvi oggi? > Uguale > Sviluppo di app
Come possiamo aiutarvi oggi? > Uguale > Creazione video
Come possiamo aiutarvi oggi? > Equals > Produzione di siti web
Come possiamo aiutarvi oggi? > Uguale > Direzione artistica

Salva le impostazioni

Aggiungi l'ID CSS di ancoraggio

Torna indietro e modifica le impostazioni della sezione per la sezione contenente il modulo. Nella scheda Avanzate, inserisci l'ID CSS "citazione".

Questo corrisponderà all'URL del pulsante nell'intestazione a larghezza intera in modo che il pulsante scorra fino alla sezione quando viene cliccato.

Imposta una larghezza personalizzata per la colonna del modulo preventivo

Quindi, vai su Impostazioni riga per la riga contenente il modulo preventivo e aggiorna le Opzioni di progettazione come segue:

Usa larghezza personalizzata: S
Larghezza personalizzata: 556 px

Ulteriori personalizzazioni del design

Per questo modulo di preventivo, stiamo utilizzando i pulsanti di opzione, una volta che si fa clic su un pulsante di opzione/cerchio, il colore del riempimento del cerchio corrisponde al colore dell'accento del tema del tuo sito in Personalizzatore tema> Impostazioni generali> Impostazioni layout>

Se non vuoi cambiare il colore dell'accento del tema in tutto il sito per il colore di riempimento del pulsante di opzione, vai su Impostazioni pagina e inserisci il seguente CSS personalizzato nella scheda CSS:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

Inoltre, puoi aggiungere il seguente CSS per personalizzare il testo del titolo per le domande contenenti pulsanti di opzione:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

Infine, puoi aggiungere un bordo con stile agli elenchi dei pulsanti di opzione per abbinare lo stile del modulo con il seguente CSS:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

Questo è tutto.

Controlla il risultato finale:

Pensieri finali

Questo modulo di preventivo è un esempio semplificato di cosa puoi fare con il modulo di preventivo. Per il tuo modulo di preventivo, potresti voler aggiungere un campo aggiuntivo come "Numero di telefono" in modo da poter richiamare i tuoi contatti. Potresti anche utilizzare una logica più condizionale per ottenere informazioni più specifiche sulle esigenze del cliente.

Come ho detto all'inizio dell'articolo, ci sono plugin più avanzati là fuori. Ci sono intere aziende specializzate in solide soluzioni di moduli di contatto per un motivo. Spero che questo post sia stato utile nel mostrare come il modulo modulo di contatto sia più che in grado di gestire la maggior parte delle esigenze del modulo di contatto standard.