wordpress: formulario de contacto (Contact Form 7) y captcha de google (no soy un robot)

Buenas a tod@s

Tipico tipiquisimo de un sitio web, un formulario de contacto:

  • descargamos el plugin Contact Form 7 y lo instalamos, si vamos a configuracion ya viene creado por defecto un formulario base. Este nos proporciona un codigo entre corchetes [ ] que podremos copiar en nuestra pagina de contacto donde queremos que aparezca … el tema css es harina de otro costal
  • queremos captcha en el form para evitar en la medida de lo posible sl SPAM? yo me he descargado el Contact Form 7 Captcha para configurarlo con Google Captcha (mp soy un robot). En la info del plugin nos explican perfectamente que tenemos que ir a https://www.google.com/recaptcha/admin para obtener las keys necesarias que introduciremos en el plug en nuestro wordpress
  • Copiamos el codigo entre corchetes que proporciona el plugin del captcha y lo ponemos antes del boton de enviar (editando el plugin de formulario de contacto, el que ya teniamos creado)

La verdad que bastante sencillo todo siguiendo instrucciones de unos y de otros. Y funciona a las mil maravillas xDD

Anuncios

#Prestashop 1.6: notificaciones por email cuando se registra un cliente by @sobreprestashop

#Prestashop 1.6: notificaciones por email cuando se registra un cliente by @sobreprestashop

Fuente: https://sobreprestashop.blogspot.com.es/2015/01/recibir-notificaciones-por-email-cuando-se-registra-un-cliente-en-prestashop.html

prestashop-1-6-notificaciones-por-email-cuando-se-registra-un-cliente-by-sobreprestashop

Muy buen artículo de sobreprestashop.blogspot.com.es para activar notificaciones via e-mail cuando alguien se registra como usuario nuevo en nuestro prestashop.

Esta muy bien descrito el trabajo a realizar, nos dan la posibilidad de descargar los archivos, muy bien redactado y una gran variedad de detalles. Muy muy trabajado. Muchas gracias por este gran post !

Eso si, necesitaremos conocimientos muy basicos de html y php

Leer artículo completo en sobreprestashop.blogspot.com.es

Cómo crear formularios de #contacto en #WordPress by @manuelvicedo

fuente: http://manuelvicedo.com/wordpress/crear-formularios-wordpress/

Los formularios siempre han sido una parte esencial de Internet, y se utilizan desde hace muchos años para introducir datos y enviar información importante de un lugar a otro. En concreto, los formularios de contacto son una pieza integral de la mayoría de los sitios web, ya que es la principal forma que tienen los visitantes de comunicarse con el webmaster.

Utilizando los plugins adecuados, en WordPress puedes crear tus propios formularios con relativa facilidad. Es más, gracias a ellos puedes llegar a crear una gran variedad de páginas: desde simples formularios de contacto, hasta calendarios de citas y reservas para tu propio negocio.

Por qué los formularios son tan importantes

Los formularios son la clase de elementos que todo sitio web tarde o temprano necesita utilizar, ya que es la única manera posible de enviar información estructurada y almacenarla correctamente en una página web.

Ya seas una pequeña empresa o una tienda online, tener algo tan sencillo como un formulario de contacto es necesario para poder recibir mensajes y comunicaciones de tus visitantes. Aunque en teoría podrías prescindir de un formulario y en su lugar publicar tu dirección de correo, eso sólo resultaría en una gran cantidad de spam para tu bandeja de entrada.

La gran ventaja de los formularios web es que te permiten procesar toda la información que en ellos se introduce, y así darle un uso particular dependiendo de tus necesidades. Por ejemplo, es posible que te interese guardar todas las direcciones de correo de tus solicitudes de contacto en una base de datos, para después saber quiénes te han estado contactando y enviarles alguna oferta.

Cómo crear formularios en WordPress

Es posible que te hayas percatado de que WordPress recién instalado ya viene con algunos formularios para usos específicos. Por ejemplo, está el buscador nativo que puedes añadir utilizando el widget correspondiente, y con el cual es posible realizar búsquedas avanzadas del contenido de tu sitio.

Sin embargo, si deseas crear formularios personalizados y utilizarlos para una tarea en particular, necesitarás hacer uso de algún plugin para ello. Aunque existen muchos plugins que te permiten trabajar con formularios de contacto y realizar una gran cantidad de tareas diferentes, mi recomendación es recurrir a uno de los más populares que existen: Contact Form 7.

Contact Form 7 es un plugin gratuito probado y madurado, con una enorme cantidad de descargas y un uso muy activo. Además, su uso es relativamente sencillo para quienes están empezando y te permite experimentar fácilmente nuevas formas de tomar datos desde tu página web. Por si eso fuera poco, en su sitio oficial puedes encontrar una documentación (en inglés) bastante completa.

Utilizando Contact Form 7

logo-contact-form-7

Este plugin te permite crear formularios sencillos, mediante los cuales puedes recibir la información que tus visitantes puedan introducir. Esto no sólo se limita a formularios de contacto, sino que ademáspuedes aprovecharlo para otros usos:

  • Formularios de registro
  • Consultas de citas
  • Solicitudes de presupuesto
  • Botones ‘Llámame’

Además, en el repositorio oficial de WordPress podrás encontrar algunos plugins adicionales que complementan la funcionalidad de Contact Form 7.

Cómo funciona Contact Form 7

La forma de trabajar con Contact Form 7 es bastante directa: una vez has instalado el plugin, verás que aparece una nueva sección en tu panel de administración denominada Contacto. En esta sección podrás crear tantos formularios como desees, cada uno con sus respectivos campos y textos de respuesta.

Los formularios, una vez creados, los podrás incrustar con un shortcode que el plugin te proporciona, basándose en una ID única para cada uno.

Este shortcode, al igual que todos los demás, lo puedes insertar en prácticamente cualquier partede tu sitio WordPress: puedes añadirlos al contenido de tus páginas, como un widget de texto, o incluso en algún area especial si el tema WordPress que utilizas lo permite. De esta forma, con Contact form 7 te es posible insertar formularios en casi cualquier parte de WordPress.

Cada vez que alguien rellene tu formulario, sus datos se enviarán en un email a la dirección que especifiques, y con el formato que desees. De esta forma puedes ser notificado cada vez que alguien desea ponerse en contacto contigo.

Creando tu primer formulario

En lugar de disponer de una interfaz para añadir o quitar campos, con Contact Form 7 deberás utilizar una amplia caja de texto para crear el formulario a mano. Esto le aporta mucha flexibilidad al plugin ya que lo convierte en un lienzo totalmente libre, pero también hace que sea un poco complejo de utilizar si no tienes conocimientos de HTML o algún lenguaje parecido.

Por suerte, a la derecha de la caja de texto podrás utilizar un generador de campos para hacerte la vida más fácil.

contact-form-7-formulario

Los formularios en Contact form 7 se crean mediante una combinación de etiquetas propias del plugin, las cuales sirven para insertar los diferentes campos del formulario e indicar los valores que deben tener. La sintaxis de estas etiquetas suele ser la siguiente:

[text* campo-nombre 30/50 “Introduce Tu Nombre”]

Como ejemplo, este código creará un campo de texto con los siguientes valores:

  • text: Indica que se trata de un campo de texto.
  • Asterisco (*): Hace que el campo sea obligatorio y no pueda estar vacío.
  • campo-nombre: Es el nombre de referencia del campo, y debe ser único.
  • 30/50: Indica el tamaño del campo (30), y la cantidad de caracteres máxima (50).
  • “Introduce Tu Nombre”: Es el texto mostrado cuando el campo está vacío.

Como ves, la sintaxis para crear los campos puede ser un poco compleja, pero a la vez te da muchas opciones para cubrir todos los casos de uso posibles. Por suerte, la gran mayoría de estos atributos es opcional, así que un campo más simplificado podría ser así:

[text* campo-nombre]

Ahora no parece tan complicado, ¿verdad? Toda la información acerca de los valores que puedes utilizar en tus campos está muy bien explicado en la documentación de Contact Form 7, de la cual puedes echar mano para crear verdaderas maravillas.

Este plugin no sólo te permite crear campos de texto, sino que te da la posibilidad de añadir todo tipo de elementos a tu formulario: listas desplegables, casillas, subida de archivos, campos de fecha, y muchos más. Debido a la naturaleza de cada uno de estos campos, muchos de ellos tienen su forma particular de ser configurados:

Un detalle muy importante es que, además de los campos que puedas introducir en tu formulario,también podrás insertar etiquetas HTML normales. Así, los usuarios avanzados que conozcan un poco de HTML y CSS pueden crear prácticamente cualquier diseño de formularios e incorporarlo en sus sitios web.

Configurando las opciones de tu formulario

Una vez has creado tu formulario, puedes configurar los mensajes de aviso/error y el email que Contact Form 7 te enviará.

Dentro del cuerpo del correo deberás colocar cada uno de los campos que has añadido en el propio formulario, ya que el plugin no te los mandará en un archivo adjunto ni automáticamente. Hacer esto es tan fácil como utilizar el nombre de referencia que le has dado a cada campo rodeado de unos corchetes– siguiendo el ejemplo anterior, para insertar el campo en el correo deberías añadir la siguiente etiqueta:

[campo-nombre]

Con esto podrás estructurar el correo de la forma que quieras, y también mandarlo a tantos destinatarios como desees.

contact-form-7-mensajes

Insertando tu formulario

Teniendo tu formulario creado, ahora sólo te queda insertarlo dentro de tu sitio web. Tanto en el listado de formularios como en la pantalla de edición, podrás ver que Contact Form 7 te proporciona en todo momento un shortcode para incrustarlo, con el siguiente aspecto:

[contact-form-7 id=”1045″]

En la mayoría de los casos, te bastará con copiar y pegar este código en cualquiera de tus páginas o entradas, y al cargarla podrás ver cómo aparece el formulario en medio de tu contenido.

formulario-contacto

Cabe decir que los temas premium de CPOThemes ofrecen integración con este plugin, y los formularios que construyas quedarán automáticamente estilizados e integrados con el resto del diseño. Muchos otros temas no proporcionan ningún tipo de estilo a los campos de los formularios, y por tanto se ven muy pobres.

Empieza a crear tus formularios en WordPress

Como ves, crear tus propios formularios en WordPress es bastante simple, y los ejemplos que hemos visto sólo rozan la superfici de todo lo que se puede hacer. Más adelante veremos otras opciones para crear formas de enviar datos a través de tu página web, además de trucos y técnicas que te permitirán darle más usos a este plugin.

¿Y tú? ¿Utilizas Contact Form 7 u otro plugin para los formularios de tu sitio WordPress?

#prestashop 1.5 TECHNICAL ERROR: unable to load form. Details: Error thrown: [object Object] al registrar una nueva cuenta de cliente by fmatias

fuente: http://www.prestashop.com/forums/topic/266882-problema-con-firefox-technical-error-unable-to-load-form-details-error-thrown-object-object/

El problema es que el módulo de autentificación no redirige correctamente a donde debe redirigir, falla al usar Ajax. La solución consiste en modificar un fichero de la plantilla. No hace falta saber de programación, es sólo incluir un trozo más de código que nosotros os vamos a dar.

Conectamos por FTP al servidor donde tenemos nuestra tienda y navegamos hasta la carpeta del theme que tengamos activo en Prestashop, dentro de la carpeta themes. Por ejemplo, si tenemos el tema por defecto, debemos entrar en /themes/default. Una vez aquí, abrimos con un editor de texto (ojo que a veces esta extensión de archivo se asocia con PhotoShop) el archivoauthentication.tpl.

Debemos buscar una línea:

url: baseUri,

Esto es código Javascript. Debemos añadir un trozo más de texto para que todo funcione:

url: baseUri+'index.php?controller=authentication',

Fuente: http://www.codigonex…-en-prestashop/

#prestashop 1.5 personalizar el #header : caja de busquedas

Para personalizar la posicion del input de busquedas he hecho lo siguiente

Con el inspector de elementos del chrome (f12) he seleccionado el formulario que contiene el input, el css que opera sobre este elemento es blocksearch.css que se encuentra en la ruta modules/blocksearch/blocksearch.css

#search_block_top {
position:absolute;
right: 26%;
top: 34px;
}

En este grupo de propiedades podeis modificar la posicion a vuestro gusto

#JavaScript validar formularios by @aulaclic

Fuente: aulaclic.es

En la propia página, ya que la función solo se utilizará en esta página, creamos una función, a la que le pasamos el formulario.

Lo que hará la función, es evaluar uno a uno los campos. Si encuentra un error, mostrará un mensaje, pondrá el foco (el punto de inserción) en el control, y devolverá falso. Si no hay errores, continúa con el siguiente campo. Al final, si no se ha producido ningún error, debe de devolver true.

Como le pasamos como parámetro el formulario, podemos acceder a los valores de so control con la estructura formulario.nombre.value:

<script type="text/javascript">// <![CDATA[
function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //¿Tiene 0 caracteres?
    formulario.nombre.focus();    // Damos el foco al control
    alert('No has escrito tu nombre'); //Mostramos el mensaje
    return false; //devolvemos el foco
  }
  return true; //Si ha llegado hasta aquí, es que todo es correcto
}
// ]]></script>

Utilizamos el método .length, que devuelve la longitud de una cadena, para comprobar si el número de caracteres es 0. Si es 0, la cadena está vacía.

Repetimos esto para el resto de comprobaciones, dejando el return true; al final del todo, para que sólo llegue ahí si todos los campos están correctos:

<script type="text/javascript">// <![CDATA[
function validarForm(formulario) {
  if(formulario.nombre.value.length==0) { //comprueba que no esté vacío
    formulario.nombre.focus();   
    alert('No has escrito tu nombre'); 
    return false; //devolvemos el foco
  }
  if(formulario.email1.value.length==0) { //comprueba que no esté vacío
    formulario.email1.focus();
    alert('No has escrito tu e-Mail');
    return false;
  }
  if(formulario.email1.value!=formulario.email2.value) {
    formulario.email1.focus();            //comprueba que sean iguales
	alert('Los e-Mails no coinciden');
    return false;
  }
  if(formulario.consulta.value.length==0) {  //comprueba que no esté vacío
    formulario.consulta.focus();
    alert('No has escrito ninguna consulta');
    return false;
  }
  return true;
}
// ]]></script>

Ahora tenemos que llamar a la función. Lo haremos, cuando se vaya a enviar el formulario, es decir, en el evento onsubmit del form.

</pre>
<form action="enviar_mail.php" method="post" onsubmit="return validarForm(this);">

Observa que como parámetro hemos enviado this. Se trata de una palabra reservada que equivale al objeto que ha producido el evento, en este caso el formulario. Además, antes de la función hemos puesto return. Lo hemos hecho, porque si en un evento ponemos return false;, el evento se anula, en cambio si ponemos return true; continúa. Por eso es importante que la función devuelva false cuando queramos que no se envíe el formulario, y que devuelva true cuando queramos que se envíe.

Javascript para seleccionar todos los checkbox o cajas de selección de un formulario pulsando un solo enlace by @deswebcom

Fuente: desarrolloweb.com

El ejercicio que vamos a relatar en este artículo es bastante típico de trabajo con formularios en Javascript. Se trata de hacer un enlace para que se puedan marcar todos los campos checkbox que haya en un formulario de una sola vez, es decir, sin tener que pulsarlos uno a uno para marcarlos todos. También haremos la función que permita deseleccionar todos los campos checkbox del formulario de una sola vez.

El ejercicio es simple de entender, pero podemos verlo en funcionamiento en una página aparte para hacernos una idea exacta de nuestras intenciones.

El formulario HTML

Tenemos un formulario creado con HTML que es donde estarán los checkboxes que hay que marcar y desmarcar automáticamente. El formulario es muy sencillo. Lo vemos a continuación.

<form name="f1">
Nombre: <input type="text" name="nombre">
<br>
<input type="checkbox" name="ch1"> Opcion 1
<br>
<input type="checkbox" name="ch2"> Opcion 2
<br>
<input type="checkbox" name="ch3"> Opcion 3
<br>
<input type="checkbox" name="ch4"> Opcion 4
<br>
//Otro campo de formulario:
<select name=otro>
<option value="1">Seleccion 1
<option value="2">Seleccion 2
</select>
<br>
<input type="submit">
<br>
<br>
<a href="javascript:seleccionar_todo()">Marcar todos</a> |
<a href="javascript:deseleccionar_todo()">Marcar ninguno</a>
</form>

Lo único que debemos fijarnos es que hemos colocado diversos tipos de elementos en el formulario. En realidad sólo vamos a trabajar con el estado de los checkbox, pero hemos incluido otros elementos porque lo habitual en un formulario es que hayan elementos de varios tipos.

Al final del formulario tenemos un par de enlaces para marcar o desmarcar todos los checkboxes de una sola vez. Estos enlaces llaman a un par de funciones Javascript que veremos ahora.

Funciones de Javascript

function seleccionar_todo(){
   for (i=0;i<document.f1.elements.length;i++)
      if(document.f1.elements[i].type == "checkbox")
         document.f1.elements[i].checked=1
}

La función seleccionar_todo() realiza un recorrido por todos los elementos del formulario. Para hacer un recorrido por todos los campos se utiliza el array “elements”, que guarda una referencia con cada elemento que haya dentro del formulario.

En el recorrido comprueba si el elemento actual es de tipo “checkbox” (recordar que el array elements contiene todos los elementos, pero sólo deseamos operar con los que sean checkbox) y en ese caso, simplemente se actualiza el atributo “checked” al valor 1, con lo que el chekbox se marcará.

function deseleccionar_todo(){
   for (i=0;i<document.f1.elements.length;i++)
      if(document.f1.elements[i].type == "checkbox")
         document.f1.elements[i].checked=0
}

La función deseleccionar_todo() es casi igual que la anterior. Realiza un recorrido a todos los elementos y en el caso que sean checkbox, se fija a cero el atributo “checked” para que la caja de selección se quede desmarcada.

El ejemplo no tiene más misterio. Se puede ver en marcha en una página aparte.