Crear un formulario de contacto en Wordpress (Contact Form 7)
En el siguiente tutorial vamos a implementar un formulario de contacto, una pieza clave en cualquier web que quiera mostrar cierta calidad. Nos da igual que sea una tienda, un portafolio, un blog, una empresa o un anuncio; en todos los casos anteriores necesitaremos que el cliente pueda comunicarse. Desde asistencia técnica a pedir un presupuesto. Otra opción sería dejar un e-mail, pero ni es seguro (terminaremos con mucho spam) ni es elegante. Por ello tendremos, siempre que podamos, un formulario para facilitar la tarea a nuestros visitantes.
Lo primero que haremos será instalar el plugin Contact Form 7.
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-12.04.17-1024x371.png)
Tras la instalación aparecerá un nuevo elemento en tu menú de administrador.
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-11.26.34-1024x460.png)
Creamos un nuevo formulario pulsando Add New. Definimos el idioma.
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-11.34.21.png)
Le damos un nombre, y debajo definimos los campos. Pueden ser escritos siguiendo el patrón o utilizar el generador (Generate Tag)
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-11.35.28-1024x513.png)
Si lo deseamos, podemos modificar los mensajes de error.
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-11.35.47-1024x412.png)
Guardamos (el botón está arriba). Cuando lo hagamos nos devolverá un código similar al siguiente.
[contact-form-7 id="33" title="Nombre de tu formulario"]
Si lo quieres volver a ver, debes ir a Contact Forms. Allí estarán listado todos los formularios creados.
Ya solo nos quedará ir a la página que deseamos que se muestre, y pegar
el código anterior.
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-11.46.13-1024x528.png)
El resultado final.
:quality(85)/https://andros.dev/media/blog/2014/08/Screen-Shot-2014-08-31-at-11.47.59-1024x574.png)
Este trabajo está bajo una licencia Attribution-NonCommercial-NoDerivatives 4.0 International.
Apóyame en Ko-fi
Comentarios
Todavía no hay ningún comentario.