Como criar uma Página com Formulário de contato no Blogger

Nesse artigo vou te mostrar o código de formulário de contato para usar no Blogger, e você vai criar sua página de contato personalizada fácil.

A maioria das pessoas que utilizam o Blogger sabe que temos um widget de formulário de contato nativamente dentro do blogger. Esse widget Formulário de Contato pode ser inserido na sua página inicial e é usado na maioria das vezes em uma barra lateral dependendo do site.

Mas, oque nós vamos fazer é usar essa mesma base do formulário para inserir em uma outra página estática como uma página de contato de contato. E isso será bem simples!

Antes: Você pode ver esse tutorial em vídeo caso ache necessário mas, tudo está bem fácil logo abaixo...

Primeiro passo: 

Vá até Layout dentro do seu painel de administração do seu site Blogger, e adicione um novo widget Formulário de Contato.

A partir de agora em sua página inicial ou na sua barra lateral será exibido um pequeno formulário de contato, e o próximo passo será ocultar esse widget para ninguém o veja nesses lugares.

Para isso, copie esse pequeno código abaixo. Vá até Tema, clique em Personalizar, agora vá até a opção Avançado e depois em Adicionar CSS, Agora cole em Adiciona CSS.

[div#ContactForm1 {
display: none !important;
}]

Segundo passo:

Nesse passo você precisa criar uma nova Página de Contato caso ainda não tenha uma.

Agora dentro da área de edição da sua página escolha a opção Visualização em HTML e cole o código que está aqui abaixo em sua página.

Clique em Publicar ou em Atualizar e Pronto, basta visualizar sua página e ver o resultado do seu Formulário de Contato.

E se você tem algum conhecimento em CSS e HTML poderá fazer algumas modificações no seu código, mas, esse formulário irá se adaptar ao tema do seu site.

[<!-- Código do formulário de contato -->
<style>
.page-contact-form input,
.page-contact-form textarea {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.page-contact-form input.contact-form-button.contact-form-button-submit {
padding: 10px;
background: #000; /* Button background color */
color: #fff; /* Button text color */
border: none;
}
.page-contact-form input.contact-form-button.contact-form-button-submit:hover {
background: #777; /* Button background hover color */
color: #fff; /* Button text hover color */
}
</style>

<div class="contact-form-widget page-contact-form">
<div class="form">
<form name="contact-form">
Nome:
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail: <span id="required">*</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message: <span id="required">*</span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
<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>

</form>
</div>
</div>

<!-- Final do código do formulário de contato -->]

Espero que isso possa ter te ajudado a colocar um Formulário de Contato em uma Página do seu Blogger.