Como colocar o Novo Formulário de Contato em uma determinada pagina do Blog

Olá pessoal! Hoje venho com uma ótima dica, desta vez, vamos aprender a como colocar o novo Widget Formulário de Contato do Blog para ele aparecer em uma determinada página. A vantagem de utilizar o formulário em uma específica página é, que não precisará o widget aparecer em todas as páginas, e não ocupará espaço deixando o seu blog mais organizado...

Bom, sabemos que o formulário de contato é muito importante e  não deve faltar em nosso blog, e hoje vou mostrar uma forma bastante legal de utilizar esta ferramenta, deixando a mesma para somente aparecer em uma determinada página do blog, facilitando a organização e ocupa menos espaço no blog.

Veja o exemplo do formulário na página: Demostração

Colocando Formulário de contato no blog em uma Página

1º Passo: Primeiramente você tem que acessar o Layout do blog, e adicionar o Gadget "Widget formulário de contato", para que em seguida nós possamos transferir o Gadget para uma determinada página.

• Se você não sabe como adicionar  o Gadget "Widget formulário de contato", peço que leia o tutorial anterior: Como adicionar o novo formulário de contato do blog.

2º Passo: Após ter adicionado o Gadget "Widget formulário de contato", crie uma nova página no blog, você pode colocar o título da página como "Contato" se preferir.

• A gora, copie o seguinte código do formulário, mostrado logo abaixo:

<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="" />
<br />
<div>
Seu e-mail: </div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br />
<div>
Sua Mensagem:</div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"> </textarea>
<br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Enviar" />
<br />
<div style="text-align: center&quot; max-width: width: 450px;">
<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>
</div>
</form>

• Então, você vai colar o código do formulário no HTML da página, basta clicar no botão >> HTML, conforme mostra o exemplo abaixo:

• Depois Salve a nova página criada.

3º Passo: Vamos agora acessar o HTML da Blog. Vá em Modelo >> Editar HTML:

4º Passo: Dentro do HTML do blog, você vai procurar pelo código do Widget formulário de contato. E para encontrar o código do formulário, clicar no botão "Ir para um widget" e em seguida clique na opção "ContactForm1", conforme mostra na imagem logo abaixo:

• Quando localizar a linha onde se encontra o código do formulário, clique na pequena seta para expandir a linha de código. Veja o exemplo na imagem abaixo:

• Agora expanda a linha seguinte que apareceu, a linha do "includable". Veja na imagem abaixo:

• Após expandir a linha de código, logo será aberto uma sequencia de código, a do widget formulário de contato, e atentamente você terá que apagar a seguinte parte do código mostrado na imagem abaixo:

Clique na imagem para visualizar

O mesmo código da imagem está sendo mostrado logo abaixo:

<b:if cond='data:title != &quot;&quot;'>

    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>

        <p/>

        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>

          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>

        </div>

      </form>

    </div>

  </div>

Depois de Apagar, o código terá que estar assim:

5º Passo: Enfim, depois de apagar o código mostrado anteriormente, Salve o modelo para finalizar.

Prontinho, agora é só você acessar a sua nova página de contato e lá estará o widget formulário de contato.