domingo, 11 de enero de 2015

FORMULARIO DE CONTACTO DE BLOGGER EN UNA PAGINA ESTATICA

Primero: Así que el primer paso es añadir el gadget (desde Diseño).


Segundo: Editamos el código HTML para eliminar casi todo el gadget. Buscando la cadena "ContactForm".
Tercero: Desplegamos el código del widget pinchando en la flecha negra de la izquierda hasta tener abierto todo el código.
Cuarto: borramos el solo código que esta de color rojo, el código de color azul la dejamos tal como está.
<b:widget id='ContactForm1' locked='false' title='Contacta' 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/>
        ...
        <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>
Quinto: Creamos nuestra Página Estática, y luego  pegamos el código que se muestra en la parte de abajo  en Modo HTML en la Página Estática.
<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Nombre</p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Correo electrónico <span style="color: #F00">*</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mensaje <span style="color: #F00">*</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>gt;
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'>
</p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'>
</p>
</form>
</div>
</div>
</div>

Y por último nuestro formulario quedara de esta manera listo para ser utilizado.
VER VÍDEO

1 comentario:

  1. Me ha quedado genial, pero bajo el formulario me aparece esto:

    La página que estabas buscando en este blog no existe.

    Saludos, y muchas gracias

    ResponderEliminar