Criar Página de Contato Com Gadget Formulário de Contato Oficial do Blogger

Índice

O Blogger lançou recentemente a sua versão oficial do Formulário de contato, mas ele só funciona na barra lateral do Blogger.

Se você não deseja adicionar o formulário de contato na barra lateral do seu blog, mas quer que ele apareça em uma página específica, estática, então este tutorial irá ajudá-lo.  

Como mover o formulário de contato para uma pagina estática?

Siga os passos abaixo para mover o formulário de contato para uma página estática. Se você quiser ver um demo, você pode conferir a minha página de contato. 

Primeiro, adicione o Gadget Formulário de contato à sua barra lateral. (Nós vamos esconder o formulário de contato mais adiante neste tutorial, mas você tem que adicioná-lo).
 
Meu tutorial anterior sobre como adicionar o Gadget formulário de contato do blogger vai ajudá-lo.
 
Agora, crie uma nova página em seu blog

Ao criar a página, você tem que mudar para o modo HTML, como mostrado na imagem abaixo. Em seguida, cole o código abaixo no editor de post, desativar os comentários e publicar a sua página.

<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=''/>
<div>Seu Email: <em>(Obrigatório)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<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'/>
<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 vá para Modelo > Editar HTML e saltar para o código do formulário de contato e expandir o código do gadget



e, em seguida, expandir a principal: b:includable



Agora delete o código destacado abaixo



de modo que ele fique assim:



Salve o modelo e está feito. Você agora tem uma página de contato estática no seu blog do Blogger :-)

Obs. Se você quiser implementar o estilo de modo que fique como a minha pagina de contato, faça o seguinte.

Acesse o menu “modelo >> Editar HTML >>  e procure por: ]]></b:skin>
 

Adicione o código abaixo antes de: ]]></b:skin>  

/* Formulário de contato */
.contact-form-widget {
width: 280px;
max-width: 100%;
margin: 0 auto;
padding: 30px;
background: #87CEEB;
color: #000;
}
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {width: 150px;font-size: 20px; height:40px;float: right; 
border-color: #87CEEB;
background: #4682B4;
color: #fff;
}

Clique em salvar modelo. Pronto!

Qualquer duvida use a área de comentários.