Quem tem um formulário de contato em seu site ou blog já deve ter sofrido com spans. Se você ainda não passou por isso e usa um formulário simples com certeza o seu dia vai chegar. Existem vários serviços que oferecem a criação desses formulários para serem usados e a maioria com poucos ou até nenhum recurso de bloqueio de mensagens indesejadas. O que vou mostrar aqui é mais um desses serviços só que com um diferencial. Além de gratuito ele tem captcha.
Você sabe o que é captcha não é? Se não sabe clique aqui para descobrir e ver algo interessante sobre isso.
Não vamos enrolar, acesse o site 123contactform.com e clique no botão verde "SIGN UP FOR FREE".
Clique no botão "SIGN UP" do plano básico que é o gratuito.
Preencha o formulário de registro com um endereço de e-mail válido.
Aqui você vê que o site oferece vários outros recursos. Clique em "Contact form".
Nesse ponto é que se define o nome do formulário. Esse nome não vai aparecer nele, é o nome do projeto que está sendo criado. Dê um nome e confirme em "OK".
Ao confirmar irá carregar uma página com um formulário já quase pronto. Isso ajuda porque você só vai precisar personalizar, adicionar ou retirar campos. Os recursos são muito fáceis e apesar de estar em inglês não acho que terá dificuldades.
No lado esquerdo existem recursos e campos que podem ser adicionados ao formulário, mas por enquanto não precisaremos mexer neles, vamos editar o que está pronto e deixá-los da maneira que queremos.
Ao clicarmos sobre um campo, como por exemplo o campo "Name", surgirão na parte esquerda do site as opções de edição desse campo. E se você clicar e segurar o clique, poderá arrastar esse campo para outra posição no formulário.
No lado esquerdo em "Label" é possível alterar o nome do campo.
Em "Label Style" é possível definir um estilo itálico, normal ou negrito para o nome do campo.
O "Field Size" determina o tamanho disponível para o preenchimento desse campo.
Em "Options" a única opção que é possível marcar é "Required" que adiciona um sinal de asterisco ao campo e impede que o formulário seja enviado se este campo não estiver preenchido. As outras opções são desbloqueadas somente para contas pagas.
Em "Instructions" você pode preencher com algum texto explicativo sobre aquele campo.
Vamos passar ao campo seguinte. Nós iremos criá-lo. Existem duas formas de criar um campo. A primeira é usando as ferramentas disponíveis na área esquerda.
Primeira forma de criar e adicionar um novo campo:
Clique na guia "ADD FIELD" e depois em "Website" e será criado um novo campo no formulário.
OBS: Esse mesmo procedimento serve para criação de outros tipos de campos.
Clique no campo para editá-lo e faça como já foi explicado antes. Vai ver que há um opção diferente no lado esquerdo, o "Field validation". Não tente alterá-lo, pois só contas pagas é que podem fazer isso.
Segunda forma de criar e adicionar um novo campo:
Essa é bem mais simples que a primeira e bem menos ajustável, pois só permite que sejam criados campos que sejam iguais aos que já estão adicionados ao formulário.
Quando você clica sobre um campo vai notar que do lado direito aparecem dois ícones pequenos.
O sinal de mais verde duplica esse campo criando outro igual no formulário. Clique nele e edite da maneira que quiser.
Vamos adicionar agora um campo para o assunto do contato. Você pode criar mais um campo de texto e deixar que a pessoa que for enviar o e-mail pelo formulário escreva qualquer coisa nesse campo ou criar um campo já previamente preenchido com algumas opções já definidas. Aqui no exemplo vou usar essa segunda forma.
Na guia "ADD FIELD" há um recurso que se chama "Dropdown". Adicione ele ao formulário.
Ao clicar nele, no lado esquerdo surgirão as opções de personalização do campo como em qualquer outro. Existe uma opção que é diferente.
A "Available Choices" é onde você deve definir em cada linha quais serão as opções selecionáveis nesse campo.
Em "Default Choices" é onde se define qual das opções será a padrão.
É possível também adicionar uma imagem ao formulário ou um logo. Clique na guia "ADD FIELD" e mais abaixo em "Advanced Fields" e depois em "Image". Ajuste a posição em que ela irá ficar.
Clique no quadrado "NO IMAGE SELECTED YET" e do lado esquerdo a única opção será "Customize Image". Clique nela.
O problema dessa opção é que no modo gratuito do serviço, não é possível fazer upload de imagem direto do computador, mas você pode subir a imagem para um serviço de hospedagem qualquer como o Picasa, pegar o link e colar. Depois defina se a imagem vai ficar alinhada ao centro, à direita ou à esquerda.
Ainda está faltando editar o topo do formulário. Clique onde está escrito "Contact Form" e vai surgir do lado esquerdo a opção "Edit Headline". Clique nela.
Aqui aparecem funções como as de um editor de textos. Faça a sua personalização e clique em "Save".
Lá na parte de baixo do formulário tem um botão "Send Email" Clique nele para personalizá-lo como fez com os campos.
Tem uma opção de adicionar um botão que limpa todos os campos do formulário. Adicione se quiser.
O formulário está praticamente pronto, mas ainda tem algumas personalizações que podem ser feitas e algumas configurações que irão melhorá-lo.
Lá na parte de cima do site tem uma guia com o nome "THEMES". Clique nela e escolha um tema de cores já pré-definido para o seu formulário.
Se quiser um tema personalizado terá que criá-lo a partir de um desses. Para isso ache um trecho de texto que está destacado na cor laranja e clique onde está "click here". A imagem abaixo mostra onde.
Se fizer isso o tema selecionado será duplicado e as funções que estão mais abaixo ficarão disponíveis para edição.
Nesse ponto do tutorial já estou começando a ficar com preguiça de explicar cada coisinha, então vou falar das mais importantes e o resto é só você mexer para ver a alteração na prévia ao lado. Enquanto você não clicar no botão "Save" nada será alterado no tema.
OBS: O formulário que mostra ao lado é só um exemplo, não será o formulário que você criou nas etapas anteriores.
Primeiro, se quiser, altere o nome do tema em "Theme name". Eu deixei como estava mesmo, já que não pretendia usar nenhum outro depois, mas se você for criar vários formulários e vários temas é bom nomeá-los.
Mais abaixo tem a opção logo. Ali você retira o logo padrão do site e se quiser substitui por um seu.
Para colocar o seu próprio logo ele já precisa estar hospedado na internet, aí é só colocar o link no campo "Custom logo URL".
O resto são personalizações de cores, vamos para a etapa seguinte. Clique no botão "Save" quando terminar.
Clique na guia "MY FORMS" lá no topo do site e depois em "Settings".
Na guia "Notifications" em "Where submissions are send to" deixe selecionada a checbox com o seu e-mail e se quiser poderá adicionar outros e-mails que serão notificados sempre que alguém usar o formulário.
Mais abaixo em "Actions made after submissions" você define se ao enviar o e-mail pelo formulário a pessoa verá uma mensagem avisando que o envio foi feito com sucesso, essa mensagem pode ser personalizada, se ela será enviada para uma página que você tenha criado ou no terceiro caso se acontecerão as duas coisas, a pessoa recebe a mensagem na tela e é redirecionada para outra página.
Ao terminar clique em "Save" e depois na guia "Theme".
Nessa guia tem um menu dropdown com todos os temas inclusive os que você criou. Escolha um para aplicar ao formulário.
Clique em "Save" e vá para a guia "Security". Aqui vem o diferencial desse serviço.
Aqui tem umas opções interessantes, mas a mais importante é a que habilita o captcha. Deixe em "Always show captcha".
Olhe outras opções dessa guia, clique em "Save" e o formulário estará finalmente pronto. Agora só falta pegar o código.
Ao passar o ponteiro do mouse sobre o texto "Publish Form" que está mais acima, aparece um menu. Clique em "Embed Code".
Você será redirecionado para uma página que contém 3 códigos do formulário para você adicionar em sua página de contato.
Os 3 fazem a mesma coisa, escolha o que preferir. O botão "Live demo" serve para mostrar formulários criados com cada tipo de código e não o seu formulário.
Para ver como ficou o seu formulário pronto vá à guia "MY FORMS" lá no topo e depois clique em "View".
Veja como ficou o formulário criado nesse tutorial.
É isso aí e até a próxima. ;-)
