Seção de pagamentos e doações

Os formulários de pagamento facilitam a aceitação de pagamentos online com Stripe e PayPal. Receba pagamentos e doações em minutos. Venda produtos, serviços, cursos online e muito mais.

Você pode facilmente criar uma página de pagamento ou doação em seu site página para fazer uma doação ou um pagamento único usando o Pagamento e Doação seção.

Ele também oferece a capacidade de configurar os campos de formulário que você deseja em seu formulário e permite especificar um endereço de e-mail para o qual os dados do formulário coletados são enviados por e-mail.

Todos os dados do formulário também são armazenados e podem ser acessados ​​no Configurações > Envios de formulário seção do estúdio. Saiba Mais.

---

Neste artigo:

1. Adicionar seção a uma página
2. Conteúdo
3. traçado
4. Sessão de Fotos
5. Configurações
6. Notificação de Email
7. Verifique pagamentos e métodos de pagamento
8. Exemplo vivo

---

Adicione uma seção de pagamento e doação

• Uma seção pode ser adicionada a uma página. Você pode adicionar uma seção a uma página já existente ou crie uma nova página dentro do seu site.
• Na sua página, Clique no ícone + azul para adicionar um Nova Seção para sua página.

 

• Você vai agora ver o categorias de seção no lado esquerdo.
• Escolha o Formulários (1) categoria e clique em Pagamento e Doações guia (2) onde você pode escolher layouts diferentes que acontecerá no marco da Pagamento e Doações (3) seção.

• Escolha qualquer layout de seção e clique nele para adicioná-lo à sua página.

---

Gerenciar formulário de pagamento

• Clique em Editar conteúdo (1) botão.

• Você terá a opção de gerenciar Conteúdo (2) traçado (3) Sessão de Fotos (4) Configurações (5), e Notificações por e-mail (6).
• Acertar Economize (7) para aplicar as alterações ao formulário.

---

Conteúdo

Gerenciar campos de formulário

Em Gerenciar campos de formulário, você pode especificar os campos que deseja que os visitantes preencham neste formulário.

• Clique em Adicionar Novo Campo (1) botão para adicionar mais campos ao seu formulário.
• Editar ou excluir (2) um campo já adicionado.
• Arrastar e soltar (3) os campos para alterar sua sequência no formulário.
• Colocou o Rótulo do botão de chamada à ação (4) para o formulário.

• Ao clicar no + Adicionar Campo botão um pop-up será aberto de onde você pode escolher seus campos de formulário.

1. Capture o nome do seu cliente.
2. Capture qualquer pequena informação através do Pequeno texto campo.
3. Capture qualquer informação/mensagem elaborada através do Texto Longo campo.
4. Capture o email do seu cliente.
5. Capture qualquer informação numérica do seu cliente.
6. Adicione serviços para escolher em um suspensa maneira.
7. Seleção única: Adicione uma seleção de rádio para seus serviços.
8. Seleção Múltipla: Adicione um campo de caixa de seleção para várias seleções.
9. Adicionar uma selecionador de data para que seus clientes possam escolher uma data para qualquer evento.
10. Adicionar uma linha entre os campos do formulário.
11. Capture o endereço do seu cliente.
12. Capture o site do produto do seu cliente.
13. Capture o telefone número do seu cliente.
14. Adicionar uma tempo campo para que seus clientes possam especificar a hora do evento.
15. Adicionar uma separator entre os campos do formulário.
16. O processo de campo de consentimento opção pode ser usada para obter permissões para newsletters, aceitando privacidade e termos de uso.
17. Faça avaliações de clientes usando o estrela escada, escala numérica e escala sorridente.

Estilo de Formulário

1. Exibir formulário como janela pop-up – Ative esta opção para abrir o formulário em uma janela pop-up ao clicar no botão de chamada para ação.
2. Rótulo do botão de chamada para ação – Defina o Rótulo do botão de chamada à ação para o formulário.
3. Pop-up de título – Especifique o formulário Título, caso existam.

• Carregar ou Excluir (1) a imagem do formulário.
• Adicionar uma Título (2), e Descrição (3) para o formulário. Antes de adicionar a descrição, verifique esse artigo.

NEW Manchete

• NEW Manchete – Especifique o Título da Seção (1) para a seção Formulário de Pagamento.
• Botões e ícones – Saiba mais sobre Botões e Ícones (2).

---

Gerenciando o layout

• Clique no Editar conteúdo (1) botão.

• Escolha o traçado (2) aba.
• Selecione os traçado para sua seção (3) e Economize (4) as mudanças.

---

Opções de estilo

• Clique em Editar conteúdo (1) botão.

• Escolha o Sessão de Fotos (2) guia.
• Altere o estilo dos elementos da seção e Economize (3) suas mudanças.

Estilizar o formulário é um aspecto importante para criar uma experiência visualmente atraente e fácil de usar.

Você terá várias opções de estilo para a seção: 

• Campos de formulário
• Ataques XDR
• Texto
• Espaçamento
• NEW Manchete
• Imagens
• Borda da imagem
• Botão pop-up
• Botão de formulário
• Botões de título
• Ícones sociais de manchete

---

Campos de formulário

Pixpa permite tua para totalmente personalizar da aparência of o seu formulário campos. Estes estilo opções Aplique para todos os entrada Campos in o seu Pagamento Contato e dar tua maior ao controle Acima de como o seu formulário looks e sente on o seu .

1. Shape: Escolha o formato dos seus campos de entrada — como retângulo, arredondado, pílula ou texto — para combinar com a estética do seu site.
2. Preencher: Ative esta alternância para aplicar uma cor de preenchimento de fundo aos campos do formulário.
3. Cor base: Defina a cor de fundo dos campos quando a opção de preenchimento estiver habilitada.
4. Esboço: Ative ou desative a borda (contorno) para cada campo.
5. Cor do contorno: Escolha a cor da borda do campo quando o contorno estiver habilitado.
6. Cor do texto do campo: Defina a cor do texto digitado pelos usuários dentro dos campos do formulário.
7. Altura: Ajuste a altura dos seus campos escolhendo entre: Pequeno, Médio, Grande ou Extra Grande.
8. Rótulos: Escolha se os rótulos dos campos do formulário aparecem dentro ou fora do campo.
9. Cor da Etiqueta: Defina a cor dos rótulos quando colocados fora do campo.
10. Cor interna da etiqueta: Defina a cor dos rótulos colocados dentro do campo (útil para rótulos no estilo de espaço reservado).
11. Espaçamento entre campos: Use o controle deslizante para definir o espaçamento vertical (em pixels) entre cada campo do formulário.

---

Ataques XDR

• Gerenciar o alinhamento do conteúdo do formulário horizontalmente de Alinhamento horizontal (1).
• Gerenciar o alinhamento do conteúdo do formulário verticalmente de Alinhamento vertical (2).

---

Texto

• Clique no Alterar Estilo do Texto (1) botão para visitar o Design seção e gerencie seus tamanhos e estilos de fonte. 
• Especifique o Título (2) estilo de fonte do formulário.
• Especifique o Descrição (3) estilo de fonte do formulário.

---

Espaçamento

• Especifique o Largura da imagem (1) da imagem na forma em Porcentagem.
• Especifique o Espaço Entre Imagem e Texto (3) em Porcentagem.
• Especifique o Espaço Abaixo do Título (4) em Porcentagem.

---

NEW Manchete

1. Alinhar horizontalmente o texto do título da seção. Você pode defini-lo como Esquerda, Centro e Direita.
2. Habilitar/Desabilitar o Divisor entre o título da seção e o conteúdo da seção.
3. Colocou o espessura do divisor (em pixels).
4. Especifique o Cor Divisória do seletor de cores.
5. Escolher Estilo Divisor da lista suspensa.
6. Colocou o Largura do título para definir a largura que o título da seção deve ter, começando com um mínimo de 50%.
7. Especifique o Espaço abaixo do título dentro da seção (em px).

---

Imagens

1. Corte de imagem: Escolha o Icolheita de mago para os itens da lista. Você pode definir as imagens como Quadrado, Círculo, Horizontal, Retrato e Original.
2. Raio de canto: Escolha ter um raio de canto comum ou raio de canto diferente para cada lado dos itens da lista e defina um número (em px) para o Craio próximo das imagens dos itens da lista. Saiba mais.
3. Animação de foco: Escolha Animar a imagem da seção ao passar o mouse, ativando a alternância. Verifique esse recurso em uma página ao vivo.
4. Estilo de Animação: Escolha um Estilo de Animação para imagens quando o cursor passa sobre elas.
5. Máscara de forma: Habilite esta alternância para aplicar uma máscara de forma às imagens na seção Image List. Uma vez habilitado, a forma selecionada cortará visualmente a imagem naquele formato.
6. Selecione a forma: Escolha entre várias formas predefinidas para aplicar às suas imagens. Isso permite que você estilize criativamente seu conteúdo exibindo imagens em formas únicas, como arredondado, diamante, gota, etc.

• Caso tenha escolhido cantos divididos, você pode definir diferentes raios de canto para cada canto.

---

Borda da imagem

1. Ativar/desativar borda ao redor da imagem alternando o botão.
2. Escolha ter um fronteira comum em todos os lados da imagem ou você pode especificar o fronteiras separadamente para cada lado.
3. Especifique o largura da fronteira. Se estiver definido como 0, a borda não aparecerá. Você também tem a opção de definir a largura da borda individualmente para cada lado da imagem.
4. Selecione os Cor da margem do seletor de cores.
5. Selecione um preferido Estilo da Borda da lista suspensa.
6. Determinar o largura da borda para celular dispositivos, alinhando-o com a largura escolhida para desktop.

---

Botão pop-up

Essas opções de estilo são para o botão pop-up, que abrirá o formulário de pagamento quando o botão for clicado.

1. Tamanho do botão - Selecione o tamanho do botão entre opções como pequeno, médio ou grande.
2. Espaço acima do botão – Ajuste o espaçamento vertical acima do botão (em porcentagem).
3. Estilo do botão - Escolha o estilo do botão, como padrão ou personalizado.
4. Cor do botao - Selecione o estilo de cor do botão. As opções incluem Padrão, Inverter ou Personalizado.
5. Texto do botão – Personalize a cor do texto do botão.
6. Fundo do botão – Selecione a cor de fundo do botão.

---

Botão de formulário

Essas configurações permitem a personalização do botão de envio do formulário para corresponder ao design e layout da página.

1. Tamanho do botão - Selecione o tamanho do botão (Pequeno, Médio ou Grande).
2. Espaço acima do botão – Ajuste o espaçamento vertical acima do botão (especificado em porcentagem).
3. Estilo do botão - Escolha o estilo geral do botão, como Padrão ou Personalizado.
4. Cor do botao - Defina o estilo da cor do botão. As opções incluem Padrão, Inverter ou Personalizado.
5. Texto do botão – Personalize a cor do texto exibido no botão.
6. Fundo do botão – Selecione uma cor de fundo para o botão.
7. Alinhamento de botões – Escolha o alinhamento do botão (Esquerda, Centro ou Direita).
8. Largura do botão – Ajuste a largura do botão. As opções incluem Padrão, Grande, Extra Grande ou Largura Total.

---

Botões de título

Essas configurações controlam a aparência e o espaçamento dos botões colocados com o título da seção.

1. Tamanho do botão - Selecione o tamanho geral dos botões (Pequeno, Médio ou Grande).
2. Espaço entre botões – Ajuste o espaçamento entre vários botões (medido em vw).
3. Espaço acima dos botões – Defina o espaçamento vertical acima dos botões (medido em porcentagem).
4. Largura do botão – Escolha a largura dos botões. As opções incluem Padrão, Grande, Extra Grande e Largura Total.
5. Tamanho do link de texto – Especifique o tamanho da fonte dos links de texto associados aos botões (medido em px).
6. Tamanho do botão de imagem – Ajuste o tamanho dos botões baseados em imagem (medidos em px).

---

Ícones sociais de manchete

Exiba e personalize ícones de compartilhamento social no formulário.

1. Tamanho do ícone – Ajuste o tamanho dos ícones sociais (medido em px).
2. Tipo de ícone – Escolha o estilo dos ícones, como as opções Clássico, Sólido ou Contorno.
3. Cor do ícone – Selecione a cor dos ícones. As opções incluem Texto do Link, Personalizado ou Cor da Marca (cor original da plataforma social).
4. Cor de fundo do ícone – Defina uma cor de fundo personalizada para os ícones para melhorar a visibilidade e o estilo.

---

Configurações

• Clique no Editar conteúdo (1) botão.

• Personalize as configurações do formulário a partir de Configurações (2) aba e Economize (3) suas mudanças.

Nome do formulario

• Digite um nome para Identifique o formulário de pagamento No Pixpa Studio. Este nome não é visível para os visitantes do site.

---

Pagamentos

• Você pode atualizar os métodos de pagamento para o formulário.
• Você pode escolher entre Paypal e Stripe. Os clientes indianos também podem adicionar Razorpay e PayUMoney Saiba Mais.

---

Ação pós-envio

Como ação pós-envio, você pode optar por Exibir mensagem de sucesso (1) ou Redirecionar para URL (2).

No caso de Exibir mensagem de sucesso (1)

• Especifique o Mensagem de pagamento bem-sucedido (2) que é exibida após o usuário enviar o formulário.
• Você também pode adicionar qualquer script no sucesso pós-pagamento HTML (3) caixa.

• No caso de Rredirecionar para URL, você pode especificar qualquer página interna/externa clicando no ícone de configurações (⚙️). Saiba mais.

---

Sincronizar e exportar dados de formulário

1. Enviar dados do formulário para Make.com. Saiba Mais.
2. Enviar dados do formulário para Zapier.com. Saiba Mais.
3. Exportar dados do formulário como um arquivo CSV. Saiba Mais.

---

Notificação de Email

A partir daqui, você pode personalizar o assunto do e-mail para as notificações que você recebe como proprietário de um site após o envio bem-sucedido de um formulário. Além disso, você pode personalizar o e-mail de sucesso enviado aos usuários ou clientes após eles enviarem o formulário e fazerem um pagamento.

1. permitir que o Enviar e-mail ao proprietário do site Opção para receber notificações por e-mail sempre que um formulário de pagamento for enviado.
2. De acordo com o relatório Área temáticaEspecifique o assunto do e-mail para o qual deseja enviar o formulário de pagamento. Você também pode usar o {SITE} Variável para incluir automaticamente o nome do seu site no assunto. Isso é especialmente útil se você gerencia vários sites.
3. De acordo com o relatório Campo EmailInsira até 3 endereços de e-mail nos quais deseja receber notificações sobre o formulário de pagamento.

1. Ativar/Desativar o sucesso E-mail para o cliente opção.
2. Especifique o Assunto do e-mail de sucesso.
3. Adicione um corpo do e-mail ao e-mail de sucesso. Você pode adicionar as variáveis ​​no corpo do e-mail que serão capturadas e enviadas no e-mail {TRANSACTION_ID}, {AMOUNT} e {NAME}.

---

Verifique pagamentos e adicione forma de pagamento

• Vou ao Pagamentos e Doações (1) seção.
• Aqui, você pode ver todos os pagamentos que você recebeu.
• Verifique o data, valor recebido e e-mail (2) do pagamento.
• Clique em qualquer envio de formulário (3) para visualizar os detalhes da transação do pagamento.
• Verifique os detalhes da transação como ID da transação, nome, método de pagamento usado e ID da transação do método de pagamento da gaveta direita.
• Exporte todos os detalhes de pagamento em um Formato CSV (4).

---

Adicionar forma de pagamento

• Vou ao Configurações seção (1) e clique no botão Aceite pagamentos opção (2) no menu à esquerda.
• Agora, verifique os métodos de pagamento ativos e inativos.
• Clique em Botão habilitar (3) para ativar um método de pagamento e vice-versa.
• Conecte-se Stripe or Negócios Paypal. Os clientes indianos também podem ativar PayUMMoney or Razorpay.

---

Aqui está um formulário de Pagamento/Doação ao vivo: 

Veja um site de demonstração ao vivo

---

Artigos relacionados:

• Construa seu site
• Tipos de Seções
• Gerenciar SEO do site