Formulário de contato com som

Formulário com som e janela de notificação

Agora vamos seguir passo a passo.

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

Seu Nome :

Seu nome aqui

Seu e-mail :

seuemail@gmail.com

Mensagem:

Seu mensagem

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 um código parecido com esse 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 salve. Mas é muito importante atenção para não excluir algo a mais, é importante reparar no início e no fim do código para identificar e concluir corretamente.(veja um exemplo de como proceder clicando no botão abaixo) 


6- Depois desse processo todo, agora é só copiar esse código abaixo, e localizar  o TESTAREA e substituir por textarea  e finalmente ir em Layout >>Adicionar um Gadget >> HTML/Javascript  >> colar e salvar.

Veja um exemplo de formulário no botão abaixo:

<!--CÓDIGO ABAIXO, COLAR EM GADGET--> <center> <div id="box"> <form name="contact-form"> <div class="DivTit"> Seu Nome</div> <div id="SeuNome"> <input class="assous" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="DivTit"> Seu e-mail</div> <div id="SeuEmail"> <input class="assous" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div> <div class="DivTit"> Mensagem</div> <div id="Mensagem"> <testarea class="assousa" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></TESTAREA></div> <label class="checkboxSitrale mbs-trigger" data-modal="modal-1"><input type="checkbox" onclick="sendEmailMsg()"id="ContactForm1_contact-form-submit"/><div> ΟΙ</div> <b></b><span class='indicator1'></span></label><br /><div class="DivTit"> </div> </form> </div> <a href="//goo.gl/gnxdyc"target="_blank"><div class="Mnuau"> </div> </a></center> <div class="mbs-modal mbs-eleitor-1" id="modal-1"> <div class="mbs-content"> <div> <ul><div id="content" style="width:465; height:190px;"> <ul style="position: relative;"><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> <label class="checkboxSitrale pailantre"title="FECHAR"><input class="mbs-close"type="checkbox" onclick="sendEmailMsg()"/><div> ΟΙ</div> <b></b><span class='indicator2'></span></label></ul> </div> </ul> </div> </div> </div> <div class="mbs-overlay"> </div> <!--CÓDIGO ABAIXO ACIMA DO HEAD--> <link href='https://googledrive.com/host/0B1tpOE0JPK2oejNXcmliVS00WG8' rel='stylesheet' type='text/css'/> <!--CÓDIGO ABAIXO ACIMA DO BODY--> <script src='http://yourjavascript.com/1652271521/jsmodaldescricao1.js' type='text/javascript'/></script> <script src='http://yourjavascript.com/82163431112/formulario-com-som-e-janela.js' type='text/javascript'/></script> <script src='http://yourjavascript.com/2367235125/jsmodaldescricao2.js' type='text/javascript'/></script> <!--BOTÃO ENVIAR EXTRA PARA SUBSTITUIR CASO DESEJAR MUDAR O ESTILO--input class="Obotao mbs-trigger" data-modal="modal-1"id="ContactForm1_contact-form-submit"value="Enviar"style="text-align:center;"--> <!--IMPORTANTE LOCALIZAR E SUBSTITUIR O testarea PELO textarea COM X, o código foi aplicado dessa forma para NÃO dar conflito-->