Formulario de Contacto para Blogger

Bueno, aquí de nuevo gracias a un par de usuarios que me preguntan respecto a lo que es el Formulario de Contacto y como obtener uno para ponerlo en su sitio Web.

Aquí brevemente les explicaré lo que tienen que hacer para crear una cuenta y configurar su propio Formulario, lo que les recomiendo antes que nada es que tengan en cuenta que el sitio esta en ingles y que es recomendable que si no saben mucho ingles chequen sitios como WordReference.com.

Bueno ahora para empezar es necesario que te crees una cuenta en el sitio: EmailMeForm , pueden ubicar como registrarse haciendo click en Sign Up for Free!

Ahora, tendrán que finalizar el registro revisando su correo electrónico y haciendo click en el segundo Link. Posteriormente es momento de conectarse con esa cuenta.

Ahora llegaras a lo que es un Panel de Control como pueden ver en la foto lo que a nosotros nos interesa es lo que hay en el Menú izquierdo, para ser específicos "Create New Form".

Ahora simplemente tenemos que llenar el siguiente formulario siempre teniendo en cuenta que esta información es vital, recuerda poner tu correo electrónico de otra forma no funcionara, ahora hacer click en Next

Ahora lo que tenemos que hacer es seleccionar el nombre de los campos y el tipo, si no entiende mucho de lo que dice ahí revise la imagen que se encuentra a continuación o bien cheque diccionarios Ingles>Español como WordReference hacer click en Next.

Ahora tienen que definir el Ancho ( cols ) y el Alto ( Rows ) de los elementos de su formulario, definanlo y hagan click en Next.

Ahora llenen todo lo que se pide, pueden hace referencia en el último cuadro que se muestra en la imagen de la derecha, después hacer click en Next. Ignoren el contenido del siguiente paso y hacer click en Next también, ahora verán su formulario, hagan click en Finish.

Ahora verán un cuadro donde verán un código, este no supera los dos lineas y no es el que necesitamos si lo queremos integrar al diseño de nuestro Blog, por lo que tendremos que hacer click en el Enlace que se encuentra justo arriba que dice: Get the HTML Code

Ahora deben de obtener un código similar a este:

<form method="post" action="http://www.emailmeform.com/fid.php?formid=9049">
<INPUT TYPE=hidden NAME=FCode VALUE="g5b4rgty">
                  

<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">
<tr>
<td>
<font face="Verdana" size="2" color="#000000">Descripción de mi Forma, saldra en la parte superior</font>
 <div style="" id="mainmsg"> </div>

</td>
</tr>
</table>

<br>

<table cellpadding="2" cellspacing="0" border="0" bgcolor="#FFFFFF">

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">Primer Campo: Ej: TU NOMBRE</font></td>
 <td>
<input type="text" name="FieldData0" value="" maxlength="100" size="30"> </td>
</tr>      

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">... ej. tu email</font></td>
 <td>
<input type="text" name="FieldData1" value="" maxlength="100" size="30"> </td>
</tr>      

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">... ej. tu web</font></td>
 <td>
<input type="text" name="FieldData2" value="" maxlength="100" size="30"> </td>
</tr>      

<tr valign="top">
 <td nowrap><font face="Verdana" size="2" color="#000000">tu mensajito de la muerte</font></td>
 <td>
<textarea name="FieldData3" cols="60" rows="10"></textarea><br> </td>
</tr>      

<tr>
 <td colspan="2">
<table cellpadding=5 cellspacing=0 bgcolor="#E4F8E4" width="100%">
<tr bgcolor="#AAD6AA">
<td colspan="2"><font color="#FFFFFF" face="Verdana" size="2"><b>Image Verification</b></font></td>
</tr>
<tr>
<td style="padding: 2px;" width="10"><img src="http://www.emailmeform.com/turing.php" id="captcha"></td>
<td valign="top"><font color="#000000">Please enter the text from the image</font>   <br><input type="text" name="Turing" value="" maxlength="100" size="10">
 [ <a href="#" onclick=" document.getElementById('captcha').src = document.getElementById('captcha').src + '?' + (new Date()).getMilliseconds()">Refresh Image</a> ] [ <a href="http://www.emailmeform.com/?v=turing&pt=popup" onClick="window.open('http://www.emailmeform.com/?v=turing&pt=popup','_blank','width=400, height=300, left=' + (screen.width-450) + ', top=100');return false;">What's This?</a> ]
</td>
</tr>
</table>
</td>
</tr>
<tr>
 <td> </td>
 <td align="right">
<input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;">
<input type="submit" class="btn" value="Titulo del Boton/Enviar" name="Submit">    <input type="reset" class="btn" value="  Borrar  " name="Clear"></td>
</tr>
<tr>
<td colspan=2 align="center">
<br>
<font face="Verdana" size="2" color="#000000"> <a href="http://www.emailmeform.com">contact form</a></td>
</tr>
</table>                      

</form>

Ahora lo que tendrán que hacer antes de poner el código en el Post, es Desactivar la Opción de Blogger "Convertir salto de Linea", lo pueden ubicar en la Pestaña Formato en el Panel de su Blog.

Ahora, simplemente tienen que poner el código en un Post ( en HTML ), simplemente posteenlo, copien el Link que obtengan y ponganlo en su barra lateral o donde ustedes deseen para que sus usuarios los puedan contactar.
Cabe mencionar que puede que algunos formularios no se muestren completos en algún diseño ( por falta de espacio ), por lo que tendrán que disminuir el ancho de los campos del formulario y otras opciones.

Technorati : Blogger, Blogger Trucos, Formulario para Blogger, Trucos Blogger