Formulários em várias etapasé um método de dividir um formulário em várias etapas ou secções, o que facilita o preenchimento de formulários complexos pelos utilizadores e melhora a experiência geral do utilizador. Ao orientar os utilizadores através do formulário, passo a passo, pode reduzir eficazmente as taxas de abandono dos utilizadores, garantindo simultaneamente uma maior precisão na recolha de dados. Este artigo descreve em pormenor como criar formulários de várias etapas no WordPress utilizando o plug-in Elementor.
Passo 1: Adicionar campos de formulário
Para criar um formulário em várias etapas, é necessário adicionar o widget Form Fields à tela do Elementor. Cada etapa do formulário será representada como um contentor no layout do Elementor.
- Abrir o editor ElementorIr para a página onde pretende adicionar o formulário ou criar uma nova página e clicar em "Editar com o Elementor"Botão.
- Adicionar um widget de formulárioProcurar o widget "Form" no painel esquerdo do Elementor e arrastá-lo para o ecrã.
- Adicionar camposNas definições do widget de formulário, adicione os campos obrigatórios. Cada campo representa informações que um utilizador tem de preencher, como o nome, o e-mail, o telefone, etc.
Passo 2: Atribuir um ID ao contentor
Uma vez que cada passo num formulário de vários passos é um contentor, é necessário fornecer um ID único para cada contentor no separador Advanced (Avançado) do painel Elementor Settings (Definições do Elementor).
- Selecionar contentorClique no contentor de cada etapa do formulário para abrir as respectivas definições.
- Adicionar IDID CSS: Vá para o separador Avançadas e introduza um ID único no campo ID CSS. Este ID será utilizado para fazer referência à etapa no widget de formulário de várias etapas. Por exemplo, pode utilizar id1, id2, id3, etc. para se referir a diferentes etapas.
Passo 3: Adicionar o Widget de Formulário Multi-Step ao Layout
O widget Formulários em várias etapas é onde configura os IDs para cada etapa para unificar todos os contentores num único formulário.
- Adicionar widget de formulário em várias etapasProcurar o widget "Multi-Step Form" no painel esquerdo do Elementor e arrastá-lo para a tela.
- Configuração ID do passoNas definições do widget Formulário multi-passos, adicione o mesmo ID que foi especificado anteriormente para o contentor, o que garantirá que o widget Formulário multi-passos identifica e se liga corretamente aos contentores de passos individuais.
- Definir o estiloEm Estilos, pode estilizar os botões Seguinte e Anterior, bem como os indicadores de passo. Certifique-se de que os estilos são consistentes com o design geral do seu site para proporcionar uma experiência de utilizador consistente.
Passo 4: Adicionar um botão Enviar
No mesmo contentor, adiciona o widget de formulário em várias etapas e, em seguida, adiciona o widget do botão de submissão.
- Adicionar widget de botão de envioNo painel esquerdo do Elementor, procure "Botão Enviar" e arraste-o para o contentor da última etapa no ecrã.
- Configurar o botão EnviarO widget do botão Enviar liga automaticamente para a página Formulário em várias etapas.
- Guardar e pré-visualizarDepois de concluir todas as definições, clique em "atualização" para guardar as alterações. Pré-visualize a sua página para se certificar de que o formulário em várias etapas está a funcionar como esperado.
resumos
Os formulários em várias etapas melhoram a experiência do utilizador e reduzem o abandono, dividindo formulários complexos em várias etapas. A utilização do plugin Elementor no WordPress facilita a criação desses formulários.