CBBlogers

Dicas Tech

Formulário de Contato do Blogger

por Graziela Forti em Dicas Tech, Gadget, Layout

julho 31, 2014 11

Contato Blogger

O  Blogger já disponibilizou seu  gadget de Formulário de Contato, porém o formulário fica somente na barra lateral do seu blog, o que acaba deixando a sidebar cheia. Mas hoje vamos aprender com alguns truques de HTML como  esconder o formulário da barra da lateral  e utilizar o recurso fora de um Gadgets, em um pagina separada, somente para os contatos.

Passo 1: Criar a pagina de contatos, para isso é só ir até a opção Paginas e clicar no botão Nova Pagina.

Formulário de Contato, Blogger, CBBlogers

Passo 2 : Irá aparecer a pagina conforme abaixo:

Formulário de Contato, Blogger, CBBlogers

Passo 3 : Você irá clicar na opção HTLM e colar o seguinte código:

<form name=’contact-form’>

<div>Seu Nome:</div>

<input class=’contact-form-name’ id=’ContactForm1_contact-form-name’ name=’name’ size=’30’ type=’text’ value=”/>

<br/><br/>

<div>Seu E-mail: <em>(obrigatório)</em></div>

<input class=’contact-form-email’ id=’ContactForm1_contact-form-email’ name=’email’ size=’30’ type=’text’ value=”/>

<br/><br/>

<div>Sua mensagem: <em>(obrigatório)</em></div>

<textarea class=’contact-form-email-message’ id=’ContactForm1_contact-form-email-message’ name=’email-message’ rows=’5′></textarea>

<p></p>

<input class=’contact-form-button contact-form-button-submit’ id=’ContactForm1_contact-form-submit’ type=’button’ value=’Enviar Mensagem’/>

<div style=’text-align: center; max-width: 450px; width: 100%’>

<p class=’contact-form-error-message’ id=’ContactForm1_contact-form-error-message’></p>

<p class=’contact-form-success-message’ id=’ContactForm1_contact-form-success-message’></p>

</div>

</form>

Agora publique a página normalmente. A pagina já estará disponível para os seus leitores e o formulário será exibido, porém ainda não receberá mensagens, então agora vamos acertar isso.

Passo 4 : vamos editar o HTML para que você possa receber as mensagens do formulário no seu e-mail

No seu perfil do Blogger, vá na opção Modelo e depois clique em Editar HTML. Na pagina que irá abrir é só clique no menu “Ir para um widget” e escolha a opção “ContactForm1″ conforme imagem abaixo:

Formulário de Contato, Blogger, CBBlogers

Será necessário expandir as linhas do gadget que ficam escondidas nas setas pretas, para isso basta apenas clicar em cima das setas.

Depois de expandir a setinha da linha <b:widget id=’ContactForm1′ locked=’false’ title=’Contato’ type=’ContactForm’>, logo abaixo dessa linha existe o seguinte código:

<b:if cond=’data:title != &quot;&quot;’>

<h2 class=’title’><data:title/></h2>

</b:if>

<div class=’contact-form-widget’>

<div class=’form’>

<form name=’contact-form’>

<p/>

<data:contactFormNameMsg/>

<br/>

<input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ name=’name’ size=’30’ type=’text’ value=”/>

<p/>

<data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>

<br/>

<input class=’contact-form-email’ expr:id=’data:widget.instanceId + &quot;_contact-form-email&quot;’ name=’email’ size=’30’ type=’text’ value=”/>

<p/>

<data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>

<br/>

<textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>

<p/>

<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + &quot;_contact-form-submit&quot;’ expr:value=’data:contactFormSendMsg’ type=’button’/>

<p/>

<div style=’text-align: center; max-width: 222px; width: 100%’>

<p class=’contact-form-error-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-error-message&quot;’/>

<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>

</div>

</form>

</div>

</div>

Apague-o e pronto! Você verá que o formulário não está mais na barra lateral, somente na sua pagina. Acesse sua pagina do formulário e faça um teste para verificar se está funcionando. A mensagem será enviada para o seu e-mail padrão de acesso à conta do Blogger.

CBBlogers by Grazi Forti

Facebook / Twitter Pinterest Instagram

Comentários

  1. Foto de perfil de deise leite

    Maravilha de dica!!!! Preciso disso! Vou tentar fazer, espero que eu consiga! bjs

    Responder
  2. Foto de perfil de deise leite

    Não encontrei o código depois da linha para apagá-lo. 🙁

    Responder
  3. Goxtei da Explicação Ate xeguei Numa Solução Vantajosa! Mas Tenho Uma Pergunta: Como Adicionar Um Widget pra Que Um Cliente Possa Enviar Uma Musica Pra Meu Blog??

    Responder
  4. TODOS ESSES ENSINAMENTOS NÃO BASTA PARA QUE O FORMULÁRIO DE CONTATO DO BLOGGER FUNCIONE. FALTA MAIS EXPLICAÇÕES.

    Responder
  5. Foto de perfil de Joice Lima blog

    No editar HTML não tem a opção ContactForm1

    Responder
  6. Vou colocar no meu blog,tutorial muito bem explicado.
    Parabéns,sucesso para vocês.

    Responder
  7. Bom dia. Uso o template dinâmico e não sei se é por isso, mas mesmo seguindo suas dicas, o formulário mão envia.

    Responder
  8. Boa tarde. Tem como editar o email em que recebo os comentários do blog sem ter de mudar a propriedade do meu blog?

    Responder
  9. Nao achei o contactform1

    Responder
  10. Olá boa noite, vi a materia sobre o formulario de contato, gostaria de saber se tem como acrescentar envio de arquivos pelo formulario de contato : http://www.cbblogers.com/2014/07/formulario-de-contato-blogger/

    Responder
  11. Ola o botão enviar não esta enviando
    o

    Responder

Deixe um comentário

O seu endereço de email não será publicado.


*


#CNB2018 - VÍDEO OFICIAL
  
Pular para a barra de ferramentas