Manual na Rede: Formulário de contato personalizado

Como colocar um formulário bonito em seu blog

1- Vá em Layout >> Adicionar um Gadget >> Mais Gadgets >> Formulário de contato e clique em adicionar formulário.

2- Após adicionado, ele aparecerá como um formulário simples em seu blog parecido com esse abaixo:

Formulário simples

3- Para deixar ele personalizado e bonito, vá em Modelo >> Editar HTML >> Ir para um Widget >> e de todas as opções, role até em ContactForm1.

4- Na linha <b:widget id='ContactForm1' locked='false' title='Formulário de contato' type='ContactForm'> clique na cetinha preta pequena e expanda até que apareça todo esse código abaixo:

<b:if cond='data:title != ""'>
<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 + "_contact-form-name"' 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 + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>

5- Após localizado, exclua todo esse código acima e substitua por esse abaixo e salve. Mas preste atenção para não excluir coisas a mais ou a menos, é importante reparar no início e no fim do código para identificar e concluir corretamente.

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='man1 man2 man3 man4 man5 man6 man7 man8 man9 man10'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='assous' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<input class='assous' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
<br/>
<textarea class='assousa' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message'/>
<p/>
<input class='assousao' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>

6- Após salvo, aplicaremos o estilo, escolha qualquer modelo abaixo, copie o código na caixinha, e vá em Layout >> Adicionar um Gadget >> HTML/JavaScript >> cole e salve.

Estilo Marrom

Estilo Rosa escuro

Estilo Cinza

Estilo Rosa claro

Formulário menores para ser colocado nas laterais

Para colocar esses formulários pequenos, é só escolher o modelo, copiar o código na caixinha, e vá em Layout >> Adicionar um Gadget >> HTML/JavaScript >> cole e salve.