Envío de formularios web por email con PHP y jQuery AJAX

Hace algún tiempo publique una entrada para crear un formulario multi pasos con html, jquery y css3. Pero nunca explique cómo enviar ese formulario y he recibido varias consultas preguntando eso, así que por fin le dedique un poco de tiempo y crearemos un sencillo script php para el envío de formularios web por email con PHP y jQuery AJAX.

Que necesitamos?

Un formulario (obvio) incluso podría usarse el formulario multipasos ya explicado en esta entrada, pero para fines practico crearemos uno mas simple, pero el método es aplicable a cualquier formulario.

  • Formulario HTML.
  • Un servidor web con php.

Nuestro formulario

Los mas suspicaces notaran que no existe la etiqueta form y esto no es un error del todo, semanticamente no seria correcto si lo validamos con el w3c, pero lo podemos resolver eligiendo el doctype mas adecuado, en este caso html5, así que lo agregamos a nuestro documento html.
Bien y el resultado seria mas menos lo siguiente:

screenshot.1Mmmm, realmente es un formulario muy básico xD, pongamos un poco de color ayudados por css.

Creamos un nuevo documento con extensión .css yo lo llamare style.css (que original).

Ahora nuestro formulario si luce bien.

screenshot.1

Pero un momento, si el formulario no tiene la etiqueta <form></form>  como enviaremos el formulario sin el atributo action?. La respuesta es bien simple… Con Jquery Ajax por supuesto. Podemos crear un Archivo independiente para el script Jquery o integrarlo en la cabecera de nuestro documento html dentro de una etiqueta  <script type="text/javascript">  , yo lo incluiré dentro del documento.

Primero  declaramos un document ready $(document).ready(function(){});  y dentro programamos las validaciones básicas.

El código esta fuertemente comentado, por tanto no lo explicaré detalladamente (si existen dudas o incluso pueden aportar mejoras, comentarlas).

Debemos realizar las validaciones del lado del cliente antes que se envíe el formulario y presentar los errores si es que existen, para ello activamos nuestras validaciones con el método .click de jQuery, en términos mas simples, nuestro código jQuery se activara una vez realicemos un clic al botón enviar.

Usando los selectores de jQuery, vigilamos la acción .click()

La primera parte ya esta hecha, pero al probar el formulario nos daremos cuenta que no realiza ninguna acción, si vemos la consola del navegador observaremos este error:

Error jQueryEsto se produce por no haber agregado la llamada a la librería de jQuery, asi que procedemos a incluirla en la cabecera de nuestra pagina  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">  ahora al volver a probar nuestro formulario e intentar enviarlo sin completar los campo se iluminan los bordes con un color rojo indicando un error y si completamos los campos iluminados estos se restablecen.

validacíon jQueryBien ahora ya validamos correctamente, pero cuando realizamos el envío no sucede nada, pues bien ahora lo resolveremos.

Para enviar los datos por email, usaremos el método mail() de PHP, este método de php es lo mas básico que podríamos implementar y mas sencillo.

Desde nuestro script jQuery mediante ajax enviaremos los datos del formulario a nuestro nuevo archivo php (contact_me.php) para procesarlos y enviar el mail (al fin).

Agregamos los siguiente a nuestro script después  del método .eatch().

Ahora crearemos el archivo contact_me.php  y agregamos el siguiente código.

Ahora ya podemos realizar un prueba del envío. No olviden cambiar la dirección de email donde llegaran los mensajes en la linea 4 del archivo contact_me.php.

Otra cosa importante es el hecho que si prueban el formulario en un servidor local no les llegara el mensaje al correo configurado y si miran la consola del navegador verán un mensaje similar al siguiente.

Esto es por que nuestros computadores hogareños no cuentan con un servidor de email configurado para poder enviar los email a otros servidores (gmail,yahoo, etc), pero en un hosting publico no deberíamos tener problema.

Actualización 21/06/2016

Para realizar pruebas en ambientes locales leer el siguiente post Como probar envios de eamil en servidor local

Descargar

[download id=”879″]

Referencias

Paleta de Colores
Método .click() jQuery
Método mail PHP
jQuery.ajax()
filter_var PHP
filter_sanitize PHP

Cómo usar Dashicons en WordPress

Desde WordPress 3.8 tenemos a nuestra disposición los maravillosos Dashicons pero ¿sabes cómo utilizarlos?

Los Dashicons son iconos a partir de fuentes que se pueden utilizar en publicaciones, temas, plugins o incluso la interfaz de administración de WordPress para sustituir a imágenes, mucho más pesadas. Además, los Dashicons son totalmente escalables en tamaño al ser vectores, por lo que se adaptan de maravilla a todo tipo de resoluciones de pantalla sin perder calidad.

Ahora bien, usarlos no es tan fácil como contarlo.

Añadir soporte de Dashicons

Antes de nada debes hacer que tu tema soporte Dashicons, para lo que debes ir al fichero functions.php del mismo y añadir lo siguiente:

WordPress ya soporta Dashicons así que para otros usos no necesitas nada más. Esto es necesario para que el tema muestre Dashicons.

Cómo añadir Dashicons en temas y plugins

Si vas a añadir, por  ejemplo, tipos de entrada personalizadas en un tema de tu creación lo ideal es que las distingas mediante un icono específico que las distinga del resto.

El primer paso es ir a la página oficial de Dashicons de WordPress, donde elegirás el icono a utilizar haciendo clic sobre el mismo para, a continuación copiar el código que necesitas para incorporarlo en tu tema, normalmente en CSS, aunque también ofrece obtener el HTML o incluso el glifo.

Apuntas el nombre del icono y lo añades a la función de tu tipo de entrada personalizada, así:

La etiqueta o descripción es la que tu quieras, solo tienes que definir la variable menu_icon con el nombre del Dashicon elegir, en el ejemplo “dashicons-book-alt”.

Lo que conseguimos es que nuestro tipo de entrada personalizada se identifique en el escritorio de WordPress con un bonito icono de un libro.

Si lo que queremos es añadir un icono distintivo a una página de ajustes de un plugin el proceso es parecido. Lo primero es elegir el icono, como antes, y a continuación añadimos el nombre del mismo a nuestra función del plugin que añada la página de ajustes, por ejemplo. Algo así:

 Cómo usar Dashicons en un menú personalizado de WordPress

Pero no solo para desarrolladores están hechos los Dashicons, sino que podemos usarlos donde queramos. Un uso muy interesante sería en un menú personalizado, que quedará mucho más chulo si lo acompañamos de  un bonito icono.

Una vez elegido el icono a utilizar, de nuevo de la página de Dashicons vista al principio de este artículo, en esta ocasión copiamos el código HTML.

Lo siguiente es aplicar la segunda variante del truco que ya vimos para usar imágenes en los menús personalizados de WordPress, solo que en este caso el código a utilizar será el que nos facilita la página de Dashicons, así de simple.

A modo de recordatorio, el proceso es este:

  1. Crea un elemento nuevo de menú en el que en la denominada Etiqueta de navegación, en vez de poner el típico texto, simplemente pega el código HTML del Dashicon.
  2. La URL del elemento del menú será el que tu quieras, por supuesto.
  3. Guarda los cambios.

Cómo usar Dashicons en cualquier otro sitio

Creo que es bastante obvio que puedes usar Dashicons en cualquier parte. Copiando el código HTML puedes añadirlos para ilustrar tus publicaciones, como elementos meta en tu tema mediante CSS o HTML, lo que quieras.

Si vas a utilizarlos como elemento común en tu tema simplemente crea una clase CSS para su uso posterior en el tema, y si los usas puntualmente simplemente utiliza el HTML donde quieras mostrarlos.

Para incorporar un Dashicon en tu CSS podría ser algo así:

Para tus publicaciones, puedes copiar y pegar el HTML del icono a usar o, si los usas mucho, incluso instalar un plugin como JM Dashicons Shortcode que te facilita la inserción de iconos en tus entradas o páginas.

desde Ayuda WordPress http://ift.tt/1E2ZIy3
via IFTTT

Crea tu propio plugin SEO

Siempre estamos con la discusión de cuál es el mejor plugin de SEO, que si el de Yoast porque tiene más cosas, que si el All in one SEO pack porque no falla nunca, que si Fernando está loco, que si meto las tags manualmente, etc. Pero ¿y si creas el tuyo propio? Así que basta de debates estériles y discusiones inútiles de a ver quién la tiene más larga y manos a la obra a crear un plugin SEO básico que añada las descripciones meta y un título para Open Graph con su descripción a la cabecera de las … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1iO0oZo
via IFTTT

Diez librerías de PHP indispensables

 

Tiene muchos (y muy beligerantes) detractores pero ni siquiera estos podrán negar que PHP es uno de los lenguajes más utilizados de la actualidad. Y el uso masivo de un lenguaje tiene un efecto: que casi cualquier cosa que se te ocurra hacer, ya la ha hecho alguien antes y seguramente la haya empaquetado en forma de librería y ofrecido al mundo (y muy posiblemente en formato open source) para su uso y disfrute. Hoy os traemos, amigos de Genbeta Dev, una selección de diez librerías de PHP que consideramos indispensables ya que hará tu vida profesional más sencilla, cómoda y feliz. Son todas open source y funcionales para PHP5 (salvo que se indique expresamente lo contrario) por lo que las puedes utilizar en tus proyectos sin problemas y hemos evitado las más obvias como mCrypt, cUrl, PDO o incluso PHPUnit ya que estas debes tenerlas instaladas si o si. Y me dejo ya de preliminares, vamos al turrón:

pChart

Para realizar gráficos hay multitud de librerías de pago en PHP, sin embargo no mejoran excesivamente los resultados de pChart, todo un clásico del desarrollo PHP y que parece que no pasa de moda nunca (raro debe ser el desarrollador peachepero que no la ha usado alguna vez). Genera gráficos de diversos tipos a partir de ficheros CSV, queries SQL o datos introducidos manualmente. Depende, eso si, de tener instalada la librería GD.

Descarga | pChart (SourceForge)

Upload

Upload es una librería (gratuita y con licencia MIT) que te ahorra el tedioso cometido de subir y validar ficheros al servidor. Tan sólo unas cuantas líneas y p’alante. Librería top.

Descarga | Upload (GitHub)

PHP Excel Reader

Parsear ficheros Excel o CSV… ¿hay cosa más odiosa y menos gratificante? Pues con PHP Excel Reader es coser y cantar. Fácil de instalar, más fácil todavía de utilizar y prácticamente a prueba de bombas. De verdad, quiero más a esta librería que a algunos de mis amigos.

Descarga | php-excel-reader (Google Code)

Gaufrette

Realmente trabajada librería que te facilita una capa de abstracción para trabajar con sistemas de ficheros de distintos tipos (locales, servidores FTP, sistemas en la nube como Amazon S3, Azure o Rackspace…) de manera transparente y un sistema de caché para ficheros lentos.

Descargar | Gaufrette (GitHub)

Omniplay

Potente paquete de librerías para procesamiento de pagos en PHP que ofrece una API consistente para validar tarjetas de crédito y poder trabajar de una manera transparente con una veintena de pasarelas de pago. En un principio, ninguna de estas pasarelas salvo PayPal y pocas más, es de mucha utilidad para el usuario español pero, por suerte, es un sistema escalable que te permite añadir tus propias pasarelas con poco esfuerzo (apenas extendiendo una librería llamada AbstractGateway). Además incluye una completa aplicación de prueba para que puedas comprobar todo su potencial.

Descarga | Omnipay (GitHub)

FPDF

Alternativa libre, gratuita y sorprendentemente funcional y rápida a la popular PDFLib a la hora de crear y manejar archivos PDF dede PHP. Tan sólo necesita de zlib y GD instalados para funcionar correctamente. Acepta imágenes, fuentes TrueType y Type1 y compresión. Muy apañada.

Descarga | fpdf.org

PHPMailer

Después de penar con la función mail() de PHP, utilizar la librería PHPMailer, otro clásico que casi seguro que todos hemos catado alguna vez, es poco menos que ambrosía para nuestros paladares. Con soporte para SMTP (y diversos métodos de autenticación), emails alternativos para clientes sin soporte HTML, capacidad para múltiples TOs, CCs y demás. Hay muchas más opciones en este mundo del emailing vía PHP pero PHPMailer es con diferencia la más utilizada..

Descarga | PHPMailer (GitHub)

Krumo

Básicamente lo que hace es poner bonito el var_dump con un poco de HTML y CSS. Parece poca cosa pero nuestros ojos lo agradecen y mucho. Ya viene integrado en muchos proyectos como Drupal.

Descarga | Krumo (SourceForge)

Carbon

Supongo que no soy el único que odia trabajar con fechas. Es algo realmente terrible… y eso que con la inclusión de la clase DateTime en PHP5.3, la cosa ya no es para cortarse las venas. Pero con Carbon es otra cosa. Carbon es una librería que hereda de DateTime y le añade un componente semántico muy importante además de facilitar el formateo y la localización. Muy útil. Eso si, como DateTime, sólo funciona a partir de PHP 5.3.

Descarga | Carbon

Underscore

Pues si, es como underscore.js pero portado a PHP. Y como su hermano mayor javascriptero, es rabiosamente útil y fácil de utilizar. Eso sí, sólo funciona para instalaciones de PHP 5.3 y superiores.

Descarga | Underscore

 

Como saber cuando google bot visita nuestro sitio web

Sí deseas saber el momento exacto y por cuales páginas ha pasado el robot de google (Googlebot) en su o sus sitios web. Solo debes utilizar el siguiente código en el header del sitio y cuando el bot de google aparesca recibiran un email con la IP, navegador y url destino de la araña o robot de google.

Deben cambiar la dirección de email por la suya (obvio), si no les funciona puede ser que su hosting o servidor tengan la funcion mail de php truncada, en ese caso pueden usar la libreria phpmailer ampliamente documentada en internet:

y el correo que recibiremos sera parecido a la siguiente captura:

Paso de Googlebot