Como Criar e Configurar um FORMULÁRIO com Elementor Pro [Passo a passo 2025]

neste vídeo eu vou te ensinar como criar formulários com Elementor Pro fala pessoal tudo bem aqui é a Micaela Dudos Complicando Sites e antes de continuar com a aula eu vou te pedir para deixar um like nesse vídeo que ajuda demais o nosso canal a crescer e para você se inscrever no canal bom pessoal eu vou usar como exemplo este site aqui do Dr antônio que é um projeto de site institucional que foi feito com o Elementor Pro e o WordPress eu te ensinei a criar passo a passo aqui no canal se você quiser adquirir

o template deste projeto ele está disponível à venda aqui na nossa loja de templates todos os projetos que a gente ensinar a criar aqui no canal a gente disponibiliza para vocês em formato de template que aí você pode comprar instalar lá no seu WordPress e só ir modificando de acordo com o seu nicho basta acessar templates.descomplicandsites.com.br ou clicar no link que vamos deixar aqui na descrição lembrando que eu vou ensinar você a usar o formulário do Elementor Pro se você ainda não tiver adquirido a sua licençor pro eu te recomendo adquirir com o nosso link

em toda descrição de todo o vídeo a gente sempre deixa os nossos links aqui e sempre deixamos o link do Elementor Pro aqui também você comprando com o nosso link você nos ajuda a trazer conteúdo mais relevante para você aqui no canal também tem vídeo no canal ensinando como funciona a licença do Elementor como escolher o melhor plano tá e se você não tiver o Elementor Pro e quiser fazer formulário com Elementor Free tem vídeo aqui ensinando também vou vir aqui e pegar um contêiner pra gente poder colocar o formulário aqui e eu ir explicando

para você então quando você vem aqui na biblioteca pesquisa por form já aparece aqui formulário e aí aqui em nome do formulário você pode colocar um título para esse formulário que aí na hora que você receber o e-mail com os dados que foram preenchidos aqui vai estar lá também o título desse formulário aí você consegue identificar mais fácil é bom principalmente se você tiver vários formulários no site ou algumas páginas diferentes né com formulário que aí você consegue identificar qual formulário é de cada página né por padrão ele traz três campos aqui pra gente: nome

e-mail e mensagem né caixa de mensagem mas você consegue excluir e modificar eles e aí você pode clicar aqui em adicionar um novo item ou você pode clicar aqui nessa abinha para duplicar quando você abre essa abinha aqui do campo você consegue configurá-lo aqui em tipo você consegue determinar qual tipo de campo você quer vou mostrar todos aqui para você então tem aqui o de texto que você consegue colocar um texto comum a gente usa para colocar por exemplo nome né assunto qualquer aba que você precisa que a pessoa digite um texto comum a aba

de e-mail que já é configurado para e-mail então se a pessoa digitar o e-mail não tiver um arro por exemplo que é característico de um e-mail ela não consegue preencher o campo o campo de área de texto que é o campo que a gente usa para mensagem aí geralmente ele é um campinho maior e se você quiser aumentar mais ainda esse campo você consegue aumentar por aqui ele vem por padrão configurado para quatro linhas mas você pode colocar quantas você quiser aqui para poder alterar o tamanho lembrando que se eu colocar aqui por exemplo quatro

linhas não quer dizer que ele vai caber apenas quatro linhas de texto eu posso digitar quanto texto eu quiser eles vai rolando a telinha para baixo é só o espaçamento aqui visível do formulário que a gente determina aqui por essa quantidade de linhas tá temos também o campo de URL que é pra pessoa colocar link o campo de telefone que já fica com a máscara já configurada aceita o número de telefone se você tentar digitar um texto aqui ele vai falar que precisa de um número botão de rádio botão de rádio para aparecer aqui você

precisa colocar as opções então aqui eu vou colocar por exemplo consulta online consulta presencial conforme eu vou colocando aqui vai aparecendo as opções e se você quiser que eles fiquem um do lado do outro você ativa essa opção de lista em line se você quiser um abaixo do outro deixa como padrão tem outro campo aqui bem semelhante a esse de rádio que é esse de caixa de marcação a olho nu parece que só mudou o formatinho né da opção aqui de marcar mas não aqui no campo de botão de rádio você só consegue marcar um

item de cada vez então serve para um campo em que a pessoa só pode selecionar uma coisa agora se você quiser que a pessoa consiga selecionar várias coisas aí você coloca a caixa de marcação que aí permite que a pessoa consiga selecionar vários de uma vez tem também o selecionar esse também é um que a pessoa só consegue selecionar um de cada vez e muda a visualização para esse tipo aqui de lista suspensa tem o aceitação que é um formulário padrão por exemplo em formulários que a gente precisa marcar para lcordo com os termos de

uso por exemplo aí novamente a gente tem que digitar aqui o que a gente quer que apareça aqui tem o campo de número aí esse daqui também se você tentar digitar com texto ó ele não vai e tem essa abinha aqui ó pra gente conseguir ir aumentando a numeração por aqui você consegue também colocar um valor de número máximo e um número mínimo tem data a data é bem legal porque quando você clica ele gera esse calendário ele tem como você alterar a visualização se você quiser mudar para HTML nativo que aí o calendário fica

dessa maneira aqui eu gosto mais do calendário padrão do Elementor que é esse aqui que fica mais bonitinho você consegue também determinar uma data né um período de data pra pessoa conseguir selecionar aqui só entre esse período que você marcou outro campo também é o horário também aparece aqui pra gente conseguir colocar e também aparece pra gente conseguir mudar para HTML nativo que aí muda o tipo de visualização tem que enviar arquivos pra pessoa conseguir enviar imagens fotos vídeos e aí aqui você determina até que tamanho do arquivo que a pessoa pode enviar aqui você

determina os tipos de arquivo ó por exemplo se você quiser que possa enviar vários tipos de arquivo você tem que colocar eles separados por vírgulas como por exemplo JPEG vírgula PNG vírgula PDF sabe então você determina aqui os tipos de campo que você quer que sejam permitidos colocar aqui se você quer que a pessoa consiga colocar vários arquivos se você não acionar isso ela só consegue enviar um de cada vez tá e aí aqui você determina até quantos arquivos que você quer que a pessoa consiga enviar aqui é como os arquivos são enviados para você

para pro dono aqui do formulário se você quer que ele seja enviado só o link e aí a pessoa clica lá e aí vem aqui pro site né para um link onde que tá o arquivo se você quer que vai em anexo né seu arquivo vai em anexado no e-mail ou se você quer que vai ambos tanto o link quanto o arquivo em anexo eu acho legal esse de ambos porque aí não tem erro né tiver algum problema no site já tá lá para baixar tiver algum problema para baixar no e-mail já tá aqui no

site pra pessoa conseguir pegar por aqui tem também a opção de senha que aí quando você vai digitando vai ficando assim travado com asterísticos aí você não consegue ver a senha tem a opção de HTML que aqui você consegue escrever um código HTML qualquer código que você quiser e aí gera o que você determinou de HTML aqui tem um campo oculto que serve geralmente pra gente utilizar contra robôs né e outros campos aqui de recapture que são configurações que a gente faz para impedir que a gente receba spam né porque aí os robôs não conseguem

preencher o recaptur e aí dessa forma faz com que só humanos consigam preencher e evita da gente ficar recebendo spam já tem vídeo aqui no canal ensinando sobre isso inclusive esse aqui também e aí tem esse último campo aqui que é o etapa que é o campo de etapa antes de mostrar para você o campo de etapa eu quero mostrar para você configurações que tem em todos os campos aqui em rótulo é o título que aparece aqui em cima tá vendo então se eu colocar aqui por exemplo que esse aqui vai ser o campo de

nome eu coloco aqui em título e o espaço reservado ou place holder aqui também em rótulo pode ser que esteja escrito label no seu se estiver escrito em inglês tá e aqui espaço reservado pode ser que esteja escrito place holder então aqui no place holder é o que vai estar dentro do campo então vou colocar por exemplo digite seu nome aqui se você quiser que seja obrigatório você vai marcar essa abinha aqui de obrigatório e aí a pessoa não consegue enviar o formulário se ela não tiver preenchido esse campo geralmente a gente coloca isso pelo

menos na aba de e-mail e nome tanto que quando você abre um campinho de e-mail ele já traz automaticamente aqui selecionado quando você coloca o formulário aqui a primeira vez né e esse título se você não quiser que ele apareça você pode vir aqui ó na aba de rótulo e desmarcar que aí não fica aparecendo porque às vezes conta do layout a gente gosta que não apareça o título apareça só o campo escrito aqui dentro né então por exemplo aqui nome em vez de colocar esse texto eu posso colocar nome e não colocar os títulos

né que aí o que é em cada campo já fica escrito aqui mesmo outra coisa que a gente consegue fazer em todos os campos também é determinar a largura da coluna então ele já vem por padrão em 100% da coluna aí você pode vir aqui e determinar então por exemplo eu quero que esse campo aqui de nome e esse aqui eu vou colocar telefone mudar para telefone quero que esses dois fiquem na mesma linha então vou vir aqui em nome colocar 50% aí vou vir aqui em telefone e colocar 50% também aí os dois vão

ficar na mesma linha se eu quisesse que os três campos ficassem na mesma linha aí eu colocaria 33% cada um tá vendo então dá paraa gente ir calculando aqui outra coisa que dá para você mudar em todo o campo é aqui na parte de avançado todo o campo ele vem por padrão com um ID e vem por padrão com um short code isso é importante você saber porque quando você for precisar desses campos aqui para configurar algum plugin de e-mail marketing ou para fazer alguma configuração avançada você sabe onde está esses campos inclusive tem até

um vídeo aqui no canal ensinando você como fazer para que o nome do cliente seja chamado na página de obrigado e aí a gente usa esse campo aqui lá na configuração então é interessante você saber disso lembrando que se você quiser que apareça o título é só deixar marcado aqui em rótulo e aqui em marcar etiqueta é para aparecer esse asterístico vermelho nos campos que você colocou como obrigatório que nem o meu tá no e-mail então aparece aqui antes de ir para botões aí eu vou mostrar para vocês o que ficou faltando aqui do tipo

de campo né que eu falei que é o campo de etapa etapa é um campinho que a gente faz justamente pra gente poder criar várias etapas então a gente consegue colocar por exemplo esses dois campos aqui para ficar na etapa número um e aí na etapa número dois eu vou tirar o obrigatório aqui só para não ficar pedindo toda hora aí na etapa número dois tá aqui o telefone tá vendo vou duplicar isso aqui só para ir mostrando para vocês aí você pode clicar aqui para duplicar a etapa colocar aqui em outro ponto duplicar e

colocar em outro ponto que você queira então dá para ficar fazendo várias etapas e o serve para quando a gente tem um formulário muito grande a gente não quer que o cliente se canse né perca o interesse de preencher então a gente usa essa arte mãha aqui para que fique mais leve paraa pessoa preencher inclusive tem um vídeo aqui no canal que eu ensinei vocês a fazer um formulário de briefing que é um documento que a gente cria para pegar os dados que o cliente quer que tenha no site pra gente poder criar o site

né e aí eu fiz ó um formulário com etapas porque são muitas perguntas né então para não ficar muito extenso aí eu criei esse formulário aqui com etapas e ensinei para vocês também e ok e aí em cada item de etapa você consegue vir aqui você consegue colocar um título também ó vou colocar por exemplo etapa um no botão anterior como por exemplo nessa página que eu estava te mostrando tem aqui o botão de voltar tá vendo que é o botão anterior e tem o botão de próximo então você consegue colocar nomes diferentes por padrão

vem esses nomes voltar e próximo né você geralmente coloca mas se você quiser colocar nomes diferentes você coloca também vou colocar por exemplo seguir no próximo e retornar nesse aqui só para você ver se você quiser colocar um ícone personalizado dessa etapa você consegue também ó você clica aqui e aí aqui tem todos os ícones você consegue selecionar qualquer um aqui ou então se você quiser você pode enviar um arquivo SVG também colocar esse aqui por exemplo aí aqui na aba de botões você determina o botão principal né se for um formulário por exemplo ó

deixa eu jogar eu estou duplicando esse formulário arrastando ele para cá e aí esse aqui eu vou tirar as etapas deixar só um formulário normal ó quando é um formulário como esse aqui é só o botão de enviar que a gente geralmente configura que é esse botão aqui ó botão de enviar porque só vai ter ele então a gente configura aqui escrito enviar a gente vem aqui em estilo em botões e aqui no no botão de próximo de enviar que a gente configura agora quando a gente tem um formulário de etapas como esse tem as

outras opções de botões então tem aqui o botão de enviar e os botões de etapa aí aqui nos botões de etapa a gente determina qual que vai ser o nomezinho que vai tá escrito aqui ó se eu clicar aqui em próximo no próximo botão vai ter retornar e seguir isso porque nessa etapa dois aqui eu vim aqui e coloquei esses nomes ó mas no próximo já vai ser o padrão que é o que é puxado nesses nomes aqui se eu não configurar nenhum nome ali no campo ele vai puxar por padrão só esses esses dois

aqui tá se você quiser pode colocar um ícone também enviar um arquivo SPG ou então colocar um ícone ó vou colocar um ícone de setinha por exemplo aqui determina a posição do ícone só que esse ícone ele vai aparecer só no botão de enviar aqui você determina o tamanho se você quer que seja um botão pequeno extra pequeno médio grande extra mesmo que você determine aqui depois você consegue configurar isso lá no estilo ok é uma das coisas mais importantes do formulário né que são as ações após o envio aqui já vem determinados a função

de coletar os envios e de enviar pro e-mail que que significa que vai armazenar os campos que forem preenchidos aqui e que também vai te enviar uma cópia por e-mail dos campos que forem preenchidos tem outras configurações por exemplo se você quiser que seja enviado pro seu e-mail e abrir um e-mail dois aqui você pode colocar para ser enviado pro cliente né para todos os campos que ele preencher aqui ser enviado para ele também aqui vem configurado para ser enviado para você mas se você quiser que seja enviado pro seu cliente por exemplo você vai

vir aqui em campos do formulário vai vir aqui na opção de e-mail vai vir em avançado vai vir aqui em short code né vai pegar esse campo aqui vai vir aqui em dois e aqui você vai colocar esse short code que aí automaticamente quando a pessoa preencher já vai ser enviado no e-mail dela já vai pescar o e-mail dela e já vai ser enviado aqui você configura o assunto se você quiser por exemplo que o assunto seja um dos campos que está aqui como por exemplo eh vamos supor que a gente tem aqui um campo

de consulta né campo de consulta e aqui a gente colocou paraa pessoa selecionar consulta online ou consulta presencial aí você vem aqui em avançado pega esse campo vem aqui coloca aqui no assunto por exemplo que aí já vai aparecer para ela por exemplo o assunto vai ser consulta presencial com Dr antônio sabe então ela já vai pescar e já vai configurar e aqui já vem esse campinho aqui de outfits né que é todos os campos aí aqui é o e-mail do remetente o nome do remetente né que é o e-mail seu do dono do site

o nome do remetente né o nome do dono do site ele já pesca essas informações aqui como padrão e como padrão ele vem esse e-mail aqui né que é e-mail @ e o link do site só que aí a gente tem que mudar esse e-mail por quê porque se a pessoa responder ela vai responder nesse e-mail aqui então é interessante que a gente configure um e-mail válido né que a gente pegue por exemplo um e-mail o e-mail certinho e coloque aqui para que se a pessoa responder o formulário vai ser respondido para cá então tanto

aqui quanto aqui no campo de de responder para a gente tem que colocar se você quiser que seja enviado uma cópia para outro e-mail e você coloca aqui também aqui os metadados ó que a gente quer que sejam capturados então a gente pode colocar para aparecer a data o horário que a pessoa preencher o formulário às vezes isso é importante né dependendo do tipo de atendimento o link da página se você tiver várias páginas é importante saber o agente de usuário né o tipo de usuário que preencheu então geralmente esses campos aqui de data e

hora e o RL da página são os mais usados e aqui se você quer enviar como HTML ou simples é mais interessante enviar como HTML que aí já envia todas as configurações padrões configurações das etapas que são essas abinhas aqui que a gente colocou né para ter vários várias etapas aqui que tipo de visualização que a gente quer tá marcado o número e texto como padrão se você quiser pode ser só o texto que aí fica só aquele textinho que a gente colocou só o número pode ser também uma barra de progresso pode ser também

o número e o texto pode ser o ícone que você colocou e o texto ou então pode ser só o ícone então tem diversas maneiras aqui da gente configurar essa abinha de etapas aqui o formato né se você quer quadrado círculo arredondado ou sem formato nenhum que aí aparece somente o item aqui da etapa e aqui em mais opções se você quiser colocar um ID no seu formulário para você fazer configurações avançadas e a validação dos formulários que a gente vai deixar padrão aqui você consegue configurar as mensagens personalizadas então por padrão quando a pessoa

envia o formulário aparece essa mensagem enviado com sucesso se d erro no formulário aparece essa se teve erro no servidor aparece essa se o formulário foi invado ou seja por exemplo aqui é um e-mail e a pessoa preencheu pro telefone aí aparece essa mensagem aqui de campo inválido você pode modificar todas essas mensagens aqui se você quiser vou deixar elas mesmo com padrão e vou vir aqui pra aba de estilo para você ver aqui em espaçamento da coluna vou deixar aqui um um campo com as colunas para você ver aqui espaçamento da coluna a gente

configura o espaçamento se tiver itens na mesma linha aqui o espaçamento entre as linhas aqui o espaçamento entre o rótulo né o título do campo e o próprio campo aqui a cor do texto do título e aqui é a cor da marca aqui para campos HTML né se você tiver usado aquele campinho HTME tiver colocado alguma coisa aí aqui são as configurações dele aqui são as configurações do próprio campo mesmo então aqui tem a cor de fundo a largura da borda a cor da borda o arredondamento do campo aqui tem a parte dos botões as

configurações de botões então tem tudo divididinho aqui aqui são as configurações de todos então ó pode ser alinhados ao centro de um lado do outro ou como estava que era esticado aqui na extensão de todo o formulário o alinhamento também ó esticado ou para um lado ou pro outro tá aqui a tipografia aqui a configuração de borda se você ativar a configuração de borda aí você consegue configurar a largura da borda consegue configurar a cor da borda aqui são as configurações pros botões de próximo e enviar aqui por exemplo você consegue configurar a cor da

borda cor do texto a cor de fundo aqui é pro botão de anterior então é esse botão aqui ó botão da pessoa clicar e voltar então aqui você consegue colocar uma cor diferente da cor de fundo dele ó consegue fazer configurações diferentes e aqui o arredondamento que é um arredondamento padrão aqui é o pading do botão preenchimento de dentro e aqui são aquelas mensagens eh padrões se você tiver feito por exemplo em cima de um banner colorido né em cima de um fundo colorido aí você tem que vir aqui e alterar a cor para uma

cor que seja facilmente visualizada em cima dessa corida que você colocou e aqui são as configurações das etapas né então aqui tem o espaçamento entre as etapas e o formulário o preenchimento aqui das etapas a largura do divisor e o espaçamento entre os divisores e aqui também as cores aqui é ele inativo aqui é como ele fica ativo e aqui é como ele fica quando está completo essas são as configurações aqui de criação e estilização aqui do nosso formulário e agora eu vou mostrar para vocês para onde vão esses formulários vou acessar aqui a minha

página de contato e se eu vier aqui preencher o formulário para uma mensagem de enviado com sucesso se eu vier aqui dentro do meu site vier aqui em Elementor enviário vai ficar aqui e aqui fica já a o e-mail que foi capturado se eu clicar aqui eu consigo ver o campos que foram preenchidos né e aqui a data a hora tudo certinho isso aqui também foi enviado pro meu e-mail então o e-mail que eu cadastrei aqui para receber é o e-mail para onde foram enviados os dados aqui do formulário então a gente recebe desse jeito

se você quiser que o recebimento desse e-mail aqui fique mais estilizado mais configurado tem duas maneiras ou você configura um e-mail marketing uma empresa de e-mail marketing que aí você consegue inclusive programar uma resposta automática você consegue ir capturando os dados das pessoas que vão enviando aqui o formulário para você e aí você vai lá e entra em contato com ela depois enviando promoções falando sobre os seus serviços ou produtos e você consegue configurar certinho esse recebimento aqui para você eu indico para você a empresa Omnisend que é uma empresa de meio marketing que a

gente tá fazendo vários vídeos aqui no canal ensinando você como usar então já tem vários vídeos te ensinando aqui inclusive até como usar ela em loja virtual também já ensinei entreguei ebook ensinei várias coisas eles têm um plano gratuito aqui se você quiser testar e se você quiser conferir você pode vir aqui em pring eles tm vários tipos de plano ó conforme você for atingindo mais pessoas na sua base aí você vai aumentando aqui o seu plano então tem plano até para mais de 150.000 usuários aqui na sua lista e aí conforme você for escolhendo

aqui a quantidade de usuários que você quer vai mudando o tipo de plano vou deixar o nosso link aqui na descrição porque se você quiser conhecer o Omnic acessa através do nosso link e também vou deixar a playlist e os vídeos da Omnicent para você aprender a usar tá então tem essa opção e você também pode usar outros plugins para poder configurar como Elemiler por exemplo já tem vídeo aqui no canal ensinando como usar ele que aí ele é só para você configurar esse meil de resposta tá e lembrando que também vai estar sempre aqui

no seu site disponível esses dados para você se por acaso o seu formulário não estiver sendo enviado se aparecer algum erro ao enviar a pessoa não conseguir concluir o cadastro ou não conseguir concluir o envio é porque o falta uma configuração no seu site que é a configuração de SMTP tem vídeo aqui no canal te ensinando como fazer isso basta vir aqui e pesquisar por SMTP nessa lupinha pequena aqui do canal que você vai encontrar os vídeos sobre isso tá então é isso pessoal essa foi a nossa aula de hoje espero muito que você tenha

gostado se você curtiu deixe um like no vídeo se inscreve no canal me segue nas redes um abraço até a próxima