CMS: criar um formulário personalizado com elementos de entrada que enviam para sua coleção
19 min de leitura
Crie um formulário personalizado que permite que os visitantes usem elementos de entrada para enviar informações diretamente para suas coleções do CMS. Os elementos de entrada incluem caixas de texto, seletores dropdown, seletores de data e hora, entre outros. Este artigo explica como criar uma coleção para armazenar os envios, adicionar elementos de entrada e um botão de envio e usar conjuntos de dados para conectar tudo isso.
Precisa de um formulário predefinido e personalizado mais simples?
Confira os Formulários Wix para visualizar templates de formulários que exigem menos configuração, como formulários de contato, formulários de pedido, formulários de registro, entre outros.
Antes de começar:
- Certifique-se de adicionar o CMS ao seu site se você ainda não fez isso.
- Para ter uma visão geral desse processo, confira nosso vídeo Ultimate CMS Guide (em inglês).
Etapa 1 | Crie uma coleção e defina as permissões
Crie uma coleção onde você armazenará os envios de formulários personalizados e definirá as permissões da coleção. Você pode escolher as configurações de permissão Coletar conteúdo e, em seguida, escolher quem deve ter permissão para adicionar ou visualizar o conteúdo do seu site online. Ou você pode escolher Personalizado para especificar quem pode visualizar, adicionar, atualizar e excluir conteúdo para cada função (administrador, criador do item, apenas para membros ou todos).
Você pode adicionar campos à coleção nesse momento, mas recomendamos que os adicione depois, na (etapa 3) quando você conectar os elementos de entrada. Dessa forma, você pode ter certeza de que está adicionando apenas os tipos de campos que podem se conectar a cada tipo de elemento de entrada.
Para criar uma coleção para armazenar envios de formulários:
- Vá para CMS no painel de controle do seu site.
- Clique em + Criar coleção.
- Insira um nome para sua coleção.
- Deixe Vários itens (padrão) selecionado e clique em Criar.
- Clique em Mais ações e selecione Permissões e privacidade.
- Escolha quais permissões usar para a coleção:
Observação: os proprietários e colaboradores do site são sempre tratados como administradores quando estiverem conectados ao site online. Isso significa que eles podem visualizar, adicionar, atualizar e excluir o conteúdo da coleção no site online. Essa regra se aplica, independentemente de qual permissão da coleção você selecione.
Coletar conteúdo
Personalizada
Etapa 2 | Adicione elementos de entrada ao seu site
Vá para a página ou seção em seu site onde você deseja criar o formulário personalizado. Em seguida, adicione todos os elementos de entrada que os visitantes usarão para enviar suas respostas. Lembre-se de que cada elemento de entrada tem limitações para os tipos de conteúdo que ele pode coletar e os tipos de campo aos quais ele pode se conectar.
Quais elementos de entrada podem ser definidos para coletar conteúdo?
Você pode escolher entre os seguintes elementos de entrada que permitem coletar conteúdo: Entrada de texto, Caixa de texto, Rich text, Botões de opção, Caixa de seleção múltipla, Caixa de seleção, Dropdown, Tags de seleção, Seletor de data, Seletor de horário, Slider, Botão de upload, Entrada de avaliações , Entrada de endereço, Opção alternar e Entrada de assinatura.
Editor Wix
Editor do Wix Studio
- Vá para o seu editor.
- Vá para a página ou seção onde você deseja criar um formulário personalizado.
- Clique em Elementos
no lado esquerdo do editor. - Clique em Entrada.
- Clique no tipo de elemento de entrada que você deseja adicionar.
- Clique e arraste o elemento de entrada relevante para a página.
- Repita os passos 3 a 6 acima para adicionar quantos elementos de entrada forem necessários para seu formulário.
Etapa 3 | Conecte os elementos de entrada à sua coleção.
Conecte cada um dos seus elementos de entrada a um conjunto de dados que se conecta à sua coleção. Em seguida, conecte os valores de entrada aos novos campos de coleção que correspondem ao tipo de dados que você deseja coletar.
Para as opções que aparecem nas listas dropdown e de tags de seleção, você pode usar itens de uma coleção diferente. Para fazer isso, conecte seus itens da lista a um conjunto de dados diferente que se conecta a um campo em outra coleção.
Editor Wix
Editor do Wix Studio
- No seu editor, clique em qualquer um dos elementos de entrada que você acabou de adicionar.
- Clique no ícone Conectar ao CMS
. - Conecte-se a um conjunto de dados que se vincula à coleção onde você armazenará os envios:
- Se você não tiver um conjunto de dados na página:
- Clique em + Adicionar conjunto de dados no lado direito. Em seguida, escolha a coleção a ser conectada, insira o nome do conjunto de dados e clique em Criar.
- Clique em Coletar conteúdo.
- Se você já tiver um conjunto de dados na página:
- Clique em Coletar conteúdo.
- Clique no dropdown Escolha um conjunto de dados e selecione o conjunto de dados relevante. Se preferir, clique em Adicionar conjunto de dados para criar um novo, escolha a coleção a ser conectada, insira o nome do conjunto de dados e clique em Criar.
- Se você não tiver um conjunto de dados na página:
- Conecte o elemento de entrada a um novo campo da coleção:
- Clique no dropdown O valor se conecta com e selecione Adicionar novo campo.
- Insira um Nome do campo para o novo campo da coleção.
- Selecione o Tipo de campo no dropdown. O tipo de campo determina que tipo de dados você pode armazenar no campo.
- Clique em Adicionar.
- (Se necessário) Clique na alavanca Conectar itens da lista para escolher onde gerenciar as opções do elemento:
- Ativada: use um campo de outra coleção do CMS para as opções. Conecte o conjunto de dados relevante e escolha os campos a serem usados no dropdown Etiquetas e valores se conectam a.
- Desativada: clique em Gerenciar opções para criar as opções para o elemento separadas do CMS.
- Repita esses passos para cada um dos elementos de entrada do seu formulário personalizado.
Etapa 4 | Defina os modos do conjunto de dados
Os conjuntos de dados controlam a conexão entre os elementos da sua página e as coleções, portanto, certifique-se de que cada conjunto de dados esteja no modo correto. Defina o modo como Gravação no conjunto de dados que se conecta à sua coleção de envios para que as entradas possam adicionar itens à coleção.
Se você conectou o dropdown ou as listas de tags de seleção a outro conjunto de dados e coleção, o conjunto de dados deve ser definido automaticamente e corretamente como Leitura e gravação. No entanto, se você os conectou a um conjunto de dados existente, certifique-se de definir seu modo como Leitura e gravação ou Leitura. Isso permite que as listas de opções mostrem itens da outra coleção.
Editor Wix
Editor do Wix Studio
- No painel à direita, clique em Configurações do conjunto de dados no primeiro dropdown Escolha um conjunto de dados. Esse conjunto de dados se conecta à coleção em que você armazenará os envios.
- Clique no dropdown Modo do conjunto de dados e selecione Leitura.
- (Se você conectou itens da lista ao CMS) Defina o modo para o conjunto de dados conectado aos itens da lista:
- Clique em Voltar ao elemento Dropdown na parte superior do painel.
- Clique em Configurações do conjunto de dados abaixo do conjunto de dados selecionado na seção Conexões da lista.
- Clique no dropdown Modo do conjunto de dados e selecione Leitura ou Leitura e gravação.
- (Opcional) Clique em + Adicionar filtro se quiser criar um filtro para excluir determinados itens da lista de opções.
- (Opcional) Clique em + Adicionar classificação se quiser escolher a ordem em que os itens aparecem na lista de opções.
Etapa 5 | Crie um botão de envio
Depois que os visitantes interagem com os elementos de entrada do formulário personalizados, eles precisam encontrar uma maneira de enviar suas respostas. Adicione um botão ou imagem e conecte-os ao mesmo conjunto de dados que se conecta à sua coleção de envios. Em seguida, defina a ação de clique do botão ou imagem como Enviar. Quando os visitantes clicam no botão Enviar, um novo item é criado na coleção com os valores de cada elemento de entrada nos campos relevantes.
Editor Wix
Editor do Wix Studio
- Clique em Elementos no lado esquerdo do editor.
- Clique em Botão.
- Clique e arraste o botão que deseja usar como botão de envio para a página. Você pode usar qualquer um dos seguintes tipos de botão: Botões temáticos, Botões de texto e ícone, Botões de ícone, ou Botões de imagem.
Dica: como alternativa, você pode adicionar uma imagem e usá-la como seu botão de envio.
- Clique em Alterar texto e ícone e insira o texto que deseja exibir no botão (por exemplo: "Enviar").
- Clique no ícone Conectar ao CMS .
- Clique no dropdown Escolha um conjunto de dados e selecione o conjunto de dados conectado à sua coleção de envios.
- Clique no dropdown A ação do clique conecta-se a e selecione Enviar.
- (Opcional) Adicione mensagens de sucesso e falha que aparecem quando os envios são feitos com ou sem sucesso:
- Clique em + Adicionar mensagem de sucesso e depois em + Adicionar mensagem de falha.
- Clique e arraste as duas mensagens para o local onde deseja que elas apareçam. Elas podem se sobrepor porque as mensagens não são exibidas ao mesmo tempo.
- Clique em Editar texto em cada mensagem para editar as mensagens.
- Selecione o botão e clique no ícone Conectar ao CMS . Em seguida, clique no dropdown Quando bem sucedido, ir para e selecione uma opção:
- Ficar nessa página: o visitante permanece na mesma página depois de enviar o formulário.
- Um link: o visitante é redirecionado para outra página após enviar o formulário. Clique em Escolher em Escolha um link e configure o link.
- Clique no botão e selecione o ícone Design para personalizar a aparência do seu botão de envio.
Etapa 6 | Personalize os elementos de entrada
Você pode personalizar cada um dos seus elementos de entrada para criar um formulário coeso que combina com o seu site.
Editor Wix
Editor do Wix Studio
- No seu editor, clique em qualquer um dos elementos de entrada que você deseja personalizar.
- Clique em Configurações para inserir o título do campo, definir o campo como obrigatório ou ajustar várias configurações, dependendo do tipo de entrada.
- Clique no ícone Layout
para ajustar o alinhamento do texto e outras opções de layout. - Clique no ícone Design
para escolher um design predefinido e selecione Personalizar design para ajustar ainda mais a aparência do elemento. - (Opcional) Clique no ícone Animação
para adicionar uma animação ao elemento. - Repita esses passos para cada elemento de entrada que deseja personalizar.
Pronto para ficar online?
Clique em Visualizar no canto superior direito do seu editor para testar seu novo formulário personalizado. Quando tudo estiver como você quer e funcionando perfeitamente, clique em Publicar para que as alterações apareçam online.
Se você ativou o Sandbox, sincronize sua coleção Sandbox com a coleção live para que as alterações no banco de dados fiquem ativas.
Perguntas frequentes
Clique nas perguntas abaixo para obter respostas às perguntas mais comuns sobre a criação de formulários personalizados usando elementos de entrada.
Como faço para encontrar as mensagens de sucesso/erro do meu botão de envio no editor?
Posso automatizar o que acontece quando recebo envios de formulários?
Posso exportar os envios que foram salvos para minha coleção?
Os visitantes do site podem usar elementos de entrada para filtrar o conteúdo que aparece no meu site?
De onde vêm os itens da lista se eu conectar listas dropdown ou de tags de seleção aos campos de referência?
Posso configurar meus campos da coleção antes de adicionar elementos de entrada?
Esse artigo foi útil?
|