I moduli di pagamento eliminano la difficoltà di accettare pagamenti online con Stripe e PayPal. Accetta pagamenti e donazioni in pochi minuti. Vendi prodotti, servizi, corsi online e molto altro ancora.
Utilizzando la sezione Pagamenti e Donazioni, puoi creare facilmente una pagina per pagamenti o donazioni sul tuo sito web , oppure una pagina per ricevere donazioni o pagamenti una tantum.
Ti dà anche la possibilità di configurare i campi del modulo che desideri nel tuo modulo e ti consente di specificare un indirizzo e-mail a cui inviare via e-mail i dati del modulo raccolti.
Tutti i dati dei moduli vengono memorizzati e sono accessibili nella sezione Impostazioni > Invii moduli dello studio. Scopri di più.
Tutti i dati inviati tramite il modulo di contatto verranno inoltre inoltrati all'ID e-mail specificato nelle impostazioni del modulo di contatto. Tuo indirizzo email dell'account viene considerato predefinito.
Controlla anche: Modifica l'indirizzo e-mail dell'account.
In questo articolo:
- Aggiungi sezione a una pagina
- Contenuti
- disposizione
- Style
- Impostazioni profilo
- notifica per email
- Controlla pagamenti e metodi di pagamento
- Esempio dal vivo
Aggiungi una sezione per pagamenti e donazioni
- È possibile aggiungere una sezione a una pagina. Puoi aggiungere una sezione a una pagina già esistente oppure crea una nuova pagina all'interno del tuo sito web.
- Sulla tua pagina, Fare clic sul blu + icona per aggiungere a Nuova sezione alla tua pagina.
- Ora vedrai il categorie di sezione sul lato sinistro.
- Scegliere il Moduli (1) categoria e clicca su Pagamento e donazioni scheda (2) da cui è possibile scegliere diversi layout di Pagamento e donazioni (3) sezione.
- Scegli qualsiasi layout di sezione e fai clic su di esso per aggiungerlo alla tua pagina.
Gestisci modulo di pagamento
- Fare clic su Modifica contenuto Pulsante (1).
- Avrai la possibilità di gestire Contenuti (2), disposizione (3), Style (4), Impostazioni profilo (5), e Notifiche e-mail (6).
- Colpire Salva (7) per applicare le modifiche al modulo.
Contenuti
Gestisci campi modulo
In Gestisci campi modulo, puoi specificare i campi che vuoi che i visitatori compilino in questo modulo.
- Fare clic su Aggiungi nuovo campo (1) pulsante per aggiungere più campi al modulo.
- Modifica o Elimina (2) un campo già aggiunto.
- Drag and Drop (3) i campi per cambiare la loro sequenza nel modulo.
- Impostare il Etichetta del pulsante di invito all'azione (4) per il modulo.
- Cliccando sul + Aggiungi campo si aprirà un pop-up da cui è possibile scegliere i campi del modulo.
- Cattura il Nome del tuo cliente.
- Cattura qualsiasi piccola informazione attraverso il testo breve campo.
- Cattura qualsiasi informazione/messaggio elaborato attraverso il file Testo lungo campo.
- Cattura il email del tuo cliente.
- Cattura qualsiasi informazioni numeriche dal tuo cliente
- Aggiungi servizi tra cui scegliere in a discesa modo.
- Selezione singola: Aggiungi una selezione radio per i tuoi servizi.
- Selezione multipla: Aggiungi un campo casella di controllo per selezioni multiple.
- Aggiungere un date picker in modo che i tuoi clienti possano scegliere una data per qualsiasi evento.
- Aggiungere un linea tra i campi del modulo.
- Cattura il indirizzo del tuo cliente.
- Cattura il sito web ufficiale del tuo cliente.
- Cattura il telefono numero del tuo cliente.
- Aggiungere un tempo campo in modo che i tuoi clienti possano specificare l'ora dell'evento da soli.
- Aggiungere un separatore tra i campi del modulo.
- Migliori campo del consenso l'opzione può essere utilizzata per prendere le autorizzazioni per le newsletter, accettando la privacy e i termini di utilizzo.
- Prendi le recensioni dei clienti utilizzando il stella scala, scala numericae scala di smiley.
Note:
I campi email e importo sono campi obbligatori e non possono essere cancellati.
Stile modulo
- Mostra il modulo come popup – Abilita questa opzione per aprire il modulo in una finestra popup facendo clic sul pulsante di invito all'azione.
- Etichetta del pulsante di invito all'azione – Imposta il Etichetta del pulsante di invito all'azione per il modulo.
- Popup del titolo – Specificare il modulo Titolo, se del caso.
- Carica o elimina (1) l'immagine del modulo per il modulo.
- Aggiungere un Titolo (2)e Descrizione (3) per il modulo. Prima di aggiungere la descrizione, controlla questo articolo.
Titolo
- Titolo – Specificare il Titolo della sezione (1) per la sezione Modulo di pagamento.
- Pulsanti e icone – Scopri di più su Pulsanti e icone (2).
Gestire l'Impaginazione
- Clicca sul Modifica contenuto Pulsante (1).
- Scegliere il disposizione (2) scheda.
- Seleziona il disposizione per la tua sezione (3) e Salva (4) le modifiche.
Opzioni di stile
- Fare clic su Modifica contenuto (1) pulsante.
- Scegliere il Style (2) scheda.
- Cambia lo stile per gli elementi della sezione e Salva (3) le tue modifiche.
La cura dello stile del modulo è un aspetto importante per creare un'esperienza visivamente accattivante e intuitiva.
Avrai più opzioni di stile per la sezione:
- Campi modulo
- allineamento
- Testo
- Spaziatura
- Titolo
- Immagini
- Bordo dell'immagine
- Pulsante popup
- Pulsante Modulo
- Pulsanti del titolo
- Icone social del titolo
Campi modulo
Pixpa consente Tu a completamente personalizzare , il aspetto of Your modulo campi. Alcuni degli styling Opzioni applica a contro tutti i ingresso campi in Your Pagamento Modulo and dare Tu maggiore di controllo ancora come Your modulo sguardi and feels on Your di COSM
- Forma: Scegli la forma dei campi di input, ad esempio rettangolare, arrotondata, a pillola o testo, in base all'estetica del tuo sito web.
- Fill: Abilita questa opzione per applicare un colore di riempimento per lo sfondo ai campi del modulo.
- Colore base: Imposta il colore di sfondo dei campi quando è abilitata l'opzione di riempimento.
- Outline: Attiva o disattiva il bordo (contorno) per ciascun campo.
- Colore contorno: Scegli il colore del bordo del campo quando il contorno è abilitato.
- Colore del testo del campo: Imposta il colore del testo digitato dagli utenti nei campi del modulo.
- Altezza: Regola l'altezza dei tuoi campi scegliendo tra: Piccola, Media, Grande o Extra Large.
- etichette: Scegli se le etichette dei campi modulo devono essere visualizzate all'interno o all'esterno del campo.
- Colore dell'etichetta: Definisce il colore delle etichette quando vengono posizionate all'esterno del campo.
- Etichetta interna Colore: Imposta il colore per le etichette inserite all'interno del campo (utile per le etichette in stile segnaposto).
- Spaziatura tra i campi: Utilizzare il cursore per impostare la spaziatura verticale (in pixel) tra ciascun campo del modulo.
allineamento
- Gestisci l'allineamento del contenuto del modulo orizzontalmente da Allineamento orizzontale (1).
- Gestisci l'allineamento del contenuto del modulo verticalmente da Allineamento verticale (2).
Testo
- Clicca sul Cambia stile di testo (1) pulsante per visitare il Design sezione e gestire le dimensioni e gli stili dei caratteri.
- specificare la Titolo (2) stile del carattere del modulo.
- specificare la Descrizione (3) stile del carattere del modulo.
Spaziatura
- specificare la Larghezza immagine (1) dell'immagine nel modulo in percentuale.
- specificare la Spazio tra immagine e testo (3) in percentuale.
- specificare la Spazio sotto il titolo (4) in percentuale.
Titolo
- Allinea orizzontalmente il testo del titolo della sezione. Puoi impostarlo su Sinistra, Centro e Destra.
- Abilita/Disabilita il Divider tra il titolo della sezione e il contenuto della sezione.
- Impostare il spessore del divisore (in px).
- specificare la Colore del divisore dal selettore colori.
- Scegli un Stile divisorio dal menu a discesa.
- Impostare il Larghezza del titolo per definire la larghezza del titolo della sezione, partendo da un minimo del 50%.
- specificare la Spazio sotto il titolo all'interno della sezione (in px).
Immagini
- Ritaglio immagine: Scegliere il Imago Ritaglia per le voci dell'elenco. È possibile impostare le immagini come Quadrato, Cerchio, Orizzontale, Ritratto e Originale.
- Raggio dell'angolo: Scegliere di avere un raggio d'angolo comune o un raggio d'angolo diverso per ciascun lato degli elementi dell'elenco e impostare un numero (in px) per il Craggio orner delle immagini delle voci dell'elenco. Vedi qui per saperne di più .
- Animazione al passaggio del mouse: Scegli Animare l'immagine della sezione al passaggio del mouse abilitando l'interruttore. Controlla questa funzione su una pagina live.
- Stile di animazione: Scegli un Stile di animazione per l'immagine quando il cursore passa sopra di essa.
- Maschera di forma: Abilita questo interruttore per applicare una maschera di forma alle immagini nella sezione Elenco immagini. Una volta abilitato, la forma selezionata taglierà visivamente l'immagine in quella forma.
- Seleziona forma: Scegli tra varie forme predefinite da applicare alle tue immagini. Ciò ti consente di dare uno stile creativo al tuo contenuto visualizzando le immagini in forme uniche come arrotondate, a diamante, a goccia, ecc.
Consiglio
Utilizzando il campo "raggio d'angolo" , è possibile creare diverse forme per le immagini degli elementi dell'elenco. Se si specifica 500 px, le immagini verranno visualizzate in forma circolare.
- Nel caso in cui tu abbia scelto gli angoli divisi, puoi impostare un raggio dell'angolo diverso per ogni angolo.
Bordo dell'immagine
- Abilita/Disabilita bordo attorno all'immagine spostando l'interruttore.
- Scegli di avere a confine comune su tutti i lati dell'immagine oppure puoi specificare il confini separatamente per ogni lato.
- specificare la larghezza del confine. Se è impostato su 0, il bordo non verrà visualizzato. Hai anche la possibilità di impostare la larghezza del bordo individualmente per ciascun lato dell'immagine.
- Seleziona il Colore bordo dal selettore colori.
- Seleziona un preferito Border Style dal menu a discesa.
- Determina il larghezza del bordo per dispositivi mobili dispositivi, allineandolo alla larghezza scelta per il desktop.
Pulsante popup
Queste opzioni di stile sono per il pulsante popup, in cui si aprirà il modulo di pagamento quando si fa clic sul pulsante.
- Dimensione pulsante – Seleziona la dimensione del pulsante tra le opzioni: piccola, media o grande.
- Spazio sopra il pulsante – Regola la spaziatura verticale sopra il pulsante (in percentuale).
- Stile pulsante – Scegli lo stile del pulsante, ad esempio predefinito o personalizzato.
- Colore pulsante – Seleziona lo stile colore per il pulsante. Le opzioni includono Predefinito, Inverti o Personalizzato.
- Testo del pulsante – Personalizza il colore del testo per il pulsante.
- Sfondo del pulsante – Seleziona il colore di sfondo del pulsante.
Pulsante Modulo
Queste impostazioni consentono di personalizzare il pulsante di invio del modulo in modo che corrisponda al design e al layout della pagina.
- Dimensione pulsante – Seleziona la dimensione del pulsante (Piccolo, Medio o Grande).
- Spazio sopra il pulsante – Regola la spaziatura verticale sopra il pulsante (specificata in percentuale).
- Stile pulsante – Scegli lo stile generale del pulsante, ad esempio Predefinito o Personalizzato.
- Colore pulsante – Imposta lo stile del colore del pulsante. Le opzioni includono Predefinito, Inverti o Personalizzato.
- Testo del pulsante – Personalizza il colore del testo visualizzato sul pulsante.
- Sfondo del pulsante – Seleziona un colore di sfondo per il pulsante.
- Allineamento pulsanti – Scegli l'allineamento del pulsante (sinistra, centro o destra).
- Larghezza del pulsante – Regola la larghezza del pulsante. Le opzioni includono Predefinito, Grande, Extra-Grande o Larghezza intera.
Pulsanti del titolo
Queste impostazioni controllano l'aspetto e la spaziatura dei pulsanti posizionati con il titolo della sezione.
- Dimensione pulsante – Seleziona la dimensione complessiva dei pulsanti (Piccolo, Medio o Grande).
- Spazio tra i pulsanti – Regola la spaziatura tra più pulsanti (misurata in vw).
- Spazio sopra i pulsanti – Imposta la spaziatura verticale sopra i pulsanti (misurata in percentuale).
- Larghezza del pulsante – Scegli la larghezza dei pulsanti. Le opzioni includono Predefinito, Grande, Extra-grande e Larghezza intera.
- Dimensione del collegamento di testo – Specificare la dimensione del carattere dei collegamenti di testo associati ai pulsanti (misurata in px).
- Dimensione del pulsante immagine – Regola le dimensioni dei pulsanti basati su immagini (misurate in px).
Icone social del titolo
Visualizza e personalizza le icone di condivisione social nel modulo.
- Dimensione dell'icona – Regola la dimensione delle icone social (misurata in px).
- Tipo di icona – Scegli lo stile delle icone, ad esempio Classico, Solido o Contorno.
- Colore icona – Seleziona il colore per le icone. Le opzioni includono Testo del link, Personalizzato o Colore del marchio (colore originale della piattaforma social).
- Colore di sfondo dell'icona – Imposta un colore di sfondo personalizzato per le icone per migliorarne la visibilità e lo stile.
Impostazioni profilo
- Clicca sul Modifica contenuto Pulsante (1).
- Personalizza le impostazioni del modulo da Impostazioni profilo (2) scheda e Salva (3) le tue modifiche.
Nome del modulo
- Inserisci un nome per identificare il modulo di pagamento in Pixpa Studio. Questo nome non è visibile ai visitatori del sito web.
Metodo di pagamento
- È possibile aggiornare i metodi di pagamento per il modulo.
- Puoi scegliere tra Paypal e Stripe. I clienti indiani possono anche aggiungere Razorpay e PayUMoney Scopri di più.
Note:
È possibile collegare a un modulo un solo metodo di pagamento alla volta.
Azione post invio
Come azione successiva all'invio, puoi scegliere di mostrare un messaggio di successo (1) o di reindirizzare a un URL (2).
In caso di visualizzazione del messaggio di successo (1):
- specificare la Messaggio di avvenuta transazione (2) che viene visualizzato dopo che l'utente ha inviato il modulo.
- Puoi anche aggiungere qualsiasi script nel file successo post-pagamento HTML (3) scatola.
- In caso di Rindirizzare all'URLÈ possibile specificare qualsiasi pagina interna/esterna facendo clic sull'icona delle impostazioni (⚙️). Vedi qui per saperne di più .
Sincronizza ed esporta i dati dei moduli
- Invia i dati del modulo a Make.com. Scopri di più.
- Invia i dati del modulo a Zapier.com. Scopri di più.
- Esporta i dati del modulo come file CSV. Scopri di più.
notifica per email
Da qui, puoi personalizzare l'oggetto dell'email per le notifiche che ricevi come proprietario di un sito web in seguito all'invio di un modulo riuscito. Inoltre, puoi personalizzare l'email di successo inviata agli utenti o ai clienti dopo che hanno inviato il modulo ed effettuato un pagamento.
- Attivare la Invia un'e-mail al proprietario del sito web Opzione per ricevere notifiche via email ogni volta che viene inviato un modulo di pagamento.
- Nel Campo tematico, specificare l'oggetto dell'e-mail di invio del modulo di pagamento. È possibile utilizzare anche {SITO WEB} variabile per includere automaticamente il nome del tuo sito web nell'oggetto. Questo è particolarmente utile se gestisci più siti web.
- Nel Campo emailInserisci fino a 3 indirizzi email ai quali desideri ricevere le notifiche relative al modulo di pagamento.
- Abilita/Disabilita il successo E-mail al cliente opzione.
- specificare la Oggetto dell'e-mail di successo.
- Aggiungi un corpo dell'email all'email di conferma. È possibile aggiungere le variabili nel corpo dell'email che verranno acquisite e inviate nell'email {TRANSACTION_ID}, {AMOUNT} e {NAME}.
Note:
L'invio di email ai clienti è una funzionalità premium disponibile solo nei piani Professional e Advanced . Scopri di più.
Controlla i pagamenti e aggiungi il metodo di pagamento
- Vai Pagamenti e Donazioni (1) .
- Qui puoi visualizzare tutti i pagamenti che hai ricevuto.
- Controlla il data, importo ricevuto ed email (2) del pagamento.
- Fare clic su qualsiasi modulo di invio (3) per visualizzare i dettagli della transazione del pagamento.
- Controlla i dettagli della transazione come ID transazione, nome, metodo di pagamento utilizzato e ID transazione del metodo di pagamento dal cassetto di destra.
- Esporta tutti i dati di pagamento in a Formato CSV (4).
Aggiungi metodo di pagamento
- Vai Impostazioni profilo sezione (1) e fare clic su Accetta pagamenti opzione (2) dal menu a sinistra.
- Ora controlla i metodi di pagamento attivi e inattivi.
- Fare clic su Pulsante Abilita (3) per abilitare un metodo di pagamento e viceversa.
- Connettere Stripe or Affari Paypal. Anche i clienti indiani possono abilitare PayUMmoney or Razorpay.
Note:
La funzionalità Pagamenti e Donazioni è una funzionalità Premium ed è disponibile solo nei piani Professional e Advanced.
Ecco un modulo di pagamento/donazione in tempo reale:
Visualizza un sito demo dal vivo
Note:
Per ridurre gli spammer nel modulo, la sicurezza captcha di Google è abilitata automaticamente nel modulo.