Categoria:
- Nivel: Fácil
- Conhecimento: css(básico)
Olá babys! Nesse tutorial vou ensinar vocês como utilizar o formulário de contato nativo do blogger em qualquer página que você desejar, igual ao que eu utilizo na minha página de contato. Assim você também terá um espaço mais particular para quem quiser entrar em contato com você sem precisar utilizar os comentários do seu blog.
Vamos ao tutorial.
1º Passo - Ativar o Formulário Nativo
Ná opção de layout adicione um novo gadget, no local de sua preferêcia.
Selecione o gadget de Formulário de Contato. Se o seu blog já possui um formulário pule essa etapa.
Obs: Eu prefiro por esse gadget na sidebar e arrastar para o final da fila, para não atrapalhar no modelo.
Agora o formulário de contato vai estar visível no local de sua opção. Porém queremos o formulário em uma página, então vamos esconde-lo usando css e deixando apenas seu código ativo.
2º Passo - Identificando o seletor ID
Na página Tema vá para a opção Editar HTML.
Click no botão Ir para o Widget e procure pelo seletor ContactForm, mostrado na imagem abaixo.
Todo widget tem uma numeração no final então fique atento a isso, se for o primeiro formulário no seu blog então ele será por padrão ContactForm1 igual ao meu.
3º Passo - Usando css
Dentro do HTML do seu tema, pressione
Pesquise por ]]></b:skin>.
Acima de ]]></b:skin> cole o css abaixo e salve.
#ContactForm1 {display:none;}
3º Passo - Página de contato
Crie uma nova página no seu blog com o título Contato.
Na caixa de postagens adicione o código abaixo e publique.
<div class="contact-form-widget"><div class="form"><form name="contact-form"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Nome" vinput="" /><br /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Email" vinput="" /><br /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mensagem" rows="5"></textarea><br /> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" /><br /> <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>
