~El Metadiario~

Lunes, 11 de mayo de 2009

Formulario de contacto para Blogger sin servicios externos

Post hecho en Zona Cerebral

Hace un mes, Iván nos mostraba una excelente recopilación de servicios para añadir un formulario de contacto a Blogger. En general, funcionan muy bien, y pueden ser añadidos a cualquier plantilla luego de registrarse en los respectivos sitios.

 

Insertar un formulario de contacto en Blogger sin depender de esos servicios, no es tarea fácil, porque necesitas que corra con PHP (y javascript en este caso), pero tampoco es algo imposible. En Viet Web Guide, encontré la manera de hacerlo, cosa que resulta todo un descubrimiento. Logré traducir y modificar todo el código del formulario (del vietnamita al español), añadiendo y quitando filas para crear una versión algo distinta de la original, pero igualmente funcional.

El único problema, es que necesitas utilizar un hosting externo para almecenar el archivo PHP que usa el formulario. Yo utilicé un hosting gratuito, con el cual espero que no haya ningún problema; pero debes considerar que no es improbable que tengas que volver a almacenar el archivo en otro hosting como Tripod.

Vista previa del formulario

 

Cómo instalar el formulario (paso a paso)

1. Copia el siguiente código antes de < /head >, y guarda tu plantilla:

<script type='text/javascript'>
//<![CDATA[
function valid(form) {
var field = form.email;
var str = field.value;
if (window.RegExp) {
var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$";
var reg1 = new RegExp(reg1str);
var reg2 = new RegExp(reg2str);
if (!reg1.test(str) && reg2.test(str)) {
return true;
}
field.focus();
field.select();
return false;
} else {
if(str.indexOf("@") >= 0)
return true;
field.focus();
field.select();
return false;
}
}
//]]>
</script>

2. Crea una nueva entrada, idealmente con una fecha anterior al resto de tus entradas, y pega el siguiente código:

<form action="http://girlyblogger.site90.net/email.php" method="post" name="myform" onsubmit="return valid(this)"><input type="hidden" name="recipient" value="tu@gmail.com"><input type="hidden" name="subject" value="Contacto vía e-mail"><input type="hidden" name="redirect" value="http://tublog.blogspot.com">
Nombre (obligatorio):<br><input type="text" size="30" name="realname"><br>
E-mail: (obligatorio, no será mostrado)<br><input type="text" size="30" name="email"><br>
Sitio Web:<br><input type="text" size="30" name="website" id="website"><br>
Tu mensaje:<br>
<textarea cols=40 rows=6 name="Comments" wrap="soft"></textarea>
<input type="submit" value="Enviar"> <input type="reset" value="Limpiar">
</form>

3. Haz los siguientes reemplazos:

• En tu@gmail.com, pon tu e-mail. Es un campo oculto que permite que todos los mensajes enviados a través del formulario lleguen directamente a tu e-mail.
• Y en vez de http://tublog.blogspot.com, escribe la dirección de tu blog. Es otro campo oculto que permite que, luego de enviar el mensaje, los visitantes sean redireccionados automáticamente a la sección de tu blog que elijas.

No necesitas hacer nada más. Sólo guarda.

El archivo PHP

En caso de problemas con el hosting, sigue los siguientes pasos para realmacenar el archivo email.php:

1. Copia y pega el siguiente código en un block de notas.

<?
$env_report = $_SERVER['REMOTE_ADDR'];
$recipient = $_POST['recipient'];
$subj = $_POST['subject'];
$redirect = $_POST['redirect'];
$realname = $_POST['realname'];
$email = $_POST['email'];
$Comments = $_POST['Comments'];
$website = $_POST['website'];

$mes = "".$Comments."nnn Sitio Web: ".$website."n E-mail: ".$email."n ";
$from = $realname."<".$email.">";
$a = mail($recipient, $subj,$mes,"From: $fromnReply-To: $emailnX-Mailer: PHP/" . phpversion());
if($a) echo "<script>alert('Tu e-mail ha sido enviado. Gracias!'); function go(){ top.location.href="$redirect"; } ; setTimeout(go(),4000);</script>";
?>

2. Gúardalo como:

• Nombre: email.php
• Tipo: Todos los archivos
• Codificación: UTF-8

3. Sube el archivo a tu hosting y reemplaza el link “http://girlyblogger.site90.net/email.php” (que aparece en el código del formulario) por el tuyo.

• Dirección alternativa del archivo email.php (sólo reemplaza): “http://chicablogger.chica-web.es/email.php“

Consideraciones finales

• El formulario es muy simple, pero si sabes algo de CSS podrás hacer algunas modificaciones para que luzca más bonito.
• En caso de problemas, recuerda que necesitas realojar el archivo email.php.
• Los comentarios, las sugerencias y las pruebas de este “hack” son siempre bienvenidos. Espero que sea de utilidad.

Por: Horacio Federico | Blogger | Comentarios (0) | Referencias (0)