Usar o widget de Formulário no Adobe Muse

Abra o Adobe Muse. Clique duas vezes e abra a página no modo de exibição Design, onde você deseja adicionar o formulário de contato.

Abra o painel Biblioteca de widgets (Janela > Biblioteca de widgets). Clique em Formulários e então selecione um dos dois tipos de formulário:

• Contato detalhado
• Contato simples

Arraste o widget de contato para a página.

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.

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

Quando você quiser ajustar o formulário à medida que ele aparecer em vários estados, selecione o nome de estado correspondente neste menu.

Quando esse estado está selecionado, você pode ajustar a aparência da mensagem de erro. Por exemplo, você poderia alterar o conteúdo do texto ou a cor do texto de erro de vermelho para azul.

Selecione o estado Normal novamente no menu Indicador de seleção.

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:

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)

Há dois tipos de novos elementos de formulários que podem ser adicionados:

Campos padrão

A lista de campos padrão inclui:

• Email
• 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

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.

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 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

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

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.

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.

Clique no botão Publicar e em OK.

Uma janela do navegador é aberta para exibir o site publicado.

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.

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.

No Adobe Muse, selecione Janela > Biblioteca de widgets > Formulários. Arraste e adicione um formulário de contato simples ou detalhado.

No painel Opções, na lista suspensa Captcha, selecione reCAPTCHA v2.

Recomenda-se que você escolha a versão 2 do reCAPTCHA, pois o Google não oferece mais compatibilidade com a versão 1 do reCAPTCHA.

O campo de reCAPTCHA (verificação de imagem) é adicionado ao formulário.

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.

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.

Clique no botão Obter reCAPTCHA na parte superior da página.

Forneça o nome do domínio do seu site no campo Domínios. Não forneça o URL completo do site, mas somente o nome do domínio. Por exemplo, mysamplemusewebsite.com.

Clique em Registrar para gerar chaves públicas e privadas exclusivas para o seu site.

Observe a chave pública (chave do site) e a chave privada (chave secreta) que são geradas.

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.

Visualize a página no navegador ou no Adobe Muse para testar o reCAPTCHA.