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?

Cargar un select o lista desplegable desde otro select PHP + AJAX + MySQL by codigojerry.blogspot.com

Fuente: codigojerry.blogspot.com.es

Para cargar o llenar un select con datos de la base de datos a partir de otro select utilizamos AJAX y el evento onchange de JavaScript. El siguiente ejemplo consta de una base de datos compuesta por dos tablas una llamada continente y otro pais. Cuando se selecciona un continente aparece unos cuantos paises perteneciente a ese continente, para ello las tablas tienen que estar obligatoriamente relacionadas.


El ejemplo está dividio en cuatro archivos:

El archivo conexion para conectarnos a la base de datos.

conexion.php

<?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>

Este archivo es la vista al usuario. Contiene el primer select donde cargamos en él los continentes almacenados en la base de datos. Tiene como atributo el evento onchange de JavaScript el cual ejecuta la funcion ajax load() cada vez que se hace clic sobre una opcion (continente).

index.php

<?php
include 'conexion.php';
?>
<!DOCTYPE html>

<html>

<head>

<script src="ajax.js"></script>

</head>

<body>

<h2>HTML - PHP - AJAX - MySQL</h2>

<?php

$con=conexion();
$res=mysql_query("select * from continente",$con);

?>

<select id="cont" onchange="load(this.value)">

<option value="">Seleccione</option>

<?php

while($fila=mysql_fetch_array($res)){

?>

<option value="<?php echo $fila[codigo]; ?>"><?php echo $fila[nombre]; ?></option>

<?php } ?>

</select>

<div id="myDiv"></div>

</body>

</html>

El archivo ajax.js es un archivo javascript el cual contiene la funcion load(), esta cáptura el código del continente seleccionado y se lo envía al archivo proc.php a través de la variable q y con el método post para que lo procese.

ajax.js

function load(str)
{
var xmlhttp;

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","proc.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("q="+str);
}

Finalmente este archivo captura el código del continente para hacer una consulta a la base de datos y mostrar en otro select los paises del continente seleccionado. El resultado se visualiza en el div con id igual a myDiv ubicado en el archivo index.php

proc.php

<?php
include 'conexion.php';

$q=$_POST['q'];
$con=conexion();

$res=mysql_query("select * from pais where cod_cont=".$q."",$con);

?>

<select>

<?php while($fila=mysql_fetch_array($res)){ ?>
<option><?php echo $fila[nombre]; ?></option>
<?php } ?>

</select>

Demo/Código fuente

#php Escapa caracteres especiales en un string para su uso en una sentencia SQL by chuwiki.chuidiang.org

Fuente: chuwiki.chuidiang.org

Cuando en nuestra página web ponermos un formulario en el que el navegante puede poner texto líbremente, debemos tomar ciertas precauciones.

Escapar las comillas

Si ese texto se va a guardar en base de datos, debemos “escapar” las comillas, ponerles delante el caracter \. Si no lo hacemos así, cuando construyamos la sentencia SQL para el insert o update, esas comillas pueden dar al traste con la operación.

Imagina que el navegante a introducido como texto

digo "Hola"

y esto lo metemos en PHP en una variable $comentario

cuando hagamos el SQL, pondremos algo asi

$query = 'insert into una_tabla values (...,"'.$comentario.'",...);';

que luego, se traduce a

insert into una_tabla values (...,"digo "Hola"",...);

donde las comillas que ha metido el usuario harán que de un error.

La solución consiste en poner delante de las comillas simples y dobles un caracter \, para que la sentencia SQL quede así

insert into una_tabla values (...,"digo \"Hola\"",...);

que sí es correcto.

Si está configurado para ello, PHP puede hacer esto automáticamente con cualquier cadena de texto que nos llegue de un formulario. Para saber si lo está o no haciendo, debemos llamar a la función get_magic_quotes_gpc() que devolverá 1 si ya lo hace automáticamente.

Si no lo está haciendo automáticamente, debemos hacerlo nosotros. PHP nos proporciona la función addslashes() que hace exactamente eso, añadir un \ a todas las comillas.

Entonces, el código para escapar comillas, debería ser

if (get_magic_quotes_gpc()!=1)
   $cadena=addslashes($_POST['comentario']);

donde $_POST[‘comentario’] es el texto que nos llega del formulario y en $cadena obtenemos el texto con las \ puestas delante de las comillas.

Tambien disponemos de otra funcion para la misma tarea mysql_real_escape_string(), aunque en php.net nos advierten que esta obsoleta a partir de la version 5.5 de php

Eliminar tags de html

Si la cadena que ha introducido el usuario se va a presentar luego en nuestra página web, es conveniente quitarle (o al menos revisar) los posibles caracteres especiales de html que haya en dicha cadena.

Si el usuario introduce esto

digo Hola

Cuando lo mostremos, se verá Hola en negrita. Eso no es problematico. Pero si le dejamos meter esto

digo <b>Hola

A partir de ahí saldrá todo el texto en negrita, ya que se ha olvidado de cerrarlo. Y la cosa puede ser peor si además tiene mala intención y se le ocurren cosas como

digo<script type="text/javascript">// <![CDATA[
puñetitas en javascript
// ]]></script>

Se ejecutará el código que el haya querido.

Nuevamente PHP nos pone las cosas fáciles. La función htmlentities() coge todos los caracteres especiales de html y los reemplaza por los equivalentes para que se visualicen. Así, por ejemplo, cambia los < por & lt ;

Con esto, el usuario puede meter lo que quiera, que se verá tal cual lo meta, sin permitir “efectos especiales html”.

$nuevacadena = htmlentities($cadena);


Retornos de carro
En un textarea de html el usuario puede meter muchas lineas. Las líneas se cortan automáticamente si son muy largas y otras las corta el usuario introduciendo nueva línea (retorno de carro).

Si dejamos esto así, tal cual, cuando mostremos en pantalla ese texto, saldrá todo seguido, ya que nadie convierte esos retornos de carro del usuario en tags br de html.

Una vez más, PHP nos lo da todo hecho. La función nl2br() nos hace esa conversión, cambiando los \n por <br>

$nuevacadena=nl2br($cadena);

#Javascript para que el usuario acepte o cancele el envío de un formulario al enviar by @deswebcom

Fuente: desarrolloweb.com

Este artículo viene a ampliar una FAQ de las que mantenemos en la sección de FAQs de DesarrolloWeb.com. La pregunta en concreto que nos realizó el usuario era cómo hacer un formulario que, al enviarlo, nos pregunte si realmente se desea enviar.

La pregunta en concreto era la siguiente:

Estoy haciendo un formulario y deseo que, al enviarlo, me muestre una ventana de confirmación de envío del formulario, de esas que tienen un botón de aceptar y otro de cancelar. Entonces, si se acepta el envío, se enviaría el formulario…. si no se acepta, que el formulario no se envíe.

Respuesta

Esto tiene mucho que ver con el tema de tratamiento de formularios. La respuesta basa su mayor técnica en el hecho de sustituir el botón de submit por un botón normal. Con el botón normal no se envía el formulario directamente sino que se llama a una función que realiza la confirmación y, en caso positivo, envía el formulario.

El botón que colocaríamos en el formulario en sustitución del botón de submit sería el siguiente:

<input onclick="pregunta()" type="button" value="Enviar" />

Nos fijamos en que el botón tiene definida una acción en el momento que se hace clic. La acción en concreto hace que se ejecute la función pregunta(), que será la que realice la confirmación y envíe el formulario en caso positivo. Su código se puede ver a continuación.

<script type="text/javascript" language="JavaScript">// <![CDATA[

function pregunta(){ 
    if (confirm('¿Estas seguro de enviar este formulario?')){ 
       document.tuformulario.submit() 
    } 
} 
// ]]></script>

La caja confirm devuelve true o false dependiendo de si se pulsa el botón de aceptar o cancelar. Ese valor se utiliza en un enunciado if para decidir si se envía el formulario, con su método submit(), o no se hace nada.

El código completo de una página que realiza esta tarea en un formulario es el siguiente:


Confirmación de envío de formulario
<script type="text/javascript" language="JavaScript">// <![CDATA[

function pregunta(){ 
    if (confirm('¿Estas seguro de enviar este formulario?')){ 
       document.tuformulario.submit() 
    } 
} 
// ]]></script></pre>
<form action="http://www.desarrolloweb.com" name="tuformulario"><input type="text" name="cualquiercampo" />
<input onclick="pregunta()" type="button" value="Enviar" /></form>
<pre>

#javascript que realiza la cuenta de los caracteres que se han escrito en un campo de formulario #textarea, al mismo tiempo que se están escribiendo by @desarrolloweb.com

Fuente: desarrolloweb.com

El diseño de este script fue motivado por la necesidad de hacer la típica caja para enviar mensajes SMS desde Internet. El tamaño máximo de un mensaje SMS de móvil es de 160 caracteres, con lo que es muy útil que la propia página te informe sobre el número de caracteres que se llevan escritos en el mensaje, para que el interesado no se pase del máximo permitido.

El funcionamiento es muy sencillo de entender, pero en cualquier caso podemos ver el script en marcha para saber exactamente qué nos proponemos.

El Formulario

La página presentará un formulario con dos campos. El primero con el textarea donde el usuario escribirá el mensaje y el segundo, un campo de texto donde mostraremos en todo momento los caracteres escritos.

El único detalle a tener en cuenta relacionado con Javascript es el par de eventos que tenemos definidos dentro del campo textarea, que sirven para llamar a la función que realiza la cuenta de los caracteres en el momento que el usuario presiona o suelta las teclas. Concretamente se utiliza el evento onKeyDown para definir las acciones a realizar cuando se aprete la tecla y onKeyUp, para definir acciones a ejecutar cuando se suelta la tecla apretada.

<form action="#" method="post">
<table>
<tr>
<td>Texto:</td>
<td><textarea cols="40" rows="5" name="texto" onKeyDown="cuenta()" onKeyUp="cuenta()"></textarea></td>
</tr>
<tr>
<td>Caracteres:</td>
<td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>

El script que cuenta caracteres
Con el formulario y el par de eventos introducidos tenemos todo lo necesario para que se cuenten -y recuenten- los caracteres cada vez que el visitante, situado sobre el textarea, pulsa sobre las teclas, es decir, cada vez que se escribe texto en el textarea. Ahora simplemente nos queda definir la función que se encarga de realizar la cuenta propiamente dicha y situarla en el otro campo de texto del formulario.

<script> 
function cuenta(){ 
      	document.forms[0].caracteres.value=document.forms[0].texto.value.length 
} 
</script>

Puede que a muchos haya sorprendido la sencillez del script, pero es que no hace falta más.

La propiedad value del textarea contiene el texto escrito y a su vez, la propiedad length guarda el número de caracteres de dicho texto. Así, document.forms[0].texto.value.length equivale al número de caracteres introducidos dentro del textarea. Este valor se asigna al contenido del campo de texto del formulario donde guardamos el número de caracteres, mediante la propiedad value del campo: document.forms[0].caracteres.value.

Con todo ello, se mostrará en el campo de texto el número de caracteres del textarea. Se puede ver el ejemplo en una página aparte.

Esperamos que este script haya solucionado vuestras necesidades para llevar la cuenta de los caracteres escritos en el textarea. Si deseamos además restringir el textarea para que no se pueda escribir más que un número de caracteres determinado, puedes continuar esta lectura con el artículo Evitar que un textarea sobrepase un número de caracteres permitidos.