Porto Alegre/RS
51 98916.7090

Formulário de Contato e Google Maps

Aqui você aprenderá do zero a criar seu site em Wordpress, a melhor plataforma mundial.

Veremos aqui como inserir uma formulário de contato e o mapa do Google no site

Inserindo um formulário no site através do Contact Form 7

O Contact Form 7 pode gerenciar vários formulários de contato, além de permitir a personalização dos formulários e do conteúdo de e-mails, de modo flexível e uso de markup simples. O formulário suporta envio por tecnologia Ajax, CAPTCHA, filtragem de spam via Akismet e muito mais.

Na pesquisa digite CONTACT FORM 7 e clique em Instalar agora.

Após instalado, clique em Ativar.

Configurando o formulário de contato

Clique no envelope, conforme marcado.

Clique em Formulário de contato 1.

O código estará assim:

<label> Seu nome (obrigatório)
    [text* your-name] </label>

<label> Seu e-mail (obrigatório)
    [email* your-email] </label>

<label> Assunto
    [text your-subject] </label>

<label> Sua mensagem
    [textarea your-message] </label>

[submit "Enviar"]

Deixe-o assim, pode copiar e colar se preferir.
Vamos incluir um campo para o telefone.

<label> Seu nome (obrigatório)
    [text* your-name] </label>

<label> Seu e-mail (obrigatório)
    [email* your-email] </label>

<label> Seu telefone (obrigatório)
    [email* your-fone] </label>

<label> Assunto
    [text your-subject] </label>

<label> Sua mensagem
    [textarea your-message] </label>

[submit "Enviar"]

Clique na aba Mail. Os campos estarão tipo conforme abaixo.

Vamos trocá-los!

Para: Coloque seu e-mail completo.

De: Troque Host iS pelo seu Nome comercial, troque a parte após o @, hostinovandosites.com.br pelo seu domínio sem o www.

Assunto: Apenas retire Host iS

Cabeçalhos adicionais: Deixe como está.

Corpo da Mensagem, substitua por este abaixo, pode copiar e colar:

De: [your-name] <[your-email]>
Assunto: [your-subject]

Seu telefone:
[your-fone]

Corpo da mensagem:
[your-message]

Selecione a caixa ao lado de Usar tipo de conteúdo HTML e clique em Salvar.

Você voltará para esta página abaixo, selecione o Shortcode, botão direito do mouse, copiar.

Agora vamos adicionar o formulário na página de contato!

Crie uma página chamado Contato ou Fale Comigo, adicione um item pelo sinal de +, selecione o item Widgets e Shotcode.

Cole o código no campo selecionado.

Pronto. Publique sua página!

Como inserir o mapa do Google no seu site.

Vamos inserir o mapa do Google Maps na página de contato? Em outras palavras, acesse www.google.com/maps e digite seu endereço conforme marcado abaixo.

O mapa irá avançar até seu ponto, clique no ícone de hambúrguer, conforme marcado.

Compartilhar ou Incorporar

Clique em Incorporar, selecione conforme marcado e copie para colar na página de contato.

Inserindo na página de contato

Abra para editar sua página de Contato, clique no sinal de +, Widgets e Shortcode e cole o código do Google Maps.

Aparecerá assim, em formato de código, não se assuste. Contudo, apenas mais uma correção para ficar bonito, procure on está escrito width=”600″ e troque o numeral “600” por “100%” e pode atualizar sua página.



CONVERSE PELO WHATS