Nesta página
- Adicionar formulário de contato a seu site
- Definir as configurações para os formulários de contato
- Definir as configurações para cada elemento do formulário
- Formulários de contato de estilo e design
- Testar formulário e recuperar mensagens enviadas
- Adicionar o Google reCAPTCHA para evitar spam
- Solução de problemas do formulário de contato
- Perguntas frequentes sobre a configuração PHP
某些 Creative Cloud 应用程序、服务和功能在中国不可用。
Observação:
O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.
Quase todos os sites visitados têm uma página de contato que permite que os visitantes entrem em contato com o proprietário do site. Os formulários são muito úteis porque você pode coletar as informações de contato de possíveis clientes, ao mesmo tempo em que evita o email de spam que pode ser gerado quando publica um endereço de email diretamente em uma página da Web.
Neste artigo, aprenda como adicionar e configurar formulários de contato para seus sites do Adobe Muse.
-
Expanda a seção Formulários e arraste o contato desejado para a página.Observação:
Se você quiser que um formulário apareça em todas as páginas, adicione o widget de Formulário de contato a uma página-mestre. Nesse caso, todas as páginas que usarem a página-mestre exibirão o formulário de contato.
-
Depois de arrastar um formulário para uma página, use a ferramenta Seleção para clicar uma vez para selecionar o formulário e então posicione-o no local desejado.
Como o widget de Formulários é responsivo, é possível visualizar e verificar o comportamento deste widget em diversos tamanhos de tela. Se você deseja alterar a posição do widget ou modificar as opções de redimensionamento e fixação para os campos do formulário de contato, primeiramente você precisa adicionar um ponto de quebra no local desejado. Em seguida, clique duas vezes e selecione o campo que você deseja fixar ou redimensionar. Você pode escolher entre as opções de redimensionamento Nenhum ou Largura responsiva.
Se você deseja fixar seus widgets de Formulários para uma posição específica em sua página, selecione a opção Fixar na barra de ferramentas da parte superior.
-
Ao projetar sites responsivos, você pode optar por fixar um campo de formulário específico de contato a um local fixo. Para fazer isso, adicione um ponto de interrupção. Quando o site é visualizado no tamanho de tela correspondente a este ponto de interrupção, o campo de formulário de contato parece fixo no local que você especificará na próxima etapa.
Clique duas vezes em e selecione o campo que você deseja corrigir e, em seguida, selecione a opção posicionar necessária.
-
Você também pode selecionar necessário redimensionar a opção para o widget de formulários e campos de formulário individuais. Selecione o elemento para o qual você deseja definir para redimensionar propriedades e selecione redimensionar a opção menu contextual na parte superior da página.
Você pode selecionar ou nenhuma ou largura responsiva como a opção redimensionar para formulários de contato.
Nesta seção, você verá as configurações do widget de Formulários e aprenderá como definir as configurações para um formulário de contato usando o menu de opções.
-
Use a ferramenta Seleção para selecionar todo o widget de Formulário de contato. Com todo o formulário selecionado, o Indicador de seleção no canto superior esquerdo do Painel de controle exibe: Formulário: Normal
O link Normal é um menu com quatro estados possíveis, assim como ativos de menu ou botões:
- Normal
- Enviando
- Envio com êxito
- Erro no envio
O Indicador de seleção exibe os estados disponíveis para todo o formulário.
Quando você quiser ajustar o formulário à medida que ele aparecer em vários estados, selecione o nome de estado correspondente neste menu.
O formulário exibido no estado Erro no envio.
-
Com todo o Formulário ainda selecionado no estado Normal, clique na seta azul para acessar o menu Opções. O conjunto de opções do menu Opções afeta todo o widget:
O menu Opções exibe as configurações para todo o formulário de contato.
Por padrão, o campo Nome do formulário é preenchido com o nome da página atual. É possível alterar esse nome, se desejar.
Se você quiser que os envios de formulário sejam encaminhados a vários endereços de email, insira os endereços de email (separados por ponto e vírgulas) no campo Email para.
O comportamento do envio de formulário é definido pela opção selecionada no menu Após o envio. Escolha uma das seguintes opções no menu Opções:
- Permanecer na página atual (padrão)
- Vincular ao arquivo (carregar um arquivo vinculado após o envio do formulário)
Escolha o comportamento do formulário usando o menu Após o envio.
Há dois tipos de novos elementos de formulários que podem ser adicionados:
Campos padrão
A lista de campos padrão inclui:
- Empresa
- Nome
- Número de telefone comercial
- Número de telefone celular
- Endereço comercial
- Número de telefone residencial
- Site
- Endereço residencial
- Captcha
Para adicionar qualquer um desses campos, marque a caixa de seleção em relação aos campos obrigatórios.
-
Para adicionar campos personalizados aos seus formulários de contato, clique no botão + ao lado do campo personalizado que você deseja adicionar e insira o rótulo no modo de exibição Design para descrever o novo elemento de campo de formulário que está sendo adicionado ao formulário.
Estes são os tipos de campos personalizados que você pode adicionar a um formulário de contato:
- Texto de linha única: Os campos de linha única devem ser usados para textos mais curtos, como a idade do visitante ou o CEP.
- Texto em várias linhas: Adicione os campos de texto de várias linhas quando quiser permitir que o visitante digite mais informações, por exemplo, para enviar um comentário ou fazer uma pergunta.
- Caixa de seleção
- Grupo de caixas de seleção
- Grupo de botões de opção
Quando você seleciona um elemento de formulário, o Indicador de seleção é atualizado para exibir o nome do elemento, como Rótulo, Entrada de texto ou Enviar. Com o Indicador de seleção, é possível ver qual elemento aninhado do formulário está selecionado atualmente.
-
Clique no formulário inteiro uma vez para selecionar o widget de Formulários como um todo. Para selecionar elementos individuais dentro do widget de Formulários, clique duas vezes e selecione o elemento.
Para saber se o widget inteiro ou um elemento individual está selecionado, exiba o Indicador de seleção. O Indicador de seleção exibe Formulário se você selecionou todo o widget e Entrada de texto se você selecionou um campo específico.
Quando um elemento de formulário de Entrada de texto é selecionado e você clica no botão de seta azul para acessar o menu Opções, as opções fornecidas oferecem configurações especificamente relacionadas a esse elemento.
O menu Opções exibe um conjunto contextual de opções para o elemento de formulário selecionado.
No menu Opções, com um elemento de Entrada de texto selecionado, você poderá decidir se o campo é necessário. Também é possível decidir se o campo exibe texto descritivo para ajudar o visitante a entender o que deve ser inserido ao preencher um campo.
Na seção Partes, marque ou desmarque as caixas de seleção para mostrar ou ocultar o rótulo do campo e o texto da mensagem.
Com um elemento de formulário selecionado, o Indicador de seleção exibe o nome do elemento, bem como um menu Estados que você pode acessar no Painel de controle (se aplicável). O menu no Indicador de seleção facilita a seleção do estado desejado durante a edição de elementos de formulário.
Com um elemento de formulário selecionado, use o menu Indicador de seleção para selecionar o estado desejado.
Com um estado selecionado, você pode usar o painel de Preenchimento ou o Painel de controle para ajustar sua aparência.
Os possíveis estados que você pode configurar para os campos do formulário são:
- Vazio
- Não vazio
- Em cima
- Foco
- Erro
Os estados de um botão Enviar são exibidos quando esse botão está selecionado.
Você pode configurar os seguintes estados para o botão Enviar:
- Normal
- Em cima
- Pressionamento do botão do mouse
- Enviando
Selecione o botão Enviar para acessar os estados do botão.
Observe que os estados de um formulário inteiro são exibidos quando o formulário inteiro é selecionado:
- Normal
- Enviando
- Envio com êxito
- Erro no envio
Com o formulário inteiro selecionado, você pode escolher seu estado para afetar o modo como ele será exibido.
Você pode projetar a aparência dos widgets de Formulários e de elementos de formulário da mesma maneira que atualiza a aparência de outros widgets no Adobe Muse. Siga este fluxo de trabalho básico:
-
Use a ferramenta Seleção para selecionar todo o formulário ou o elemento de formulário que você deseja atualizar.
Por exemplo, para alterar o texto que aparece no botão Enviar, clique duas vezes diretamente no botão Enviar no formulário de contato. Você pode alterar o texto no botão Enviar por um Texto selecionando o texto Enviar na ferramenta Texto. Exclua o texto e digite uma nova palavra. Você também poderia selecionar estados diferentes do botão Enviar usando o menu no Indicador de seleção e alterando o texto para outros estados.
-
Depois de selecionar o elemento de formulário, você pode ajustar a aparência do elemento.
Por exemplo, clique duas vezes e selecione o campo Nome. Para selecionar a entrada de texto do campo Nome, você pode usar as opções no painel de Controle ou no painel de Preenchimento para definir a cor de fundo do campo de texto.
Use o painel de Preenchimento para definir a cor de preenchimento dos campos Entrada de texto.
Usando as opções do painel de Preenchimento, você pode definir a cor de preenchimento como sólida ou gradiente. Também é possível definir a imagem do fundo para o preenchimento e defina as opções Ajuste e Posição. Para ajustar a transparência do preenchimento, você pode modificar a configuração de Opacidade.
Observe que, a menos que você desabilite a opção Editar junto (que está habilitada por padrão), todos os campos serão atualizados quando um único campo for editado. Esse recurso ajuda a criar um design consistente em seu formulário e economiza tempo. No entanto, você sempre pode selecionar o formulário inteiro, clique no botão de seta azul para abrir o menu de Opções e desmarque Editar junto se você preferir alterar o estilo dos campos individualmente.
Quando a opção Editar junto está desabilitada, as alterações feitas a um tipo de elemento de formulário não são aplicadas automaticamente aos outros elementos do mesmo tipo.
Depois de configurar e alterar o estilo do seu formulário, salve o site e, em seguida, publique-o. Agora, você pode testar o formulário em um navegador.
-
Acesse a página com o formulário de contato e interaja com ele no site dinâmico. Verifique o que acontece quando você envia o formulário sem inserir conteúdo nos campos necessários. Verifique a aparência e o funcionamento do formulário e preste muita atenção no modo como ele exibe mensagens de erro.
Depois de determinar que o formulário funciona e é exibido conforme esperado, tente enviá-lo com uma mensagem de espaço reservado para o envio de mensagens. Verifique seu email e assegure que você recebeu a mensagem na sua caixa de entrada.
-
Na barra lateral esquerda, clique na opção Uso de formulários da Web na categoria Relatórios. O gráfico exibido mostra a atividade de formulário recente relacionada a envios de formulário.
Verifique o relatório de Uso de formulários da Web para saber quantos visitantes enviaram o formulário.
Usando os relatórios no Painel, você pode obter muitas informações sobre os visitantes do seu site. Você pode acompanhar as tendências para saber quando o site recebe a maior parte do tráfego e verificar o desempenho dos formulários adicionados ao site.
Essas informações são úteis para decidir quando adicionar promoções ou atualizar o conteúdo do site. Elas também o ajudam a interagir com os visitantes, pois você permite que eles enviem mensagens e comentários. Você pode conversar com os visitantes, em vez de apenas exibir informações em uma comunicação unidirecional do site.
Para saber mais sobre como criar sites com o Muse, acesse a página de Tutoriais do Adobe Muse. Consulte também a página Site of the Day para ver exemplos de designs da Web recentes criados com o Muse.
O Adobe Muse permite adicionar o reCAPTCHA, um serviço gratuito do Google para proteger seu site contra spam de comentários, registros falsos, etc. Você pode ativar o reCAPTCHA em formulários de contato no Adobe Muse para permitir que somente usuários válidos forneçam informações no seu site. Para mais informações sobre o reCAPTCHA, consulte Google reCAPTCHA.
O serviço reCAPTCHA exige gerar chaves públicas e privadas exclusivas para o domínio do seu site. Essas chaves precisam ser copiadas em campos específicos no Adobe Muse para habilitar o reCAPTCHA no seu site.
-
Configure o reCAPTCHA usando as seguintes opções:
- Chave pública: Ela é usada no código JavaScript que é servido aos usuários. Para obter informações sobre a geração de chaves reCAPTCHA, consulte Geração de chaves públicas e privadas.
- Chave privada: É usada para comunicação entre o servidor do site e o servidor do Google. É extremamente recomendado que você armazene a chave privada de forma segura e não a divulgue. Após perdida, a chave Privada não pode ser recuperada do Google. Para obter informações sobre a geração de chaves reCAPTCHA, consulte Geração de chaves públicas e privadas.
- Entrada obrigatória: Especifique se o reCAPTCHA é obrigatório. Por padrão, a opção não é editável e é selecionada.
- Tema: especifique se deseja selecionar o tema claro ou escuro para a caixa reCAPTCHA.
- Tipo: especifique se deseja ativar a verificação de imagem ou a reprodução de áudio para a verificação de reCAPTCHA. A reprodução de áudio permite aos usuários com deficiência visual navegar facilmente pelo site.
- Tamanho: especifique se o tamanho do reCAPTCHA deve ser normal ou compacto.
- Rótulo: marque essa caixa de seleção para exibir um rótulo do campo de reCAPTCHA. Use este campo para adicionar um título na seção de reCAPTCHA do formulário.
- Texto de mensagem: marque essa caixa de seleção para exibir uma mensagem.
-
Observação:
Não é necessário obter chaves para sites publicados atualmente no Business Catalyst.
Abra o Google Admin Console em um navegador. No Google Admin Console, clique em Cadastrar-se agora para se conectar à sua conta do Google ou cadastre-se utilizando a opção Criar uma conta.
Depois de se conectar, você será redirecionado à página inicial do Google reCAPTCHA.
reCAPTCHA do Google
-
Copie a chave do site e a chave secreta nos campos Chave pública e Chave privada dentro do Adobe Muse, respectivamente.
Certifique-se de que você copiou as chaves completamente e se não se esqueceu de algum caractere.
Após obter um par de chaves para um domínio, o mesmo par será compartilhado em todos os formulários no site do Adobe Muse. Alterar um altera automaticamente todos eles e programa uma reexportação de todas as páginas e seus scripts .php correspondentes. Se estiver usando uma ferramenta de terceiros para arquivos FTP no servidor, certifique-se de que você copiou todos os arquivos .html e .php (arquivos .php estão dentro da pasta “scripts/”) no servidor, não apenas o arquivo que foi atualizado.
Não é possível personalizar formulários de contato usando Adobe Muse. No entanto, você pode usar widgets de terceiros para personalizar formulários de contato. Você também pode criar formulários personalizados inserir HTML personalizado ou usando widgets de terceiros.
Você também pode usar Business Catalyst para personalizar seus formulários de contato. Para obter mais informações sobre como trabalhar com formulários usando Business Catalyst, consulte.
Google lançou o reCAPTCHA v2. Se você estiver usando a versão anterior do reCAPTCHA, você deve ter as chaves públicas e privadas intactos. Google não suporta o reCAPTCHA v1 mais. Uma solução mais simples seria avançando para o reCAPTCHA v2. Para saber como configurar e usar o reCAPTCHA v2 em Adobe Muse, consulte configurar o recAPTCHA no Adobe Muse.
Alguns host da Web não suportam todos os requisitos para formulários de contato no Adobe Muse. Quando você carregar no host FTP usando o recurso de upload em Adobe Muse, lógica em tentativas de serviço de determinar se tudo está configurado corretamente nos servidores do seu provedor de host. Caso contrário, o Adobe Muse exibe um aviso com informações sobre os requisitos ausentes. Você pode entrar em contato com o seu provedor de hospedagem na web e peça para que para resolver problemas de configuração.
Depois de carregar seu site de Adobe Muse que contém um formulário de contato, você pode direcionar seu navegador < yoursite-address.com/scripts/form_check.php >. Se seu site suporta tudo o que é necessário para que os formulários funcionem, você deve notar três marcas de seleção verde nesta página. Caso contrário, entre em contato com seu provedor de hospedagem. Devem ser capazes de analisar o código PHP para este arquivo e determinar quais alterações de configuração precisam ser feitas no seu servidor para que os formulários de PHP do muse funcionem corretamente.
Este problema pode ser causado devido a alguns problemas. Siga essas etapas de solução de problemas:
1. Verifique sua pasta de Spam da caixa de entrada de email. Se encontrar mensagens de formulário em sua pasta de Spam, marque as mensagens como não-Spam.
2. Alguns provedores de hospedagem não enviam emails para um endereço de email no domínio de um site diferente. Por exemplo, se seu site é www.example.com, mas seu formulário está configurado para enviar e-mail para someone@email.com, o host da Web o provedor pode não enviar o email gerado pelo widget do formulário.
Para resolver este problema:
- Atualize seu formulário para enviar mensagens de e-mail para someone@example.com. Essa alteração pode resolver o problema e permitir que as mensagens ir completamente. Se você for provedor de hospedagem é GoDaddy e endereço de email do formulário é a uma conta de email non-GoDaddy, é necessário ativar o email "remoto" no cPanel. (A alteração semelhante pode ser necessária em outros provedores de hospedagem).
- Da página GoDaddy, navegue até a cPanel. Esse é o local onde você gerencia responsável pela hospedagem na web.
- Na página principal do cPanel, role para baixo para onde diz"::: Email"
- Clique em "na entrada MX", que esteja localizado diretamente abaixo das "contas". Essa é a configuração de cambista de email. Por padrão, GoDaddy suponha que você estiver usando uma conta de e-mail de GoDaddy.
- Certifique-se de que "cambista de email remoto" esteja selecionada.
- Por padrão GoDaddy suponha que estiver hospedando o e-mail com GoDaddy. Se você configurar um endereço de email para seu formulário que não é um endereço de e-mail hospedado GoDaddy, GoDaddy não aceita por padrão. Você precisa conceder a permissão de GoDaddy enviar um formulário no qual GoDaddy considera um endereço de email "remoto".
3. Alguns departamentos de TI para bloquear e-mails de someone@bigcompany.com para someone_else@bigcompany.com se a mensagem de e-mail não é enviada pelos servidores padrão de email de bigcompany.com. Tente alterar as opções de formulário para adicionar outro endereço de e-mail (listados primeiro), que não termina com: @bigcompany.com. Essa alteração pode permitir que as mensagens de formulário sejam enviadas a ambos os endereços de e-mail.
4. Visite http://my-site.com/scripts/form_check.php em um navegador da web e certifique-se de que você pode visualizar todas as marcas de seleção verde. Se alguns itens não exibem marcas de seleção verde, significa que o servidor de hospedagem não está configurado corretamente para permitir que os widgets de formulário enviem mensagens de e-mail no endereço que você especificou.
Entre em contato com o seu provedor de hospedagem na web sobre o problema de configuração do servidor. Descreve os itens que não são marcados como verde na página de verificação de formulário, para que eles possam ajudá-lo a configurar os servidores para usar as configurações corretas.
Você precisa de um Javascript para recuperar informações de URL ou você precisa de um fundo dinâmico que preenche campos de formulário. A campos de formulário pré-preencher em Adobe Muse, integre seu formulário de contato em sua página Adobe Muse usando a opção de inserção HTML.
Integre o link ao script preset.js nas configurações na página Adobe Muse (cabeçalho). Integre o < body onload = "preenche (' myForm"); "> usando a opção de inserção em Adobe Muse HTML.
PHP é um idioma de scripts do servidor. Geralmente é usado para criar dinamicamente páginas da web. Você pode aprender mais sobre o PHP aqui:
Se você usa o recurso de texto sincronizado 'em Adobe Muse, o aplicativo saída qualquer página que usar o conteúdo sincronizado como um arquivo PHP quando você carrega a seu webhost usando FTP. Isso é feito para que o site contém apenas uma cópia dos dados compartilhados. Esses dados compartilhados são inseridos dinamicamente nas páginas e usados quando as páginas são renderizadas.
Os arquivos PHP também permitem o conteúdo sincronizado usando o Navegador da Adobe que a tecnologia de edição. Você pode editar o seu conteúdo uma vez e atualizá-lo em todos os lugares em seu site, onde deseja que o conteúdo sincronizado era reutilizado.
Quando você carregar usando FTP, as tentativas de Adobe Muse verificar se seu servidor de hospedagem web oferece suporte à tecnologia necessárias para fazer o trabalho sincronizado do recurso de texto para os visitantes do site. Se o seu host não oferece suporte à PHP, ou suportar somente uma versão muito antiga do PHP, Adobe Muse desativar a geração de PHP. Isso resulta em um aviso durante o processo de upload.
Um arquivo.htaccess é usado pela maioria dos servidores da web para configurar a página redirecionar e controla outras opções. Você pode aprender mais sobre arquivos.htaccess aqui:
Se Adobe Muse gera arquivos PHP para seu site, tente redirecionar a solicitação para a página anterior (por exemplo, mysite.com/about.html) para a nova página PHP (mysite.com/about.php). Isso é feito utilizando o arquivo.htaccess.
Sim. Abra a caixa de diálogo propriedades do site no Adobe Muse. Desmarque ativar para checkbox sincronizado de texto na seção de edição no Navegador. Agora Adobe Muse gerará os arquivos do.html em vez de arquivos.php Você deve selecionar o checkbox novamente se desejar usar a edição no Navegador para editar o texto sincronizado em um site.