segunda-feira, 1 de junho de 2015

Responsive Contact Form Blogger


Responsive-blogger-contact-form-blogger


Que tal adicionar um responsive Blogger contact por padrão o blogger vem um formulário padrão de contato por isso podemos estilizar para uma melhor aparência hoje vamos mostrar como adicionar esse lindo estilo ao seu blogger para adicionar no seu blogger vamos ao passos abaixo


Nota:
Antes de começar faça um backup do seu blogger.

Como adicionar:
Vá no painel do blogger faça login na sua conta do blogger
va em layout >> adicionar um gadget  escolha formulário de contato e salve  vamos a 2 parte

Adicionado o Código:
abra a aba modelo >> editar html  desdobre todo codigo blogger
pressione CTRL+ F e procure por </head> cole o codigo abaixo e cole antes dessa tag </head>

Codigo a ser copiado:


<link href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css' rel='stylesheet'/>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>


Parte 3 clique no menu Jump to widget selecione contact form  você vai ver esse codigo

 <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
            <b:includable id='main'>
  <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>
  <b:include name='quickedit'/>
</b:includable>
          </b:widget>

Note o inicio do código e fim do código listado em vermelho selecione o inicio e o final apague o codigo e copie o codigo abaixo e substitua pelo codigo acima:

<b:widget id='ContactForm1' locked='true' title='Contact Form' type='ContactForm'>
            <b:includable id='main'>
            <b:if cond='data:title != &quot;&quot;'>
              <h2 class='title'><data:title/></h2>
            </b:if>
              <form class='form' name='contact-form'>
                <div class='form-group'>
                  <label class='sr-only'><data:contactFormNameMsg/>&amp;nbsp;<span class='text-danger'>*</span></label>
                  <div class='input-group'>
                    <div class='input-group-addon'><i class='fa fa-user fa-lg'/></div>
                    <input class='form-control theName' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='Full Name (required)' type='text' value=''/>
                  </div>
                </div>
                <div class='form-group'>
                <label class='sr-only'><data:contactFormEmailMsg/>&amp;nbsp;<span class='text-danger'>*</span></label>
                  <div class='input-group'>
                    <div class='input-group-addon'><i class='fa fa-envelope fa-lg'/></div>
                    <input class='form-control theEmail' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='E-mail Address (required)' type='email' value=''/>
                  </div>
                </div>
                <div class='form-group'>
                <label class='sr-only'><data:contactFormMessageMsg/>&amp;nbsp;<span class='text-danger'>*</span></label>
                <div class='input-group'>
                  <div class='input-group-addon'><i class='fa fa-comment fa-lg'/></div>
                  <textarea class='form-control theMessage' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='Your Message (required)' rows='5'/>
                  </div>
                </div>
                <div class='form-group'>
                  <input class='contact-form-button-submit btn btn-primary' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
                  <div class='alert-wrapper' style='text-align: center; width: 100%'>
                    <p class='contact-form-error-message text-alert' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
                    <p class='contact-form-success-message text-success' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
                  </div>
                </div>
              </form>
        </b:includable>

          </b:widget>

Note aqui também esta listado vermelho inicio e fim para que você adicione corretamente
Após codigo substituido clique em salvar pronto agora é  só conferir seu novo blogger estilo contact responsive. 
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner