Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

Crear un Formulario de Contacto en PHP

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Rene Soto (you can also view the original English article)

Independientemente del tipo de sitio web que alguien posea o administre, es probable que necesiten un formulario de contacto. El formulario de contacto puede ayudar a sus visitantes a solicitar una cotización, solicitar información o compartir los consejos o problemas que enfrentan al utilizar un sitio web.

En este tutorial, nuestro enfoque estará en la creación de un formulario de contacto completamente funcional en PHP de principio a fin. Comenzaremos con el marcado de todos los campos que necesitamos agregar y el estilo básico del formulario de contacto. Después de eso, pasaremos al código PHP para implementar su funcionalidad.

Por supuesto, la forma más fácil de crear un formulario de contacto es descargar un script de formulario de contacto profesional de CodeCanyon.

Pero si desea aprender cómo se crea un formulario de contacto, ¡siga leyendo! Puede que sea más fácil de lo que piensa.

Marca de Nuestro Formulario de Contacto HTML

El primer paso para crear nuestro propio formulario de contacto es codificar el marcado. Comenzaremos a hacerlo una vez que tengamos una lista de todos los elementos que queremos dentro de nuestro formulario. Necesitaremos un campo de entrada para el nombre de la persona que nos está contactando, y necesitaremos un campo para su dirección de correo electrónico para que podamos enviarle una respuesta si es necesario. También necesitaremos un campo de entrada por el motivo por el cual las personas lo contactan y un textarea donde los usuarios pueden escribir su mensaje.

Si el sitio web que está administrando es muy popular, recibirá una gran cantidad de correos electrónicos a través del formulario de contacto. Para asegurarse de que las personas adecuadas puedan leer esos correos electrónicos y responder rápidamente, necesita un par de campos más. Por ejemplo, podría agregar un campo que pueda determinar a qué departamento quiere contactar el visitante, como marketing, soporte o facturación. Esta información se puede usar más adelante para enrutar el correo electrónico a la dirección apropiada. En última instancia, eso podría ayudarlo a responder más rápidamente y ordenar los correos electrónicos de manera más eficiente.

La cantidad de campos que agregue al formulario de contacto dependerá del tipo de sitio web que ejecute, pero asegúrese de no hacerlo en exceso. Si obliga a los visitantes a completar demasiados detalles, puede evitar que se pongan en contacto con usted por completo.

Permita escribir el código HTML para agregar todos los campos que acabo de mencionar en nuestro formulario de contacto.

Antes de continuar, me gustaría resumir rápidamente el significado de algunos atributos importantes en el marcado anterior. El atributo de action en el formulario determina dónde se deben enviar los datos del formulario. Si no tiene un atributo de action, los datos se envían de nuevo a la misma URL. Aquí hemos utilizado contact.php, por lo que los datos del formulario se enviarán a ese script.

El atributo de name para diferentes elementos de entrada en el formulario se utiliza para acceder a los valores de los elementos en el lado del servidor. Por ejemplo, en el formulario anterior, puede obtener el nombre del visitante que lo está contactando usando $_POST ['visitor_name'] en contact.php.

Usamos el atributo placeholder para dar a los usuarios una idea básica de la entrada esperada para cada campo en el formulario. El atributo required garantiza que no quede ningún campo importante en blanco antes de que el usuario presione el botón de envío en el formulario. El atributo pattern se usa para imponer algunas reglas sobre el tipo de valores que pueden ir dentro de ciertos campos. En nuestro caso, solo permitimos que los usuarios utilicen letras y el carácter de espacio en los nombres que envían. También limitamos el número total de caracteres aceptables de 3 a 20 inclusive. El patrón que utilice dependerá del tipo de entrada que desee de los usuarios.

La siguiente demostración de CodePen nos muestra cómo se ve nuestro formulario de contacto con el marcado anterior y un poco de CSS.

Hacer que Nuestro Formulario de Contacto HTML sea Funcional usando PHP

Hacer que nuestro formulario de contacto HTML sea funcional usando PHP En este momento, nuestro formulario no hace nada útil. Los visitantes pueden completarlo y presionar el botón enviar mensaje, pero no recibiremos nada porque no hay un código de servicio para manejar la información proporcionada por el formulario. En esta sección, haremos que nuestro formulario de contacto sea funcional usando PHP.

Comience creando un archivo contact.php y coloque el siguiente código en su interior.

Ya hemos hecho alguna validación del lado del cliente de la entrada del usuario. Sin embargo, siempre es más seguro hacer la validación del lado del servidor también. Usamos la función filter_var() para sanear el nombre proporcionado por el usuario. De manera similar, también desinfectamos el valor de $email_title y $concern_department. Puede usar la función filter_var() para validar o desinfectar todos los tipos de entrada de usuario. También usamos la función htmlspecialchars() para codificar todos los caracteres HTML especiales en el mensaje del visitante que nos envían.

El valor de $recipient se basa en el valor de la variable $concern_department. De esta manera, nos aseguramos de que solo las personas que realmente deben investigar el asunto reciban el correo electrónico.

Finalmente, usamos la función mail() para enviar un correo electrónico que incluye la información que el visitante quería que supiéramos. Luego de la entrega exitosa del correo electrónico, informamos a los visitantes que hemos recibido su correo electrónico y que se contactará con ellos pronto.

La seguridad es primordial cuando se trata de datos de usuario o entrada. Si debe validar o desinfectar la entrada del usuario depende de qué es la entrada y cómo desea utilizarla. La validación simplemente verifica si la entrada del usuario sigue un cierto conjunto de reglas. Por ejemplo, la validación podría verificar que el nombre de una persona no contenga ningún número. La desinfección se utiliza para eliminar cualquier carácter ofensivo que suponga un riesgo para la seguridad. Por ejemplo, un usuario malintencionado que intenta contactarlo a través del formulario puede agregar una etiqueta script en el textarea para que descargue una secuencia de comandos dañina. Esto es particularmente preocupante cuando su sitio web tiene foros públicos accesibles para todos.

Sin embargo, debe tener mucho cuidado al deshacerse de los caracteres no deseados en la entrada del usuario. Por ejemplo, puede decidir utilizar filter_var ($user_input, FILTER_SANITIZE_STRING); en alguna entrada para eliminar todas las etiquetas y codificar caracteres especiales. Sin embargo, esta bandera también elimina la entrada de caracteres inofensivos por parte de usuarios legítimos. Aquí hay un ejemplo:

Si su sitio web tiene muchos temas relacionados con las matemáticas, será relativamente común que los usuarios escriban en formularios de contacto o en publicaciones de foros. El uso del indicador FILTER_SANITIZE_STRING con la función filter_var() eliminará la información necesaria del mensaje en este caso.

El punto que trato de señalar es que, aunque siempre debe validar o sanear los datos de los usuarios, asegúrese de no eliminar información crucial en el proceso.

Conclusiones Finales

Crear un formulario de contacto básico en PHP es relativamente simple una vez que esté familiarizado con los conceptos básicos. Empiece escribiendo el HTML necesario para crear elementos de entrada para información como el nombre de los usuarios, la dirección de correo electrónico, el número de teléfono, etc. El siguiente paso es escribir CSS para asegurarse de que el formulario de contacto se integra perfectamente con el resto del sitio web. El último paso consiste en escribir el código PHP que tomará la información del formulario de contacto y se la enviará de manera segura.

El objetivo es asegurarse de que los diferentes elementos de la forma estén dispuestos de una manera que no confunda a las personas y que la información del usuario sea saneada y validada antes de enviarla por correo a las partes interesadas. Si todo esto es nuevo para usted o si no quiere pasar mucho tiempo creando un formulario de contacto de aspecto profesional, definitivamente debería revisar estos scripts de PHP de formulario de contacto mejor calificados.

Si tiene alguna pregunta, no dude en hacérmelo saber en los comentarios. Mi próximo tutorial le mostrará cómo implementar su propio CAPTCHA para ayudar a mantener el formulario de contacto de spam bajo control.

Si está interesado en los scripts de formularios PHP de calidad profesional que puede comenzar a usar en su sitio hoy, consulte algunas de nuestras otras publicaciones.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.