18 de julho de 2013

48

Como colocar o Novo Formulário de Contato em uma determinada pagina do Blog




Olá pessoal! Hoje venho com uma ótima dica, desta vez, vamos aprender a como colocar o novo Widget Formulário de Contato do Blog para ele aparecer em uma determinada página. A vantagem de utilizar o formulário em uma específica página é, que não precisará o widget aparecer em todas as páginas, e não ocupará espaço deixando o seu blog mais organizado...




Bom, sabemos que o formulário de contato é muito importante e  não deve faltar em nosso blog, e hoje vou mostrar uma forma bastante legal de utilizar esta ferramenta, deixando a mesma para somente aparecer em uma determinada página do blog, facilitando a organização e ocupa menos espaço no blog.

Veja o exemplo do formulário na página: Demostração

Colocando Formulário de contato no blog em uma Página


1º Passo: Primeiramente você tem que acessar o Layout do blog, e adicionar o Gadget "Widget formulário de contato", para que em seguida nós possamos transferir o Gadget para uma determinada página.

2º Passo: Após ter adicionado o Gadget "Widget formulário de contato", crie uma nova página no blog, você pode colocar o título da página como "Contato" se preferir.


  • A gora, copie o seguinte código do formulário, mostrado logo abaixo:
<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 />
<div>
Seu e-mail: </div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
Sua Mensagem:</div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"> </textarea>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
<br />
<div style="text-align: center&quot; max-width: width: 450px;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>



  • Então, você vai colar o código do formulário no HTML da página, basta clicar no botão >> HTML, conforme mostra o exemplo abaixo:

  • Depois Salve a nova página criada.
3º Passo: Vamos agora acessar o HTML da Blog. Vá em Modelo >> Editar HTML:
4º Passo: Dentro do HTML do blog, você vai procurar pelo código do Widget formulário de contato. E para encontrar o código do formulário, clicar no botão "Ir para um widget" e em seguida clique na opção "ContactForm1", conforme mostra na imagem logo abaixo:
  • Quando localizar a linha onde se encontra o código do formulário, clique na pequena seta para expandir a linha de código. Veja o exemplo na imagem abaixo:
  • Agora expanda a linha seguinte que apareceu, a linha do "includable". Veja na imagem abaixo:
  • Após expandir a linha de código, logo será aberto uma sequencia de código, a do widget formulário de contato, e atentamente você terá que apagar a seguinte parte do código mostrado na imagem abaixo:
Clique na imagem para visualizar
O mesmo código da imagem está sendo mostrado logo abaixo:
<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>


Depois de Apagar, o código terá que estar assim:

5º Passo: Enfim, depois de apagar o código mostrado anteriormente, Salve o modelo para finalizar.

Prontinho, agora é só você acessar a sua nova página de contato e lá estará o widget formulário de contato.

48 comentários:

  1. Pena que estou no celular e assim não posso fazer isso, mas daqui a pouco vou para o netbook ;) valeu cara.

    ResponderExcluir
  2. Muita criatividade sua ou de quem fez a verificação. Ficou algo simples e limpo pois são recursos do próprio Blogger e cara, gostei muito, parabéns.
    Tem um meme esperando por você no Arruma Blog, espero que participe mas não se sinta obrigado a participar, é uma forma de mostrar aos leitores um pouco mais de você ou do blog e propagar links pela web rsrsrsrs. Sempre prefiro os parceiros =D

    ResponderExcluir
    Respostas
    1. Olá Rafael Faria.
      Obrigado!!! Valeu pelo convite.

      Excluir
    2. Olá... desculpemas não consigo encontrar a parte que tenho que apagar no meu editor de HTML mesmo depois de expandir.

      Excluir
  3. Perfeito! Funcionou de primeira.

    Como faço para mudar o endereço de e-mail ao qual será enviado? Gostaria que fosse outro e-mail e não o meu padrão.

    Agradeço desde já.

    ResponderExcluir
    Respostas
    1. Olá!
      Eu já estou testando essa alteração mas não conclui, vou vê se é "possível" ou "não" mudar o e-mail padrão. Qualquer coisa eu deixarei respostas. Obrigado!

      Excluir
    2. Verdade, isso incomoda muito pq tenho 4 adms no meu blog

      Excluir
    3. Já conseguiu verificar a possibilidade de alterar o email?

      Excluir
  4. show de bola deu certinho aqui no meu blog.

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Este comentário foi removido por um administrador do blog.

    ResponderExcluir
  7. Eu consegui criar a página separada, porém o Widget continua aparecendo na minha página inicial, como remover de lá?

    ResponderExcluir
    Respostas
    1. Olá Bruno!
      No começo do tutorial eu informei que essa é uma continuação do tutorial anterior, e para num deixar este tutorial muito "extenso" eu disponibilizei o link da outra postagem que ensina a remover o windget. Obrigado!

      Excluir
    2. Não encontrei a outra postagem que ensina a remover o windget.

      Excluir
  8. Gostei, de certinho no meu Blog, gostaria de saber como mudar o email?

    ResponderExcluir
  9. Olá, valeu pela ajuda, deu certo no meu blog...

    ResponderExcluir
  10. Obrigado!!!

    Muito fácil, tudo perfeito.

    Parabéns.

    Jose Costa

    ResponderExcluir
  11. Funcionou !!!!!!! muito obrigado!!

    ResponderExcluir
  12. Valeu man, estava quebrando cabeça ha um tempo, mas agora ficou tudo mais facil.

    ResponderExcluir
  13. o meu nao apareceu a opção do contato no html

    ResponderExcluir
  14. Exelente, funcionou de primeira, ótima dica e parabéns

    ResponderExcluir
  15. Ótimo!
    Deu certinho. Gostaria de saber se tem como aumentar o campo de mensagem, pois fica bem pequeno.

    ResponderExcluir
  16. Respostas
    1. Olá Leomar Lima!
      Este, é um formulário padrão do Blog, e as mensagens enviadas pelo formulário serão enviada automaticamente para o e-mail do Administrador do Blog, é só você acessar seu e-mail e verificar a caixa de entrada do Gmail e as mensagens estarão lá.

      Excluir
  17. Perfeito, deu certo no meu blog... obrigado

    ResponderExcluir
  18. Muito bom e bem explicado. Finalmente consegui.Valeu!

    ResponderExcluir
  19. Olá, eu consegui colocar, foi fácil e funcionou. Apenas estou com um desafio. A cor da letra está cinza bem claro, muito claro, preciso colocar preto, como faço? Pode me ajudar por favor?

    ResponderExcluir
  20. gostaria de um que pudesse enviar imagens

    ResponderExcluir
  21. Olá,eu encontrei a parte do codigo que devo apagar,mas quando apaguei ocorreu erro de verificação na hora de salvar o modelo.
    Se puder ajudar...agradeço.

    ResponderExcluir
  22. SERÁ Q DÁ PRA ADICIONAR UM FORMULÁRIO DESSES NO FIM DAS POSTAGENS DO BLOGGER DINÂMICO... OLHEM O MEU DE TV ONLINE http://www.minhapctv.blogspot.com ASSIM AS PESSOAS PODERIA DIZER SE O CANAL ESTÁ ONLINE OU OFF.

    ResponderExcluir
  23. Não deu certo pra mim ;/

    Tem um link no meu menu como "Contato" e eu queria que aparecesse ali, mas não to conseguindo dar certo haha

    http://luhpookie.blogspot.com.br/

    ResponderExcluir
  24. Kelven, primeiramente obrigada pela ajuda.
    Tenho uma dúvida: e o email do contato?
    Aonde cairão estas mensagens? No meu email particular? É automático?

    ResponderExcluir
  25. Oi, eu testei e deu certo. Foi pro meu email automaticamente.
    Você está de parabéns por compartilhar e ajudar tanta gente.

    ResponderExcluir
  26. Olá, como faço para que este formulário vá para meu menu CONTATO.

    ResponderExcluir
  27. Show de bola, ajudou muito meu blog. Obrigado

    ResponderExcluir
  28. Oi! Já testei milhões de vezes mas toda vez que vou procurar o Widget "ContactForm1" simplesmente não aparece! Não está no Html :(

    ResponderExcluir
  29. Olá, fiz os procedimentos, mas na pagina, NÃO DÁ PRA ESCREVER... como resolver isso??

    ResponderExcluir
  30. Já resolvi o problema,,, desculpas... MUITO OBRIGADO AMIGO!!

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook