Para tener un formulario con el plugin de contact form 7 con fecha de envío necesitamos crear un formulario con los campos deseados y añadimos un input oculto con un valor por ejemplo 0000.
¿Cuál es el código del formulario Contact Form 7?
<p>* Tu nombre<br /> [text* nombre]</p> <p>* Tu Correo<br /> [email* correo] </p> <p>* El Asunto<br /> [text* asunto] </p> <p>* Tu Mensaje<br /> [textarea mensaje] </p> <input type="hidden" name="fechaenvio" value="0000"> <p>[submit "Enviar"]</p>
¿Cómo implementamos la carga de archivos?
Ahora cargaremos en nuestro header del tema las siguientes líneas de código para poder utilizar tanto jQuery como implementar nuestros scripts. El código lo pegamos justo antes de la etiqueta de cierre del head. El plugin Contact Form 7 es una de las soluciones más utilizadas en WordPress para crear formularios de contacto personalizados.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
//Esta es la ruta a nuestro tema
//Dentro de nuestro tema creamos una carpeta js y dentro creamos nuestro archivo scripts.js
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/scripts.js"></script>
</head>
¿Cuál es el código jQuery para implementar la hora?
En nuestro archivo recién creado scripts.js alojado en nuestro tema dentro de la carpeta /js ponemos las siguientes líneas de código:
// JavaScript Document
jQuery(document).ready(function() {
jQuery('input[name=fechaenvio]').val(GetTodayDate);
function GetTodayDate() {
var tdate = new Date();
var dd = tdate.getDate();
//yields day
var MM = tdate.getMonth();
//yields month
var yyyy = tdate.getFullYear();
//yields year
var xxx = dd + "-" +( MM+1) + "-" + yyyy;
return xxx;
}
});Este código cambia el valor del input con el nombre fechaenvio por la fecha actual. Modificamos nuestro formulario para recibir la fecha Ahora sólo faltará implementar en el apartado del formulario de contacto que hemos creado, los datos que recibimos al enviar el correo, es decir, el cuerpo del mensaje, y añadimos el siguiente texto:
De: [nombre] <[correo]>
Asunto: [asunto]
Fecha: [fechaenvio]
Cuerpo del Mensaje: [mensaje]
Guía Contact Form 7 con fecha de envío
- Crear formulario con campos estándar e input oculto llamado fechaenvio con valor 0000
- Cargar jQuery y jQuery UI en el header del tema antes de la etiqueta de cierre head
- Crear archivo scripts.js en carpeta /js del tema para gestionar la fecha actual
- Usar función GetTodayDate en jQuery para capturar y asignar la fecha del sistema al input
- Configurar el cuerpo del email para mostrar nombre, correo, asunto, fecha y mensaje
