Seção de formulário de contato de design com elemento de formulário de contato

Sobre o elemento do formulário de contato

O elemento Formulário de contato é um recurso pré-criado no GemPages que pode ser facilmente arrastado e solto da barra lateral esquerda para sua área de design. 

Você pode personalizar ainda mais o formulário arrastando e soltando elementos adicionais do campo de formulário na barra lateral para incluir os campos de informações específicas que você precisa. 

O elemento do formulário de contato enviará dados ao Shopify Admin. Para obter informações mais detalhadas sobre o Elemento de formulário de contato, clique em aqui..

Projetando uma seção de formulário de contato com o elemento de formulário de contato

Primeiro, você precisa acessar o Painel GemPages e clique na página de destino para abri-la no editor.

Uma vez localizado no editor, siga estas etapas para criar uma seção de formulário de contato com o Elemento de Formulário de Contato do GemPages.

Etapa 1: arraste e solte o elemento do formulário de contato

• Na barra lateral esquerda, use a barra de pesquisa para encontrar o Elemento de Formulário de Contato. Em seguida, adicione-o à posição desejada na sua página.

Este formulário de contato padrão inclui componentes básicos, mas você pode personalizá-lo adicionando, alterando ou excluindo quaisquer elementos.

• Para remover um elemento, clique nele e selecione o ícone de lixo, e crie seu formulário do zero.

• Exclua todos os elementos pré-fabricados para criar um formulário de contato vazio:

Etapa 2: Crie o layout do formulário de contato

• Arraste e solte um Linha elemento no Formulário de Contato.
• Sob o traçado seção no painel de configurações, você pode configurar a linha para ser um layout de 1 coluna ou 2 colunas, dependendo de suas preferências.

Etapa 3: Adicionar elementos de entrada de formulário

• Em seguida, arraste e solte os componentes de entrada do formulário necessários. Para um layout de 2 colunas, coloque a primeira Campo de texto elemento na coluna da esquerda.

• Clique duas vezes neste Elemento de Bloco de Texto para editar o texto. Por exemplo, podemos alterá-lo para “Nome".

• Arraste e solte um Campo de texto Elemento sob o Bloco de Texto um para colocá-los na mesma coluna.

• Na coluna da direita, continue adicionando um novo Bloco de Texto e alterando o texto para “E-mail“. Em seguida, coloque um Elemento de Campo de E-mail abaixo deste elemento.

Etapa 4: adicione o botão Enviar

• Arraste e solte o Botão Enviar Formulário, o que é essencial para que os clientes enviem o formulário e suas informações ao seu administrador do Shopify.

• Ajuste o alinhamento deste botão para centralizar e melhorar a visibilidade.

• Vou ao Guia Avançado e ajuste o espaçamento sob o Espaçamento seção.

Etapa 5: Configurar as configurações do formulário de contato

Configure as configurações para personalizar cada condição:

• Depois de enviar: Escolha se deseja permitir que os clientes permaneçam na página atual ou redirecioná-los para um URL ou página específica após o envio do formulário.
• Mensagem de sucesso: Exibe uma mensagem para confirmar o envio bem-sucedido.
• Mensagem de erro: Exiba um alerta se houver um erro que impeça o envio do formulário, como problemas com o sistema Shopify.

Crie um formulário de contato a partir de um modelo na biblioteca

Você também pode criar um formulário de contato usando modelos pré-criados da Biblioteca.

Etapa 1: Clique no Aba Seção na barra lateral esquerda e role para baixo até Contato opção.

Etapa 2: Passe o mouse sobre Contato para ver todas as seções de contato pré-criadas da biblioteca GemPages, arraste e solte a preferida na área de design.

Passo 3: Você pode personalizá-lo do seu jeito ou simplesmente salvar e publicar a página com esta seção de contato pré-criada.

Solução de problemas com o formulário de contato

Se o seu formulário de contato não estiver funcionando como esperado, verifique os problemas comuns abaixo e siga as soluções sugeridas.

Problema 1: Código de erro {"msg":"Missing credentials","status":"error"} aparece após o envio do formulário

Possível causa: Isso geralmente acontece quando o formulário é testado no Página de visualização Em vez da página ao vivo. O ambiente de pré-visualização pode não ser totalmente compatível com o envio de formulários.

Como consertar:

Certifique-se de testar o formulário de contato no página publicada ao vivo só.

Siga esses passos:

1. Clique Publicar Para publicar sua página.
2. Abra o URL da página ativa em uma nova aba do navegador.
3. Envie o formulário novamente a partir da página ativa.
4. Verifique no seu painel de administração da Shopify para confirmar se o envio foi recebido.

Problema 2: O formulário de contato não é exibido na página publicada.

Possível causa: O formulário de contato foi adicionado dentro de um Página de destino instantânea (ILP).
Páginas de destino instantâneas Não é compatível com formulários de contato do Shopify., porque o formulário de contato é um recurso nativo do Shopify.

Como consertar: Em vez de usar uma Página de Destino Instantânea, mova o formulário de contato para uma página normal do GemPages.

Solução recomendada:

• Crie ou abra um página normal em GemPages.
• Arraste e solte o Elemento do formulário de contato na página.
• Salvar e publicar a página.
• Abra a página ao vivo para confirmar se o formulário de contato aparece corretamente.