Posted: febrero 9th, 2012 | Author: admin | Filed under: PHP, Wordpress | Tags: Contacto, Formularios, PHP, Validacion de formularios, Webdev | Comentarios desactivados en Integrar Google Docs con WordPress y Cforms
Muchos webmaster tienen redes de sitios clasificados por tema o rubro, de los cuales obtienen consultas, potenciales clientes, etc. Luego utilizan estos datos para cobrar comisiones, hacer un seguimiento de las ventas y monitorear la actividad. Centralizar estas consultas en un solo correo es una solución que suele ser práctica para casos de poco volumen o bien cuando los sitios los gestionamos solo nosotros.
Para los casos en que tenemos muchos sitios y queremos que terceros puedan ver la información, a modo de control, es necesario contar con una planilla en la cual se carguen los mensajes en forma automatica. Lo ideal es que los campos de información de los formularios completen las columnas del excel online para hacer facil el seguimiento. Eso es lo que vamos a hacer, guardar todos los emails en un Google Doc que podemos compartir y mantener actualizado al momento.
Gracias a rakisuy por este artículo!
Rakisuy:
Lo primero que debemos de hacer es ir a nuestro Google Docs, alli creamos una nueva Hoja del tipo formulario. La podemos editar, creamos los campos que tendrá nuestro formulario de Cforms.
Hacemos click arriba a la derecha en More actions y seleccionamos Embed. Esto nos abrira un popup con un codigo HTML, el cual es un iframe, para insertar nuestro formulario en donde deseemos, pero eso no lo haremos!
Tomamos la URL del iframe y la abrimos en el navegador, alli nos abrira nuestro formulario.
Lo importante ahora es que veamos el action en el codigo HTML de nuestro form, el cual es por ej.:
https://docs.google.com/spreadsheet/formResponse?formkey=dddddddddddddddddddddddddd&theme=0AX42CRMsmRFbUy1iOGYwN2U2Mi1hNWU0LTRlNjEtYWMyOC1lZmU4ODg1ODc1ODI&embedded=true&ifq
Aqui lo que nos importa es el formkey, el theme no nos interesa, por lo que lo borramos junto con todo lo demas dejando asi:
https://docs.google.com/spreadsheet/formResponse?formkey=dddddddddddddddddddddddddd
El nombre de nuestros campos es entry.0.single para nuestro primer campo, entry.1.single para el segundo, y asi sucecivamente, vemos que cambia el indice el campo, se le suma uno y comienza en 0
Lo importante es hacer un post a nuestro action, y pasando el valor de nuestros campos, pero tenemos que tener cuidado, ya que Google Docs usa HTTPS, protocolo seguro, por lo que el codigo PHP necesario para hacer un envio POST aqui es:
$Url = ‘https://docs.google.com/spreadsheet/formResponse?formkey=dddddddddddddddddddddddddd’;
$strRequest = «entry.0.single=valor campo uno&entry.1.single=valro del campo 2&entry.2.single=valor del campo 3»;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1) ;
curl_setopt($ch, CURLOPT_POSTFIELDS, $strRequest);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$result = curl_exec($ch);
curl_close($ch);
La variable $Url es nuestro action, pero recuerda que sin pasar el theme, ni los otros parametros, solo el action!
Nuestros valores lo pasamos en la variable $strRequest, y lo hacemos como string, poniendo el nombre de nuestro campo = $nuestrovalor y los unimos con «&».
Con este codigo y hasta ahora podemos insertar datos en nuestra planilla de Docs, pero nos falta la integración con nuestro Cforms, para eso utilizaremos el archivo my-functions.php e iremos a la linea 154, la cual es:
function my_cforms_action($cformsdata) {
Notemos que todo el archivo esta comentado, lo que haremos sera descomentar esta funcion para poder utilizarla.
Lo siguiente que haremos sera obtener el valor ingresado en nuestro formulario de Cforms, lo hacemos de la siguiente manera:
$micampo = $form[‘El nombre de mi campo’];
En donde dice ‘El nombre de mi campo’ es el nombre del campo que le dimos en nuestro panel de Administración de WordPress en nuestro Cforms. y asi podemos obtener el valor de todos los campos, por lo que nos quedaria algo asi:
$Nombre = $form[‘Nombre’];
$Email = $form[‘Email’];
$Consulta = $form[‘Consulta’];
Claro que esto lo hacemos luego de que carga el $form, en la linea 160:
$form = $cformsdata[‘data’];
Ahora pondremos estos valores en nuestro string Request, por lo que sera algo asi:
$strRequest = «entry.0.single=».$Nombre.»&entry.1.single=».$Email.»&entry.2.single=».$Consulta;
Juntando todo nuestro codigo tendremos algo asi:
function my_cforms_action($cformsdata) {
### Extract Data
### Note: $formID = » (empty) for the first form!
$formID = $cformsdata[‘id’];
$form = $cformsdata[‘data’];
### triggers on your third form
if ( $formID == ‘3’ ) {
### Do something with the data or not, up to you
$form[‘Your Name’] = ‘Mr./Mrs. ‘.$form[‘Your Name’];
}
$Nombre = $form[‘Nombre’];
$Email = $form[‘Email’];
$Telefono = $form[‘Telefono’];
$Pais = $form[‘Pais’];
$Consulta = $form[‘Consulta’];
$sitio = get_bloginfo(‘url’);
$Url = ‘https://docs.google.com/spreadsheet/formResponse?formkey=dHg5em5zLWQyRFdGekdSN1RadjdZR0E6MQ’;
//$strRequest = «entry.0.single=».$Nombre.»&entry.1.single=».$Email.»&entry.2.single=».$Telefono.»&entry.3.single=».$Pais.»&entry.4.single=».$Consulta.»&entry.5.single=».$sitio;
$strRequest = «entry.0.single=».$Nombre.»&entry.1.single=».$Email.»&entry.2.single=».$Telefono;
$ch=curl_init();
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1) ;
curl_setopt($ch, CURLOPT_POSTFIELDS, $strRequest);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
$result = curl_exec($ch);
curl_close($ch);
}
De esta manera, las consultas que nos llegan al mail tambien quedaran en una hoja de Google Docs, sumamente util en caso de recibir varias consultas que pueden atender varias personas, permite una importante organización.
Algo bueno de esto tambien es que Google automaticamente nos agrega una columna Timestamp, de cuando se insertaron los datos, sabiendo asi el momento exacto de la consulta.
Una captura de como se ve esto en el Docs:
Posted: junio 10th, 2008 | Author: admin | Filed under: AJAX, PHP, Recursos Web, Software | Tags: Filtrar campos, Formularios, Javascript, Validacion, Validacion de formularios | 1 Comment »
Cuando utilizamos campos de selección, formularios y demás suelen existir reestricciones en lo que podemos hacer. Ya sea un campo para una casilla de mail o para un teléfono, el sitio intentará que ingresemos la información de forma correcta, lo cual puede ser mas o menos amigable con el usuario :). Son conoocidos los casos de sitios donde se ingresa algunos campos de formularios y nos dice que hay un error, pero no donde, o bien que no dice nada y no tenemos idea que sucedió, entre otras muchas posibilidades.
Para tratar de dar al usuario las mayores facilidades veremos un poco de validación con javascript, lo cual nos permite verificar los datos que se ingresan antes de que se envíe el formulario, y buscaremos que esta información sea lo más amigable y útil posible.
Comencemos con un simple formulario:
<form method=»post» action=»» name=»form» onsubmit=»return validate(this)»>
<fieldset>
<p><label for=»email1″ class=»left»>Email:</label>
<input type=»text» name=»email1″ id=»email1″ class=»field» value=»» tabindex=»1″ /> *</p>
<p><label for=»email2″ class=»left»>Verificar Email:</label>
<input type=»text» name=»email2″ id=»email2″ class=»field» value=»» tabindex=»2″ /> *</p>
<p><label for=»password1″ class=»left»>Contraseña:</label>
<input type=»password» name=»password1″ id=»password1″ class=»field» value=»» tabindex=»3″ /> *</p>
<p><label for=»password2″ class=»left»>Verificar Contraseña:</label>
<input type=»password» name=»password2″ id=»password2″ class=»field» value=»» tabindex=»4″ /> *</p>
<p><label for=»firsnamename» class=»left»>Nombre:</label>
<input type=»text» name=»name» id=»name» class=»field» value=»» tabindex=»5″ /> *</p>
<p><input type=»submit» name=»register» id=»register» class=»button» value=»Register» tabindex=»6″ /></p>
<p class=»legend»>(* Campos requeridos)</p>
</fieldset>
</form>
Noten algunos detalles que agregamos, macados en negrita:
- onsubmit=»return validate(this)»
Al enviar el formulario, ya sea haciendo clic en el botón o dando enter, queremos que el contenido del mismo pase por una función de javascript que validará el contenido. La función se llamará validate y pasamos como argumento a la misma el formulario, que al estar haciendo el envío en este preciso momento podemos invocarlo con this.
- id=»email1″
Debemos poder identificar los campos del formulario con un nombre. Aunque podríamos hacerlo con el atributo name de cada campo, por lo que general queda mas «limpio» el codigo al usar ids. Noten que tenemos un id para cada campo, esto es importante a la hora de poder ir tomando el contenido de cada campo por separado.
- (* Campos requeridos)
Por último y con el único fin de hacer más amigable las cosas, avisamos que los campos marcados con un asterisco son obligatorios. Esto avisa al usuario de que debe llenarlos y que serán validados.
El siguiente paso es llamar a la función javascript que mencionamos, para esto tendremos dos secciones de código javascript, una que contendrá la validación especifica para este formulario que por ejemplo tiene casillas con nombre de email, contraseña, y dejaremos en un archivo por separado el resto del código que se aplica a cualquier caso de validación, como es mostrar el mensaje de error, etc.
Al final de este artículo están disponibles los archivos para la descarga, dentro de messages.html encontrarán el formulario html con el código javascript específico al formulario y una llamada a un archivo externo messages.js que contiene el código general, además de un archivo css y un archivo de imagen.
Volviendo al código, para validar esta formulario utilizaremos un código como este:
<script type=»text/javascript»>
document.forms.form.email1.focus();
function validate(form) {
// Pasamos contenido de los campos a variables
var name = form.name.value;
var email1 = form.email1.value;
var email2 = form.email2.value;
var password1 = form.password1.value;
var password2 = form.password2.value;
// Expresiones regulares que utilizamos para validar las cadenas de texto segun cada caso
var nameRegex = /^[a-zA-Z]+(([\’\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:».*?»|’.*?’|[^'»>\s]+))?)+\s*|\s*)\/?>/gim);
if(email1 == «») {
inlineMsg(‘email1′,’Ingrese su email.’,2);
return false;
}
if(!email1.match(emailRegex)) {
inlineMsg(‘email1′,’Ha ingresado un email invalido.’,2);
return false;
}
if(email1 != email2) {
inlineMsg(‘email2′,’El mail y su verificacion no coinciden.’,2);
return false;
}
if( (password1 == «») || (password1.length < 6) ) {
inlineMsg(‘password1′,’Ingrese una contraseña de al menos 6 caracteres.’,2);
return false;
}
if(password2 != password1) {
inlineMsg(‘password2′,’La contraseña y su verificacion no coinciden’,2);
return false;
}
if(name == «») {
inlineMsg(‘name’,’Ingrese su nombre.’,2);
return false;
}
if(!name.match(nameRegex)) {
inlineMsg(‘name’,’Ha ingresado un nombre invalido.’,2);
return false;
}
return true;
}
</script>
La primera línea lo único que hace es colocar el foco o cursor de escritura sobre el primer campo del formulario. Luego tenemos la función validate que recibe el formulario que debe validar, «function validate(form) {«, y enseguida dentro de la misma pasamos los contenidos de los campos a variables y preparamos expresiones regulares para validar los distintos casos de email, nombre, mensaje.
El resto del código es simplemente validar cada una de las casillas, con una condición y en caso de que la cumpla llamamos a otra función (inlineMsg, que se encuentra dentro del archivo js externo que mencionamos antes) la cual se encarga de mostrar el mensaje de error.
if(email1 == «») {
inlineMsg(‘email1′,’Ingrese su email.’,2);
return false;
}
En este caso verificamos si la variable email1 contiene el valor vacío, en caso de ser asi llamamos a inlineMsg pasándole como parámetros el id del campo que estamos validando, el mensaje de error y si queremos que el mensaje desaparezca solo luego de 2 segundos.
Con esto deberíamos tener una validación básica pero amigable para el usuario, fundamental para que nuestros sitios sean utilizados y no generen rechazo.
(Créditos: http://www.leigeber.com/2008/04/dynamic-inline-javascript-form-validation/)
Descargar archivos validación JS
Hacemos click arriba a la derecha en More actions y seleccionamos Embed. Esto nos abrira un popup con un codigo HTML, el cual es un iframe, para insertar nuestro formulario en donde deseemos, pero eso no lo haremos!
