Transcrições
1. Introdução: Bem-vindo de volta a outra aula incrível do
Skillshare comigo. É sempre um prazer
tê-lo aqui. Nesta aula. Quero mostrar a você como criar um incrível formulário de várias etapas
para o seu site WordPress. E não apenas qualquer formulário de
várias etapas, mas um formulário de várias etapas com um botão de pagamento no final
ou na última etapa. Para que você possa
descobrir as
pessoas por meio das diferentes etapas em
que elas podem selecionar entradas
e configurações
diferentes para o serviço que você está oferecendo. E, no final, eles
receberão o valor
que deveriam
falsificar e é um botão de pagamento muito
estratégico colocado na última etapa para que possam fazer o pedido. Vai ver
isso em detalhes, e
mostrarei como fazer tudo
isso com ferramentas gratuitas. Você não pagará por nenhum plug-in ou serviço. Só no caso de esta ser a
primeira vez que me vê. Eu tenho ensinado aqui no Skillshare nos
últimos 1,5 anos. Mas eu tenho usado o
WordPress nos últimos quatro anos indo
para o quinto ano agora, novamente, bastante alguma
experiência usando as diferentes ferramentas que o
WordPress tem para oferecer. A única parte em que eu gostei
de me formar é procurar as melhores e mais acessíveis
e, de preferência, ferramentas gratuitas para usar para criar sites. Então, se você estiver
procurando uma maneira de criar um formulário de várias etapas que aceite
o pagamento na última etapa. Esta é a classe para você. Então,
sem perder mais tempo, vamos começar. Tudo bem.
2. Instalando o plugin: Então, aqui estamos nós. Esta é uma nova
instalação do WordPress. Claro, a primeira coisa que
precisamos fazer é adicionar o plugin que nos
ajudará a criar o formulário. E vamos usar um plugin de formulário
incrível chamado formulador porque é gratuito e tem recursos muito poderosos. Então, vamos entrar. Logins, Adicionar novo. Então, não estamos
enviando um plugin. Estamos instalando-o a partir
do repositório de plugins. Então, farei uma busca
aqui por formulador. Aqui ele é criado
pelo WPA AMU dev. Então, como você pode ver agora, ele tem mais de 200 mil instalações
ativas. Vou clicar em instalar agora. Agora está instalado,
então vou ativá-lo. Aqui ele agora está ativo. Esses são os dois
plugins que vêm por padrão a cada nova
instalação do WordPress. Então, selecionarei os dois
e, em seguida, os excluirei seletivamente do
menu suspenso e depois aplicarei. Agora eles se foram. Só temos formulador como a
única instalação, o plug-in. A próxima coisa que queremos fazer agora
é entrar no formulador. Você o encontrará
em algum lugar quase
na parte inferior deste menu do lado
esquerdo. Então, vou clicar mais tarde. Lá nós o temos. Portanto,
este é o painel do formulador dentro do seu painel do
WordPress. Em outras palavras, é
aqui que você verá resumos de como seus
formulários estão se saindo. E você também tem atalhos
para criar novos formulários, enquetes e, basicamente, coisas
administrativas. É assim que
instalar o plug-in. Na próxima lição, vamos ver como
criar os fóruns. Vejo você em breve.
3. Como adicionar uma entrada de formulário: Bem-vindo de volta. Então,
para criar um formulário, o que precisamos fazer é ir bem aqui enquanto ainda estamos
dentro do painel, role para criar formulários. E podemos clicar
nisso e seremos levados a criar um novo formulário, ou poderíamos ir para Formulários, também
teremos a opção de
criar ou importar um formulário. Então, antes de tudo, deixe-me fechar isso. Não precisamos disso.
Clicarei em criar um formulário. Porque este é um
formulário de várias etapas, muito personalizado que estamos criando. Não há um modelo pré-fabricado que possamos usar
para esse fim. Então, vamos com espaço em branco. A partir de uma ardósia em branco. Vamos dar um nome a ele. Vou chamá-lo de etapa executada. Agora clique em Criar. Agora nosso formulário está pronto para
ser preenchido com campos. Então, é aqui
que vamos inserir campos. Você notará que
o nome
aparece aqui e podemos
alterá-lo daqui. Agora que chamamos
isso de execução de etapas, podemos alterá-lo para agora, o nome
permanecerá automaticamente para ser um formulário de várias etapas. Então, vamos em frente
e insira campos. O primeiro campo precisará
desses um menu suspenso porque precisamos de
alguém para poder selecionar e isso é chamado select. Então, vou clicar nisso e
, em seguida, inserir campos. E isso exibirá as configurações para esse tipo específico de entrada. Então, aqui podemos adicionar um
rótulo para esse campo. Então, digamos que o tipo de site. Vamos supor que estamos administrando
uma empresa de web design. E vamos supor que estamos
criando esse tipo de formulário para permitir que as pessoas escolham configurações e
configurações diferentes de que
precisam para o site. E, em seguida, obtenha um preço
dependendo dos recursos que eles escolhem para o site
e pague esse valor. Site. Vamos supor aqui que queremos adicionar um espaço reservado
perguntando que tipo de site. Então. Agora, aqui já temos duas
opções pré-preenchidas. Deixe-me aplicar isso
por um segundo antes fazermos alterações a isso se aplicam. Este é o nosso campo. Como você pode ver,
agora lê o site. E se o visualizarmos, este é o espaço reservado que
acabamos de adicionar o tipo de site e o nosso website da
etiqueta YS. Se clicarmos no menu suspenso, ele tem a opção um
e a opção dois. Deixe-me fechar isso. Se abrirmos novamente. Agora você entende por que
temos essas duas opções. Podemos mudar isso também. Porque esses serão
os diferentes tipos de sites que alguém
pode escolher. E-commerce, talvez blog pessoal. E podemos adicionar quantas opções
precisarmos clicando nisso. Vou adicionar um terceiro. Site da revista. Deixe-me adicionar mais uma opção. Que tipo de site? Escola online. Tudo bem. Agora que temos
essas opções diferentes, deixe-me aplicar isso rapidamente. Se o visualizarmos agora. Agora temos esses diferentes
tipos de sites
no menu suspenso e alguém
pode selecioná-lo ou à direita, Deixe-me fechar isso,
abrindo-o novamente. Agora precisamos dar
um preço a cada uma
dessas opções
porque cada tipo de site pode custar
uma quantia diferente, entrará nos cálculos. E então diremos enable, escolha se deseja permitir que
esses campos sejam usados em cálculos ou não. O valor nos cálculos é o mesmo que o
valor de entrada desse campo. Então, vamos habilitar isso. E, como você pode ver, nossas diferentes opções
aparecem aqui, esperando por nós inserir o custo específico de
criar cada opção. Digamos que cobraremos US $80
por uma loja de comércio eletrônico. Digamos que US $15. Para um blog pessoal
e site de revista, digamos que US $53 por um, para uma escola online.
Digamos que US $45. Agora, o que precisamos fazer
é entrar nas configurações. Se entrarmos no estilo, este é apenas um lugar
para adicionar CSS adicional, mas você realmente não
precisa adicionar nenhum CSS aqui porque veremos como editar a aparência
dos formulários
na próxima lição. Voltando para dentro das configurações, é aqui que você
define coisas
como se este fosse um campo
obrigatório ou não. E, claro, esse
é um campo obrigatório. Eles precisam escolher o
tipo de site de que precisam. Se selecionarmos obrigatório, inseriremos uma
mensagem de erro que
aparecerá no caso de
eles não sentirem isso. Então, digamos, por exemplo, esse campo seja obrigatório. Nós realmente não precisamos
dessas outras opções aqui, mas você pode ir em frente e
brincar com elas e
ver o que elas fazem. Agora que temos isso, irei em frente e me candidatarei.
4. Como criar as etapas de Paginação de formulário: O que precisamos fazer a seguir é adicionar campos
adicionais ao nosso formulário. Então, deixe-me duplicar isso
em vez de adicionar um novo. Este pode ser se o cliente
precisa de hospedagem ou não. Então, hospedagem. Você precisa de hospedagem? Claro que as opções serão apenas duas opções, sim ou não. Então, vamos excluir esses dois para os cálculos agora, se eles precisarem,
se eles escolherem, sim, eu preciso de hospedagem. Claro, vamos colocar
o preço da hospedagem. Digamos que US $2424. Saiba, é claro
que isso deve ser 0. Não os cobraremos se eles
disserem que não querem hospedagem. Vamos voltar aqui. Acho que estamos bem,
então aplique isso. E agora temos
esses dois campos. Visualize que você precisa
hospedar sim ou não. Eu vou em frente e adicionarei mais
dois campos aqui. Nosso campo ainda é
um campo de seleção. Quero dizer inserir campos. O rótulo pode ser algo
como o número de páginas. Quantas páginas você
precisa em seu site? 510. Vamos adicionar mais um, 1515 plus. Tudo bem, vamos habilitar os
cálculos aqui para cinco páginas cobrarão talvez
treinamento por dez páginas, 3038 para 15 mais 45. E vamos aplicar isso. Agora temos esses três campos. Visualizar que está
certo, parece bom. Esses três campos compõem o primeiro passo do formulário. Agora vamos criar,
agora vamos inserir campos que entrarão na
segunda etapa do formulário. Vou inserir o campo. Talvez possamos adicionar
algo como área de texto. E depois insira o campo. Agora temos uma
área de texto InputField. Vamos alterar o rótulo para comentários para que, caso eles tenham algo a
adicionar como comentário. Adicione sua mensagem
ou comentários aqui. Aplique isso. E agora aqui temos isso. Observações. Se visualizarmos isso, você notará que ainda
não temos nenhuma etapa. Não criamos a
segunda etapa do formulário. Para fazer isso, o que precisamos
fazer é inserir campo. Podemos inseri-lo
daqui ou aqui. Precisamos de uma quebra de página. Então, vou clicar nisso e
, em seguida, inserir campos. Vou arrastar esta
quebra de página logo acima das observações até que a
linha azul apareça acima dela. Agora, a quebra de página está
logo antes das observações, o
que significa que a segunda
etapa começa a partir daqui. Se visualizarmos isso, agora
você notará que
temos duas etapas. E se clicarmos no
máximo, antes de tudo, porque dissemos que esses
campos deveriam ser obrigatórios, esta é a mensagem que
digitamos como uma mensagem de erro. Isso significa que precisamos selecionar pelo
menos uma opção, blog
pessoal. Sim, preciso de hospedagem. E agora podemos clicar em Avançar. E esta é a nossa área
de texto de comentários. Mas eu quero fazer disso
um formulário de três etapas. Então, talvez pudéssemos inserir
mais alguns campos. Então, vamos clicar em inserir campos. Vou em frente e selecionarei isso, selecione a entrada
porque faz sentido para mim. É claro que não tocamos
nesses outros campos de entrada. Vamos tocar em mais alguns. Mas a lição de casa ou projeto para você
será descobrir como esses outros tipos de
campo de entrada são usados e onde eles podem
se inscrever em seu formulário. Então, por enquanto, vamos em frente e selecione esse tipo de campo selecionado. E vamos dar um rótulo. Pagamentos ativados. Então. Você precisa de
opções de pagamento em seu site? Não, claro. Agora vamos inserir duas opções como PayPal, e
vamos adicionar stripe. Listra. Lá nós o temos. E agora, se entrarmos nos
cálculos e habilitarmos isso, NÃO será $0 PayPal, eles terão que pagar uma faixa
adicional de US $13, talvez um adicional de US $17. Vamos aplicar isso. A
opção de pagamentos ativados estará na segunda página porque
temos uma quebra de página. Mas eu quero adicionar
outra quebra de página. E em vez de adicionar
um novo a partir daí, vou duplicar este. E agora temos dois. E eu vou arrastar isso até
o final, para o fundo. Então eu quero trazer comentários
logo após a quebra de página. Porque temos esses três
sites hospedando o número de páginas e, em seguida, temos uma quebra de página e, em seguida,
os pagamentos ativados. Sim ou não. Deixe-me trazer
esse número de páginas. O segundo passo. Deixe-me colocá-lo logo abaixo
porque há algo que
eu quero mostrar a você. Agora temos
hospedagem de sites, depois Quebra de página, número de páginas,
pagamentos ativados
e outra
quebra de página, em seguida, comentários. Vamos ver isso em ação. Então a primeira página tem, que tipo de site
precisamos de hospedagem pessoal de blog? Sim, precisamos de hospedagem. Segundo passo, número de páginas. Quantas páginas você precisa? Talvez dez. Pagamentos
ativados no site? Sim, você precisa do PayPal
habilitado no site. Em seguida, no próximo passo, temos
o campo de comentários. Então, finalmente, o que
precisamos fazer é adicionar o pagamento
na última etapa. Então, vamos ver como fazer isso.
5. Adicionando o botão do PayPal: Então, vamos em frente
e adicionar mais campos. E, claro,
na página de pagamento, precisamos ter o
nome e o e-mail. Então, nome, e-mail e PayPal. Vou em frente e inserirei
campos, os três campos. Claro que agora
vem depois de observações. Temos documentos de nome, e-mail, então isso significa que precisamos de uma quebra de
página aqui. Vou duplicar isso. Agora temos dois, então vou arrastá-lo logo após observações de que agora é
nome, e-mail e PayPal. Depois disso. Vamos visualizar as alterações. Agora temos isso. Deixe-me selecionar isso. Não, máximo, número de
páginas, cinco papéis. Em seguida, temos nossas observações aqui. Em seguida, temos nome, endereço de
e-mail e
notei que o PayPal
não está aparecendo. Então, vamos entrar no nosso jornal. E agora você notará que
o motivo pelo qual ele não está aparecendo é
porque não nos
conectamos à nossa conta do
PayPal com formulador conecta a conta
PayPal aqui. E é isso que estamos
fazendo na próxima lição. Antes de irmos lá, recapitulação rápida. Tudo o que precisamos fazer
para preencher nosso formulário com facilidade de campos, insira clicando neste botão
aqui ou neste botão aqui
e, em seguida, selecionando um campo de
entrada, inserindo-o. Deixe-me fechar isso. Mais uma coisa que eu
não mencionei é que você pode reorganizar e colocar esses campos lado a lado
assim para que ao
visualizá-los lado a lado. Deixe-me fechar isso. Deixe-me também colocar isso direito
no deixe-me também colocar esses nome lado a lado
e endereço de e-mail. E se os visualizarmos, blog
pessoal lado a lado. O nome e o
endereço de e-mail estão lado a lado. Vamos ver como vamos adicionar
pagamentos a esta etapa
final aqui para
que alguém possa clicar em pagar agora e pagar. Mas antes de fazermos isso, vamos nos certificar de que
publicamos o formulário. Caso contrário, se
navegarmos para longe desta página sem
salvar as alterações, sem publicar, perderemos tudo e teremos que
começar do início. Vamos seguir em frente e
clicar em publicar. Agora, o formulário é publicado
com sucesso. O formulário agora está pronto
para ser incorporado em uma página ou modelo
ou nossa escolha. Então, vou fechar isso. E agora vamos ver como
conectar o PayPal ao nosso formulário.
6. Conexão com o PayPal: E bem-vindo de volta. Então, agora é hora de se conectar
ao PayPal
para que possamos mostrar o botão de pintura
aqui mesmo nas etapas finais. Então deixe-me fechar isso. E se abrirmos o PayPal, você não se conectou
à conta do PayPal, conecte-se à conta do PayPal aqui. Então, vamos em frente
e clique aqui. E ele abrirá em uma nova guia. Será levado para a área
Configurações do formulador, será levado diretamente
para a guia Pagamentos. Portanto, temos duas opções,
Stripe e PayPal. Vamos nos conectar ao papel. Ao clicar nisso,
abrirá este pop-up. E, como você pode ver, insira suas chaves de API restante do PayPal para se conectar à sua conta. Você pode criar um aplicativo de API rest. Aqui, como você pode ver, formulado está realmente facilitando
as coisas para nós como usuários. E isso é uma ótima coisa. Então, vamos em frente e
clique aqui para pegar as credenciais
serão levadas para uma nova guia. Isso significa que você precisa
ter uma conta do PayPal. Aqui estamos nós. É aqui que
obteremos nossas credenciais. Preciso fazer login no meu painel. Então, clicarei em
fazer login no Dashboard. Se você não tiver uma conta de desenvolvedor do
PayPal, precisará criar uma. Não coloquei meu login de senha. E ele só precisa
verificar se este sou eu. Então, é claro que vou clicar em Sim. E isso é para questões
de segurança. Portanto, você pode receber esse aviso ou não se fornecer
o que é necessário. Substituições. Então, já estamos
lá dentro. Como você pode ver, meus
aplicativos e credenciais. Temos uma caixa de areia
e temos uma vida ao vivo. E se eu puder voltar para
dentro dessa área, dentro do meu painel
na guia WordPress, temos o
ID do cliente sandbox e o segredo da sandbox. Em seguida, temos o
ID do cliente ao vivo e o segredo em tempo real. Então, entrando aqui,
temos a caixa de areia e vidas. Então, vamos começar com credenciais
de sandbox. O que preciso fazer
é simplesmente clicar em Criar aplicativo, dar um nome a ele. Por exemplo, novo aplicativo. Então temos esses
dois tipos aqui. Para escolher. Aceite pagamentos como
comerciante, vendedor, mova pagamentos para
nos vender como plataforma, é
claro, precisamos aceitar
pagamentos como vendedor. Contas comerciais sandbox. Então, criarei o aplicativo. Você receberá
suas credenciais. Agora, o que precisamos é
pegar esse ID de cliente. E agora, como esse novo
aplicativo que eu criei, esse não é um negócio real, eu não vou me conectar a isso. Vou clicar em meus
abdominais e credenciais porque quero
usar este aplicativo que eu criei chamado Ken visa. Mas você pode usar o aplicativo
que acabou de criar. E eu vou me conectar a
isso com meu papel fora. Então agora temos o ID do meu cliente. Então, selecionarei meu ID de
cliente aqui. Vou colá-lo lá dentro. Então mostrarei meu segredo. Você pode gerar um novo segredo, mas usarei o que já
geramos. Vou colocá-lo no segredo da
caixa de areia deles. E a próxima coisa que
precisamos fazer é clicar em Meus aplicativos e
credenciais novamente. Basta clicar em Voltar para voltar
para selecionar o modo ao vivo. Então vou selecionar ao vivo porque
acabamos de escolher sandbox. E selecionarei o visto Ken novamente porque esse é o
negócio que eu queria
conectar o PayPal para
selecionar meu ID de cliente. Este é o Live ID agora. Então, vamos colocá-lo no ID
do cliente ao vivo. E secreto. Certifique-se de não
mostrar a ninguém. Cole-o lá e
clique em Conectar. Agora estamos conectados
como você pode ver. E se você quiser se desconectar, você sempre pode se desconectar aqui. Então, salve as configurações. Agora, as configurações de pagamentos
foram salvas com sucesso. E basicamente é assim que
conectar o formulador com papel. Na próxima lição, vamos ver como configurar o campo de pagamento do PayPal
em nosso formulário de formulador. Vejo você em breve.
7. Configurando o campo de formulário do PayPal: E bem-vindo de volta. Na lição anterior, acabamos de ver como se conectar
ao PayPal. Vamos ver como configurar o campo
do formulário de pagamento do PayPal
em nosso formulário formulado. Voltando para dentro de formulários. A primeira coisa que
você notará é que o nome do
nosso formulário não foi
atualizado para o novo nome. Nós mudamos os dois enquanto estávamos editando
o formulário e isso porque publicamos o
formulário com as novas alterações. Então, vamos entrar e editar. E é claro que foi aqui que mudamos o nome do formulário, mas agora rolando para baixo, lembre-se de que adicionamos
o botão PayPal e quando clicamos nele, tivemos uma mensagem de erro
antes de nós conectado ao papel. Agora essa mensagem não está em
nenhum lugar para ser vista aqui. Então, a primeira coisa que precisamos
fazer é definir uma moeda. Então você vá em frente e
diga sua moeda, eu vou deixar isso em dólares. E, portanto, nosso valor não é fixo. É variável, depende dos campos que o
usuário selecionou. Portanto, teremos que
selecionar uma variável, mas agora ainda não
temos uma variável. Precisamos selecionar
um campo que
mostre o valor total de dinheiro que eles usam
uma casa para pagar dependendo de quais campos
eles selecionaram. E vou te mostrar
como adicionar esse campo. Primeiro de tudo, vamos
fechar isso e visualizar nosso botão PayPal. Então, selecionarei esse
comércio eletrônico. O que está acontecendo? Deixe-me selecionar esse blog
pessoal. Não, em seguida. Deixe-me ir em seguida. Em seguida. Agora temos um botão PayPal
Checkout aqui. E alguém também pode
pagar com um cartão de débito. Mas agora, vamos em frente
e insira o campo que mostrará quanto dinheiro
o cliente precisa pagar. E isso é chamado de entradas de
cálculos. Então, selecionarei os
cálculos, inserirei campos. Então, é claro, vamos dar a
isso talvez um rótulo diferente. A quantidade total de facilidade. Vamos entrar nos cálculos e é aqui que criaremos uma fórmula simples para
calcular o valor total. E, claro, a
fórmula simples é a adição de qualquer opção que a pessoa seleciona em cada campo. Então, o que precisamos fazer é selecionar os diferentes
campos que precisamos aqui. Então, por exemplo, o primeiro campo, site
YS, é aí que
temos uma opção. Deixe-me fechar
isso por um segundo. Temos o site e os
temos hospedando. Eles têm uma opção lá. Em qualquer lugar onde haja uma
opção que envolva dinheiro. Teremos a opção
de selecionar esse seletor. Portanto, temos número de páginas, pagamentos ativados e tudo isso. Então, voltando para dentro
de
cálculos, cálculos, temos site. Então, qualquer opção
escolhida no campo do site deve ser adicionada à seleção de
hospedagem que eles fazem. E isso deve ser adicionado ao número de
páginas que eles selecionam. E isso deve ser adicionado
à opção de pagamentos ativados que eles selecionarão. Então aqui está nossa fórmula. Escolha de sites. A última
opção de hospedagem mais o número de páginas mais pagamentos ativados. E então vamos aplicar isso. Agora que temos
esses cálculos, vamos colocá-los acima do botão
do PayPal, logo abaixo do nome e do e-mail. Agora, entrando
na variável de papel, vamos selecionar cálculos
e aplicar lá. Esses dois estão conectados. Agora, o PayPal aceitará o pagamento do valor que o
filme de cálculos mostrará. Então, se entrarmos na revisão, por exemplo, selecione loja de
comércio eletrônico. Digamos que não precisamos de hospedagem. Em seguida, digamos que
precisemos de dez páginas. Precisamos da opção de pagamento? Sim. Digamos que PayPal. Você não tem comentários. E então os cálculos mostram que precisamos pagar um $131, digamos PayPal Checkout. E começa a
abrir nosso jornal. Se você tiver uma conta do PayPal, se um cliente tiver
uma conta do PayPal, ele poderá fazer login e
concluir o pagamento. Eles podem clicar em cartão de débito
ou crédito. Agora eles podem inserir
todos os seus detalhes aqui e pagando
agora através do papel, essa mensagem de erro
apareceu porque eu aconselhei o
pop-up de papel que estava aparecendo. Isso é apenas para nos dizer que o processo de pagamento não
foi concluído. O usuário abortou o processo de pagamento
do PayPal. Então deixe-me fechar isso. Agora que essa configuração,
clicarei em Atualizar. Nosso formulário agora está pronto para ser exibido no
frontend do nosso site. Em outras palavras, em nossa página da web. Então, como exibimos esses
formulários no front-end? Fará isso na próxima
lição. Vejo você em breve.
8. Exibindo o formulário na página da web: E bem-vindo de volta. Agora que temos nosso
formulário pronto para ser exibido no
front-end em uma página da Web. Como fazemos isso? Queria
mostrar dois métodos. Um deles está usando o método de código
curto padrão do WordPress, e o outro está usando um construtor de
páginas como o Elementor. Vamos começar com um método WordPress
integrado. Então, entrando nas páginas porque estamos exibindo
em uma página da Web. Porque eu mencionei que esta é uma nova instalação
do WordPress. Estas são as duas páginas
padrão que vêm com cada nova
instalação do WordPress, quero criar uma
nova página, então adicione novo. Certo, vamos dar um nome. Então, vamos supor que esta seja a página de serviço ou
algo desse tipo. E como estamos usando as ferramentas
incorporadas do WordPress, clicarei em Adicionar para adicionar um bloco. E aqui vou digitar curto. código curto aparecerá aqui. Então, vou selecionar um código curto. E agora precisamos escrever
um código curto aqui. Então, vou clicar com o botão direito do mouse em abrir este link em uma nova guia para que não
fechemos esta página. Precisamos pegar um código curto do
formulário formulador que criamos. Vamos para essa nova guia. Vou entrar em formuladores. Claro que esta é a nossa forma. O que preciso fazer é
clicar nesta roda dentada aqui. A segunda e a segunda opção serão copiadas código curto. Eu copiei no caso de
você já estar dentro do formulário. Você também pode ir para esta
roda dentada e copiar código curto. Agora, deixe-me voltar
para nossa guia, onde temos o bloco de código curto e
colá-lo lá. É isso. Então, em seguida, vamos publicar a página. Publique-o. Vamos ver a página. Existe nossa página e nosso formulário está sendo exibido
corretamente aqui. Está funcionando como de costume. Nossas verificações estão funcionando
porque, como você pode ver, antes de podermos
ir para a próxima etapa, o formulário faz as
verificações e, se houver algo errado, ele nos notifica. Deixe-me apenas selecionar isso. Não. Em seguida, eles não têm cheques. Existe nosso botão de papel. Vamos selecionar papel. Agora, alguém pode fazer login e
concluir o pagamento de US$15. Lembre-se que eu mencionei que
esta mensagem de erro aparece porque fechamos esse processo de pagamento
antes de concluí-lo, antes de ser concluído. Também podemos clicar no método do cartão de débito
ou crédito. Os detalhes aparecerão aqui e podemos seguir em frente e
terminar nosso pagamento. Esse é o primeiro método. Voltando para dentro do nosso painel, quero mostrar o segundo
método usando o Elementor. Então, basicamente, é
semelhante porque
ainda estaremos usando um elemento de código
curto. Mas é claro, eu não
quero assumir que todo mundo assistindo a essa aula já
usou no mentor antes. Eu só queria
ter certeza de que todos estão cobertos. Então, entre nos plugins. Quero adicionar novo. Precisamos adicionar Elementor, construtor de sites
elementor e instalar agora. Tudo bem, deixe-me ativá-lo. Esta é a configuração, este é o novo assistente de configuração do Elementor, então temos que passar por ele. Só quero que fiquemos
com isso. Pule isso. Não quero selecionar um tema. Não quero dar um nome
ao site por enquanto porque isso é para fins
ilustrativos. Não quero adicionar o logotipo. Ignorando tudo isso. Tudo bem, então podemos
optar por editar uma tela em branco com o editor
Elementor. Então, vou clicar nisso. Aqui
estamos editando nossa página. Então, tudo o que preciso fazer
enquanto estou nesta página aqui com esta edição com o editor
Elementor disponível. Vou entrar neste
widget de pesquisa e procurar por abreviação. Em automaticamente, um elemento de
código curto aparece, mas precisamos adicionar uma seção, então eu vou clicar nela. E então eu adicionarei talvez
uma seção de coluna dupla. Não, talvez vamos adicionar uma única seção de coluna, seção de coluna
única. E lá temos isso. Agora,
no momento em que o adicionamos, ele exibe as configurações
da seção. Mas não queremos isso. Queremos adicionar o código curto. Vou clicar neste ícone Elementos
para abrir os elementos. Mais uma vez. Vou digitar elementos de código curtos
e curtos será uma das
opções lá. Vou deixá-lo lá dentro. E agora temos um campo
para inserir nosso código curto. Então vou voltar ao nosso
formulário no outro. Nesta outra guia, vou clicar neste código curto da
carpa da roda dentada. Volte aqui, e eu vou colar aqui. Em seguida, publicarei a página. A postagem está ao vivo. Vamos visualizar. Lá nós o temos. Segundo método sobre como
exibir apenas no caso de você estar usando Elementor é
seu construtor de páginas. Então é assim que exibir
o formulário no front-end. E agora tenho
certeza que você está se perguntando, se eu quiser
mudar as cores? E se eu não quiser essa
borda nos campos de entrada? E se eu quiser alterar
o nome desta página um, página dois, página três. Como faço isso? Na próxima lição, veremos como mudar a aparência ou
o formulário para se adequar às cores da
sua marca. Então, vejo você em breve.
9. Personalizar a paginação do formulário: Então, estamos de volta ao
nosso painel. Agora queremos mudar a
aparência do nosso formulário. E para fazer isso, precisamos
entrar na guia Aparência. E você notará
rolando, é o próximo passo depois de
adicionarmos todos os campos de que precisamos. Assim, podemos clicar
nesse ou neste botão aqui e iremos para a guia
Aparência. Mas antes de fazermos isso, quero mudar esses títulos aqui para ler
algo diferente, como o passo dois ou qualquer coisa que você queira que eles
digam em vez da página um, página dois, página três. Então, mudamos isso
entrando na paginação aqui. Então clique nisso. E quando abrimos esse pop-up, a primeira coisa que
você notará são as quatro etapas em nosso fórum. Assim, podemos alterar
essas duas etapas. Etapa um, passo dois, passo três. E então complete ou qualquer
outra coisa que você quisesse salvar. Vamos ver o que isso parece. Aplicar. E vamos
visualizar as alterações. Agora ele mudou para o primeiro passo, passo dois, etapa
três e concluído. Vamos fechar isso. Vamos ver o que mais
podemos fazer em relação ao nosso formulário. Entrando nas configurações. Podemos alterá-lo de
etapas para uma barra de progresso. Isso significa que
não teremos o passo um, passo dois, o passo três ou quatro, selecionando a barra de progresso,
ela continuará preenchendo
até o final. Vamos aplicar isso e
ver o que parece. Clicando em Visualizar. Agora é assim que se
parece e
continua se enchendo em nenhum lugar
em vinte e cinco por cento. Se formos para o próximo passo, estamos em 5075, 100%. Voltando lá dentro. Vamos ver o que mais
temos no rodapé. Podemos mudar o que dizem
os botões
nas etapas de nossos formulários. Então, agora temos o
Próximo na página um, temos o botão Avançar. Na página dois, temos o botão
Anterior e Próximo, página três, Anterior
e Próximo. Na página quatro, só temos o botão anterior porque não
temos um botão próximo, só
temos o botão PayPal. Você pode mudar o que
quiser que isso diga. Vou fechar isso, terminar
a data do formulário porque o
atualizamos. Vamos para o front-end
e atualizar a página. Então, vou apertar o Control
R ou apenas recarregar. Agora nosso formulário foi atualizado. Tudo bem, então é assim que
editar as etapas no formulário. Em seguida, vamos ver como
editar a aparência real do formulário, como alterar as cores
das diferentes entradas e essas barras de
progresso aqui e os botões Vê-lo
no próximo lição.
10. Personalizar a aparência do formulário: Air, bem-vindo. Agora é hora de trabalhar na aparência
do fórum. Então, vamos
incitar diretamente a aparência. Vou clicar nisso. E como você pode ver, estamos
dentro da aparência. A primeira mudança que você pode fazer
aqui é o estilo de design. E temos alguns
estilos de design aqui para escolher. O padrão tem uma borda. Então temos um plano que
não tem uma borda. Este é o que eu gosto. Mas vamos dar uma olhada no quadro dos
outros e, em seguida, nenhum. Então você os seleciona se
quiser usar CSS personalizado. Então, se você souber codificar
seus próprios estilos de formulário, você pode apenas habilitar isso e agora começar a
estilizá-lo você mesmo. Mas porque eu
quero supor que nem todo mundo tomando
essa aula e sabe como trabalhar, veja como escrever código
CSS não
seguirão essa direção. Voltaremos para o apartamento porque eu gosto
sem esse quarto. E então a próxima
parte são as cores. Então, neste momento, estamos usando
as cores padrão, mas podemos mudar
para cores de fantasia. E é aqui que podemos editar
todos os aspectos do nosso formulário. Entrando aqui,
temos cores de borda, temos as cores dos botões. Vá para anterior, anterior. Vamos lá. Você notará que temos
o contêiner do formulário. Este é o contêiner que está
segurando o formulário em si. Agora é invisível, mas não precisamos tocar nisso. Agora mesmo. Gostaria de me concentrar nas
partes que realmente precisamos. Por exemplo, o botão Avançar, o botão Avançar, este
botão aqui. Então, vamos em frente e
selecione uma nova cor para ela. Digamos, por exemplo, alguma cor aqua ou
digamos verde. Digamos que uma
cor verde ao passar o mouse. Queremos fazer isso. Eu diria, digamos que laranja. Vamos copiar isso. Porque sem foco, também
queremos torná-lo dessa cor. Normalmente, as cores de
focagem e foco geralmente são as mesmas. Agora, se atualizarmos isso e acessarmos nosso formulário e
atualizarmos a página. Agora tem um verde e em
pairar, é essa laranja. Em seguida, queremos editar
o botão Voltar. Em outras palavras, os botões
anteriores. Então, se formos para a próxima página, agora queremos editar
o botão anterior. Então, podemos simplesmente copiar
esses valores. Copie isso, entre
no botão Voltar, clique nele, cole-o lá. Colapso que expande isso. Vire a caixa de cores aqui. Copie isso. Deixe-me rolar aqui. E passe o mouse. Queria ser
tão laranja e sem foco. Também queremos que seja
essa laranja. Atualize isso. Agora, se atualizarmos esta página, selecione e depois vá
para a próxima página. Agora, ambos são consistentes. Então, se essas são as cores da
sua marca, agora os botões do formulário estão
combinando com as cores da sua marca. Então, como mudamos essa cor das barras de
progresso? Voltando aqui, vamos recolher o
botão Voltar e o botão em seguida. Então temos uma barra de progresso. Vamos ver a barra de progresso
da nação da página. Aqui podemos mudar a cor. Digamos que seja verde. Quero voltar aqui e salvar o
botão
em seguida. Clique nisso. Vamos copiar isso. Então vamos rastejar para a
barra de paginação. Cole-o lá. Entre. Vamos atualizar isso. Vamos atualizar isso. Agora, nossa barra de progresso está combinando com a cor
verde da marca do nosso site. Não, blog pessoal. Em seguida. Em seguida. Em seguida. Não podemos editar a cor do botão
PayPal porque ela vem
diretamente do papel, não de quatro minutos. Vamos voltar aqui
e desmoronar essa data. Já o atualizamos,
mas não há problema, vamos
apenas atualizar isso. Vamos ver o
que mais precisamos mudar? Vamos para a etapa anterior. Por enquanto. Essas são as partes que precisávamos
mudar em nosso formulário. Mas é claro, como você pode ver, temos diferentes partes
do formulário que você pode personalizar até ficar
satisfeito com seu formulário. Vou deixar esses pontos. Você brinca
com todas essas partes? Altere uma configuração aqui, vá para a primeira página e
atualize a página para ver qual
parte foi afetada. Mas estou muito curioso para ver o que você será
capaz de inventar. É tudo sobre o quão
criativo você
será com todas essas partes. Você também pode editar as fontes
nas diferentes partes do formulário, habilitando a
edição personalizada em suas fontes. E, claro, abra
todos os campos ou elementos para os quais você deseja
alterar os textos. Mas não vamos
fazer isso porque
já gostamos da fonte
que estamos usando porque o formulário está
herdando atualmente a fonte definida no site. É assim que personalizar a
aparência do nosso formulário.
11. Define o comportamento do formulário: Bem-vindo de volta Com
nossa aparência de formulários agora atualizada para combinar com as cores da
nossa marca. Agora é hora de
analisar o comportamento após o envio do formulário. Assim, podemos clicar nesse comportamento aqui ou
rolar até o final aqui. Qualquer um deles pode fazer isso,
deixe-me clicar nisso. E, claro, você notará que ele foi automaticamente para esta guia. E agora o
comportamento de envio configura o que deve acontecer quando um
usuário envia este formulário. Após o envio, podemos selecionar os comportamentos
que queremos que
o formulário tenha aqui. Então, se eu abrir este
que vem por padrão, você notará que temos
três opções aqui. Comportamento podemos ter uma mensagem em linha que
vem logo abaixo ou acima do formulário após o usuário
enviar o formulário com sucesso. E vou te mostrar como parece. Em vez disso, também podemos
redirecioná-los para um URL. Então https, assim que eles clicarem em
Enviar e o formulário for enviado com sucesso, eles serão redirecionados para o Google. Também podemos ocultar o formulário
imediatamente após o envio e
mostrar uma mensagem, exatamente onde o formulário estava. Então, vamos voltar
para Mensagem Inline. E aqui temos um rótulo. Esse rótulo é visível
apenas para nós aqui
no painel para nos permitir
identificar o comportamento específico. Porque pode ter configurações
diferentes de
um comportamento diferente. Então, digamos, por exemplo, fórum de design de
sites. E vamos aplicar isso. E a mensagem
fechará automaticamente após cinco segundos. Lembre-se de que selecionamos Mensagem em
linha. Obrigado por entrar em contato conosco, será a
mensagem em linha que
aparecerá acima, abaixo do nosso formulário. E este é o
rótulo pelo qual
iremos, estaremos identificando-o. Deixe-me aplicar isso. E agora você vê que está bem aqui. Somente nós, como os administradores, podemos ver que ela é chamada de empresa de design de
sites. Então, voltando para dentro do
nosso campo por um momento, quero remover o PayPal. Quero remover as entradas
de papel para que fiquemos com
um botão de envio de mensagem. Assim, você pode ver como essa mensagem
de formulário em linha parece. Então, nós o atualizamos. Vamos para o front-end
e atualizar a página. Recarregar. Agora vamos selecionar esse blog pessoal. Não. Papel. Comente lá, máx. Portanto, temos este botão de envio de
mensagem. Se também adicionarmos um nome em gmail.com
e estamos pagando US$66. Então, se enviarmos uma mensagem, esse é o comportamento que
selecionamos aqui
em nosso comportamento. Se abrirmos isso, obrigado por entrar em contato conosco, entraremos em contato com você breve. Essa é
a mesma mensagem. Ele desapareceu
depois de cinco segundos porque é isso
que temos aqui. Porque isso é uma venda, mas este é um formulário de vendas. Podemos ter algo como agradecer por sua
compra e aplicar isso. Vamos atualizar o formulário. Vamos
para o front-end. Atualize a página. Agora, se eu selecioná-los aqui. Em seguida. Em seguida, Mike com e envie mensagem. Agora é obrigado
por sua compra. E podemos alterar essa cor de
fundo
da resposta
entrando na guia Aparência. Sucesso da resposta. Mude para talvez essas
laranja que rimam com nosso site ou talvez digamos que essas cores
esverdeadas aqui. Então vamos atualizar isso. Agora, se voltarmos aqui e
atualizamos a página, recarregue-a. Em seguida. Se você precisar de um nome. Como você pode ver, o plano de fundo na mensagem mudou. A mensagem desapareceu
após cinco segundos. Basicamente, vamos
voltar para dentro do comportamento. E há mais
configurações aqui, como método, queremos usar adjuntos para enviar este formulário
sem recarregar a página ou usar o método
mais tradicional de recarregar a página. Agora, não vou aprofundar
todas essas configurações aqui, mas recomendo que você vá conferir o canal oficial do YouTube
da equipe de formuladores. Chama-se WPA MU Dev. Aqui está o link para o canal. Confira-os e aprenda o máximo
possível sobre as diferentes maneiras com as quais você
pode trabalhar formulado. Isso foi apenas para
mostrar como criar esse formulário e torná-lo
um formulário de várias etapas. Portanto, não podemos entrar em todos esses
detalhes porque isso
significaria que essa classe se torna muito longa e
não é isso que queremos. Então, basicamente, é
assim que construir um formulário. Deixe-me ir para o front-end. Então é assim que o formulário se parece. O que fizemos foi
entender como criar os diferentes campos
e como criar várias etapas que
deixam o usuário selecionar
opções diferentes
dependendo do que deseja fazer. Então, finalmente, faça
a compra deles. Claro, isso é apenas o
começo da jornada. Para saber mais, você precisa interagir com esse
plugin ainda mais. E você precisa assistir
tantos vídeos quanto
puder sobre as outras configurações que não
analisamos. Pelo menos você
aprendeu a criar um formulário de várias etapas usando
o formulário do formulador. E como você pode ver, temos mais opções aqui que não
exploramos. E a razão é que não
queremos nos desviar do
objetivo principal da classe. Depois de aprender
a criar esse formulário, você precisa entender
como colocar o formulário em uma página da Web lindamente
projetada. E eu tenho várias aulas
aqui no Skillshare mostrando
como criar lindas
landing pages usando o Elementor. Assim, você pode usar essas
habilidades para criar belas páginas da Web e
, em seguida, usar as habilidades que aprendeu
nesta classe para adicionar esses formulários de várias etapas
diretamente nessa página. Então eu recomendo que você confira meu perfil e veja as diferentes
classes que eu tive lá e veja se você pode aprender algo sobre Elementor e se você tem alguma dúvida
ou comentário, por favor digite logo abaixo deste vídeo na guia de
discussões. E eu vou
te responder assim que eu puder peça. Estou ansioso para
ouvir de você até a próxima vez. Paz.
12. Conclusão: E isso é tudo de mim hoje. Isso é tudo o que tenho para
você nesta classe. Espero que você tenha aprendido a criar um formulário de várias etapas para
o seu site WordPress. E acima de tudo, espero que
você tenha aprendido a aplicá-los ao seu site
real. E como mencionei anteriormente, você pode ir em frente e
conferir todas as aulas
publicadas antes
aqui no Skillshare, abrir meu perfil e ver em qual classe
você está interessado. Vou te ensinar como criar páginas de destino
incríveis e um site totalmente funcional usando o
WordPress e o Elementor. Caso contrário, por
enquanto, tenho que me
despedir e te vejo
na próxima peça.
Ken Mbesa, Web Designer | 3D Artist
