Como adicionar um campo de código de cupom aos seus formulários WordPress
Publicados: 2020-06-16Quer adicionar um campo de código de cupom aos seus formulários online?
Oferecer aos usuários um lugar onde eles podem inserir um código para obter um desconto em seu produto ou serviço é útil se você estiver usando códigos de desconto para seu marketing online - o que pode realmente ajudar a impulsionar suas vendas e tráfego.
Portanto, neste artigo, escrevemos um guia passo a passo sobre como adicionar um campo de código de cupom aos seus formulários WordPress.
Clique aqui para criar seu formulário de código de cupom agora
Por que adicionar um campo de código de cupom aos seus formulários?
Existem vários motivos pelos quais você pode querer adicionar um local aos seus formulários de pagamento para que os visitantes insiram um código de desconto. Aqui estão alguns:
- Aplique descontos aos seus formulários de pedido
- Aumente as vendas usando diferentes táticas de marketing
- Incentive os clientes a comprar itens de liquidação específicos
- Reduza o preço total dos carrinhos de compras dos visitantes
- Se você emitir reembolsos ou créditos usando códigos de cupom
- Recompense clientes leais se você der códigos especiais para membros VIP
- Talvez você dê descontos ou códigos de cupom em uma campanha de marketing por e-mail específica para geração de leads (e-mails de aniversário, Black Friday, etc.)
- E mais.
Com o WPForms, você pode facilmente criar um formulário com um campo de cupom. Você não precisa instalar um plug-in de código promocional WordPress separado.
Agora que você sabe por que adicionar um campo de código de cupom aos seus formulários do WordPress, vamos ver como fazer isso.
Como adicionar um campo de código de cupom aos seus formulários
Se você estiver pronto para adicionar um campo de código promocional ou código de cupom aos seus formulários do WordPress, basta seguir estas etapas.
- Instale o plug-in WPForms
- Configure o formulário de código de cupom do WordPress
- Adicionar uma pergunta sim / não
- Criar lógica condicional
- Crie sua primeira validação
- Crie sua 2ª validação
- Adicionar formulário de código de cupom ao seu site
Vamos começar instalando o plugin.
Etapa 1: instalar o plug-in WPForms
A primeira coisa que você precisa fazer é instalar e ativar o plugin WPForms. Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress. Entre seus muitos recursos poderosos, o WPForms funciona muito bem para adicionar um campo de código de cupom aos seus formulários.
A seguir, mostraremos como usar WPForms como um plugin de código de promoção do WordPress.
Etapa 2: Configure o formulário de código de cupom do WordPress
Agora que seu plugin WPForms está instalado, a próxima coisa que você vai querer fazer é configurar um formulário de pagamento. Dessa forma, você terá um formulário para adicionar o campo do código do cupom.
No painel do WordPress, vá para WPForms » Adicionar novo no painel esquerdo para criar um novo formulário e nomeá-lo como quiser no campo Nome do formulário e, em seguida, selecione o modelo Formulário de cobrança / pedido .
Neste tutorial, configuramos o Stripe como nossa forma de pagamento, então você verá que adicionamos um campo de cartão de crédito. Para um passo a passo mais aprofundado sobre como configurar seu formulário de pedido, incluindo notificações e configuração de seu provedor de pagamento (como Stripe ou Paypal, ou mesmo Authorize.Net), criamos uma postagem sobre como construir seu formulário de pedido online com pagamentos isso explica mais sobre a funcionalidade.
Portanto, seu formulário de pedido preencherá quase todos os campos de que você precisa para receber pagamentos, incluindo:
- Nome (primeiro e último)
- O email
- Telefone
- Endereço
- Múltipla escolha (itens disponíveis)
- Montante total
- Comentário ou Mensagem
Você pode arrastar os campos para cima e para baixo para reorganizar sua ordem e excluir itens se sentir que não precisa deles. Sinta-se à vontade para arrastar os campos do painel esquerdo para o seu formulário se desejar adicionar algo. Na verdade, é assim que adicionaremos um campo de código de cupom.
Para manter as coisas simples neste tutorial, removemos a caixa Comentário ou Mensagem. Leia nosso artigo sobre reclamações comuns sobre formulários de pagamento se estiver procurando mais maneiras de otimizar seu formulário.
Agora que você criou seu formulário, vamos nos preparar para adicionar esse campo de código de cupom.
Etapa 3: adicione uma pergunta sim / não
Em seguida, vamos adicionar uma caixa suspensa. Esta caixa perguntará ao usuário se ele tem desconto ou não.
Queremos fazer isso porque é uma prática recomendada não mostrar o campo de desconto, a menos que você saiba que alguém tem um código. Faremos isso com o Smart Conditional Logic.
Para fazer isso, basta arrastar o campo Caixa suspensa do painel esquerdo para o seu formulário, abaixo da caixa Total, ou para onde quiser colocá-lo no formulário.
Em seguida, você desejará personalizar sua caixa suspensa. Altere o rótulo para “Você tem um desconto?” e altere as opções para:
- sim
- Não
Fique à vontade para se divertir com o texto desses pontos, é o seu site. Tente deixar claro que as opções são 'Sim' ou 'Não', mas se corresponder à sua marca, você pode editá-las para algo mais divertido como 'Claro!' e 'Não!'. Isso é totalmente com você.
Antes de terminarmos, aqui está um truque interessante. Você pode adicionar um espaço reservado à sua lista suspensa para que nenhuma das opções seja selecionada por padrão.
Para fazer isso, clique no campo suspenso no criador de formulários e expanda o painel Opções Avançadas . Em Espaço reservado, digite algo como Selecione ou Escolha :
E é isso! Agora estamos prontos para criar a lógica condicional para o campo do código de cupom.
Etapa 4: Criar campo de código de cupom
Agora que sua caixa suspensa foi criada, a próxima etapa é adicionar um local para alguém inserir seu código de promoção se selecionar 'Sim' na caixa suspensa.
Para fazer isso, arraste o campo Texto de linha única do painel esquerdo para o seu formulário, logo abaixo do campo Você tem um desconto.
Agora, renomeie o rótulo do campo Texto de linha única para “Código de desconto”, role para baixo e clique em Condicionais .
Em seguida, clique na caixa de seleção ao lado de Ativar lógica condicional e na área que se expande, digite o seguinte:
Sua lógica condicional deve indicar Mostrar este campo se Você tem um código de desconto for Sim .
Agora, apenas as pessoas que selecionarem 'Sim' verão o campo do código de desconto. Mantendo seu formulário menos confuso e super organizado.
Você está indo muito bem até agora, vamos passar para a próxima etapa.
Etapa 5: Crie sua primeira validação
A próxima coisa que você fará em seu formulário de código de cupom do WordPress é adicionar 2 respostas de validação. Resumindo, criaremos uma resposta para mostrar às pessoas se o código promocional é válido e outra para mostrar se não é.
Para começar, arraste 2 campos de item único do painel esquerdo em Campos de pagamento para o seu formulário abaixo do campo do código de desconto.
Agora, clique em cada um dos campos de item único em seu formulário para exibir as configurações para que você possa ajustá-las.
Primeiro, você vai querer fazer algumas alterações no primeiro campo de item único:
- Atualize o rótulo para 'Seu preço'
- Escreva uma descrição explicando o desconto dado
- Insira o preço total do item após o desconto
Em seguida, role para baixo até a guia Condicionais e clique nela para definir quando as pessoas verão este campo de Item Único em particular. Clique na caixa de seleção ao lado de Ativar lógica condicional e decida como deseja que seu código de desconto seja. Para este exemplo, usaremos FREEVIP.
Sua lógica condicional deve indicar Mostrar este campo se o Código de desconto for FREEVIP (ou qualquer que seja o seu código de desconto). Tem mais de um código de desconto que gostaria de usar? Basta clicar no botão E novo grupo para repetir este processo.
Etapa 6: Crie sua segunda validação
A seguir, faremos a mesma coisa, mas para o segundo campo de item único. Queremos que este campo seja exibido se o código de desconto não corresponder a FREEVIP.
Clique no campo Item Único para abrir suas configurações no painel esquerdo e, em seguida:
- Atualize o rótulo para 'Seu preço'
- Escreva uma descrição explicando que o código de desconto não funcionou
- Insira o preço total do item, que deve ser igual ao preço normal
Em seguida, role para baixo até a guia Condicionais e clique nela para definir quando as pessoas verão este campo de item único específico. Clique na caixa de seleção ao lado de Ativar lógica condicional e insira o seguinte:
Sua lógica condicional deve dizer Mostrar este campo se o Código de desconto não for FREEVIP (ou qualquer que seja o seu código de cupom).
Por fim, não se esqueça de clicar em Salvar no canto superior direito da página.
Parabéns! Agora, seu formulário WordPress com código de cupom está quase pronto. No entanto, você precisará colocá-lo em uma página para que outras pessoas possam usá-lo agora.
Etapa 7: adicione o formulário de código de cupom ao seu site
Para que as pessoas usem o campo do código do cupom, você precisa que ele seja exibido em uma de suas páginas da web, como as páginas de pagamento.
E é super fácil de fazer com WPForms. O WPForms permite que você adicione seus formulários a vários locais em seu site, incluindo postagens de blog, páginas e até mesmo widgets da barra lateral.
Vamos dar uma olhada na opção de posicionamento mais comum: incorporação de página / postagem.
Para começar, crie uma nova página ou postagem no WordPress ou vá para as configurações de atualização de uma página existente.
Depois disso, clique dentro do primeiro bloco (a área em branco abaixo do título da página) e clique no ícone Adicionar WPForms. 
O prático widget WPForms aparecerá dentro do seu bloco. Clique na lista suspensa WPForms e escolha qual dos formulários já criados que deseja inserir em sua página. Selecione o formulário que você criou que contém o campo de código de cupom.
Agora, publique ou atualize sua postagem ou página para que seu formulário apareça em seu site.
Para visualizar as inscrições do formulário depois de serem enviadas, verifique este guia completo para inscrições do formulário. Por exemplo, você pode visualizar, pesquisar, filtrar, imprimir e excluir qualquer entrada de formulário, tornando o processo de ordem de serviço muito mais fácil.
Clique aqui para criar seu formulário de código de cupom agora
Próxima etapa: crie um formulário de código de cupom em um pop-up
E aí está! Agora você sabe exatamente como adicionar um campo de código de cupom aos seus formulários de pagamento do WordPress. Você pode configurar isso facilmente sem usar WooCommerce ou um plugin de código promocional WordPress separado.
Não se esqueça de verificar nosso artigo sobre como criar um pop-up lightbox em WordPress, um ótimo lugar para inserir um código de desconto em seu site!
Então, o que você está esperando? Comece hoje com o plugin de formulários WordPress mais poderoso. O WPForms Pro inclui um modelo de formulário de pagamento online gratuito e oferece uma garantia de reembolso de 14 dias.
E se você gostou deste guia, certifique-se de nos seguir no Facebook e Twitter para mais tutoriais WordPress gratuitos.