Cómo enviar un correo electrónico desde un formulario de contacto HTML

Implementación de Sendmail y PHPMailer

by Tibor Kopca Date: 10-05-2021 php javascript desarollo web sendmail phpmailer


En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico (a ti como creador de la web y al usuario o cliente también).
Si eres un desarrollador de las páginas web, hay una alta probabilidad de que no puedas evitar tener que enviar o procesar correos electrónicos. Un formulario funcional en tu sitio es una de las necesidades o estándares básicos hoy en día. Si no tiene un formulario en su sitio web, podría estar perdiendo más clientes potenciales o simplemente suscriptores, con el beneficio añadido de la seguridad.

Requisitos previos


Conocimientos de HTML, CSS, JavaScript y no estará de más que sepas un poco de PHP.
Además, para que el código PHP funcione, probaremos la funcionalidad en XAMPP, esto podría omitirse si subieras el código al host web en cada cambio, así el host sería el que ejecuta PHP, de esta manera es posible trabajar en un entorno un poco "en vivo".


(Nota: cuando estamos ejecutando XAMPP, se ejecuta bajo derechos de administrador, pulsando el botón derecho del ratón y eligiendo esta opción).
Asumimos que tienes una cuenta de Gmail para las pruebas de este código, y que utilizarás el servidor SMTP de Gmail para transmitir el correo electrónico.

Sendmail_xampp


Formulario básico

<form class="" name="emailForm" action="mailto:[email protected]" method="POST" enctype="text/plain">
<input type="text" name="name" placeholder="name" maxlength="40" required>
<input type="email" name="email" placeholder="email" maxlength="40" required>
<textarea name="message" id="" maxlength="500" name="message" placeholder="message"></textarea>
<input type="reset" class="button" value="Clear">
<input type="submit" class="button" value="Send">
</form>

Este código creará un formulario realmente básico que pide el nombre del contacto, su correo electrónico, ambos con una longitud máxima de 40 caracteres, un mensaje de hasta 500 caracteres, y un botón de envío. Para uno más completo, tendremos que añadir algunas líneas más de código, pero eso lo haremos más tarde.
Además, este código es bastante poco funcional - no envía directamente a la dirección de correo electrónico, sino que abre una ventana del cliente de correo electrónico para enviar el formulario, por lo que el campo de entrada de correo electrónico que acabamos de pedir que rellene el usuario es bastante inútil.
(Nota: esto es similar a la etiqueta HTML <address> con la sintaxis <a href="mailto:[email protected]">John Doe</a> )

Sendmail_Plain_html

Código PHP - Manejo del lado del servidor


Así que para hacer que la magia suceda, asumimos que su sitio web tendrá algún servidor PHP que funcione, incluso local o en vivo.

method="POST"
Esto determina cómo se envían los datos del formulario al servidor, hay dos maneras de hacerlo, POST o GET. Utilizaremos POST para que los datos rellenados en el formulario sean enviados "entre bastidores" y no aparezcan en nuestra URL como lo harían con GET. ¡Así que NUNCA use GET para enviar datos sensibles ya que los datos del formulario enviado son visibles en la URL!
POST no tiene limitaciones de tamaño, y puede ser usado para enviar grandes cantidades de datos.
accept-charset="utf-8"

El parámetro Action determinará a donde se enviarán los datos rellenados, este será un nuevo archivo que crearemos en la estructura de archivos. Elige el nombre del archivo que quieras, por ejemplo subscribersform.php, en nuestro caso lo llamaremos sendmail.php.


Esto podría ser incluso la misma página en la que empezamos - index.html con código php antes de todo el código HTML y renombrado a index.php. Esto funcionaría de la misma manera.
Lo que ocurre aquí es que al tener sendmail.php en el parámetro de acción, después de pulsar enviar, el código enviará los datos del formulario a sendmail.php donde serán capturados.
Si escribimos nuestro código como el de abajo, nos redirigirá a ese archivo, lanzando efectivamente otra página web.

<form class="" accept-charset="utf-8" action="sendmail.php" method="POST" enctype="multipart/form-data">
  •     application/x-www-form-urlencoded - este es el valor por defecto, si no se especifica el enctype,
  •     multipart/form-data es necesario cuando sus usuarios deben subir un archivo a través del formulario.
  •     text/plain es una opción válida, aunque no se recomienda, ya que envía los datos sin ningún tipo de codificación.


Pasemos a sendmail.php.
Aquí ponemos el código PHP que se encargará de toda la acción. Ahora si quieres probar ya rellenando el formulario y dándole a submit, descubrirás que de repente te quedas atascado en este archivo, así que para volver a la página principal, escribimos esta parte de código, poniéndola siempre al final. Además, para hacer pruebas, también imprimimos el texto en la consola>

<script>
console.info('virtual email sent from sendmail.php.');
//REDIRECT TO THE MAIN PAGE
window.location.href = './index.html';
</script>

Using Sendmail

Es el momento de escribir el código que nos envía algo. Un script PHP comienza con <?php y termina con ?> .
Así que estamos en sendmail.php bien, y escribimos>

<?php
if($_POST["message"]) {
    mail("[email protected]", "Test subject line", "fictional email body", "From: [email protected]");
}?>

¿Qué significa este código?
Primero comprobamos si el mensaje fue rellenado y si lo es, el código dentro de IF se ejecutará, lanzando efectivamente la función mail() . "mail" envía el formulario completado como un correo electrónico a "[email protected]", y el asunto es el que sigue.

Con esto, tenemos el código realmente muy básico, sin ninguna validación o comprobación de seguridad, seguramente podemos hacerlo mejor que esto.

Ahora recordemos que tenemos elementos HTML de entrada en nuestro formulario ¿verdad? Cada uno de los campos que queremos procesar, tiene un nombre de parámetro y trabajaremos con ellos en sendmail.php. Los datos rellenados por un usuario se convertirán en una variable con el nombre del input del que procede. Para que esto funcione, por supuesto los parámetros de nombre deben tener "nombres" únicos, tenga en cuenta que sólo tenemos uno de cada uno - name=”name”, name=”email”, name=”message” , etc.
Como hemos dicho estas variables están todas empaquetadas en una variable superglobal de PHP llamada $_POST . Si añades esto al sendmail.php, al rellenar el formulario, deberías ver los datos que se están enviando.

<?php
echo "<pre>";
    print_r($_POST);
echo "</pre>";
?>

Ahora configuramos algunas variables para romper el $_POST para trabajar con los datos. Ahora tenemos nuestro código así>

if($_POST["message"]) {
    $name = $_POST["name"];
    $visitorEmail = $_POST["email"];
    $message = $_POST["message"];
    $OUR_MAIL = '[email protected]';
    
$errors = "";
//NORMAL OPERATION - NO ERRORS        
    if(empty($errors)){
        $EMAIL_SUBJECT = "New Form Contact From " . $name . " @ Your Portfolio Website!";
        $emailBody = "User name: " . $name . "rn".
                     "User email: " . $visitorEmail . "rn".
                     "User message: " . $message . "rn";
 
        $TARGET_EMAIL = "[email protected]";
//HEADERS
        $headers = "From: " . $OUR_MAIL . "rn";
        $headers .= "Reply-To: " . $visitorEmail . "rn";
}}
?>

(Nota: rn hará el salto de línea - el texto estructurado de la línea)
Por ahora, no tenemos ninguna validación de código, ni función de correo real, pero eso va a cambiar cuando lo mostremos en el código a continuación. Las cabeceras son opcionales, sirven para cosas como BCC, direcciones Reply-To, y cosas así.

Mail Function

PHP mail es la función PHP incorporada que se utiliza para enviar correos electrónicos desde scripts PHP.

mail($TARGET_EMAIL, $EMAIL_SUBJECT, $emailBody, $headers)

$TARGET_EMAILes es la dirección a la que se enviará el mensaje.
$OUR_MAIL es la dirección - servidor de correo electrónico desde donde se enviará el mensaje. Se trata, por ejemplo, de un servidor de producción donde tenemos alojado nuestro sitio web.


Añadimos la resolución de éxito o fracaso de la función de correo, incluso se mostrará el mensaje del usuario según cuál sea el resultado. Lo último será la redirección a la página index.html, refrescando efectivamente la ventana.

$success = mail($TARGET_EMAIL, $EMAIL_SUBJECT, $emailBody, $headers);
//SUCCESS OR FAIL FOR CORRECT TEXT
if ($success){
        ?>
      <script language="javascript" type="text/javascript">
      //REDIRECT TO THE MAIN PAGE or alternatively to 'thank you page'
 alert('Thank you for the message. I will be in contact with you shortly.');
       window.location.href = './index.html';
      </script>
      <?php
} else{
      //mail failed for some reason
      ?>
      <script language="javascript" type="text/javascript">
        alert('Message failed. Please, contact me by an alternative way.');
        window.location.href = './index.html';
      </script>
      <?php
}

Sendmail_gmail_inbox

Sendmail_script_thank_you

XAMPP settings



Si por alguna razón ve este mensaje - Failed to connect to mailserver at "localhost".. , ahora le daremos algunas pistas sobre cómo resolver este problema.

Sendmail_PHP_Fail

PHP debe ser configurado correctamente en el archivo php.ini con los detalles de cómo su sistema envía el correo electrónico.
Abra el archivo php.ini en el directorio de XAMPP y encuentre la sección titulada [mail function].


Los usuarios de Windows deben asegurarse de que la directiva llamada SMTP que define la dirección de su servidor de correo electrónico está configurada como SMTP = smtp.gmail.com . La segunda se llama sendmail_from que define su propia dirección de correo electrónico, por lo que hay que establecer a la dirección de gmail EXACTAMENTE como tenemos la variable $OUR_MAIL.


Otra cosa importante es configurar sendmail.ini para las notificaciones de correo electrónico. En PHP.ini localiza sendmail_path y sustitúyelo por sendmail_path = ""C:xamppsendmailsendmail.exe" -t" . Obviamente la unidad y la ruta deben apuntar al sendmail.exe, asegúrese de que así sea dónde está en tu sistema.

Sendmail_PHP_ini

Edita el archivo sendmail.ini en el subdirectorio sendmail de tu directorio de instalación de XAMPP. Dentro de este archivo, encuentre la sección [sendmail] y reemplace estas líneas. Los valores deberían ser los siguientes>
Smtp_server = smtp.gmail.com
Smtp_port = 465
Smtp_ssl = auto
Error_logfile = error.log
Auth_username = [email protected]
Auth_password = gmail password

Después de esto, reinicie el servidor Apache utilizando el panel de control de XAMPP.


Gmail Email Client

Además, como último consejo, el uso del servidor SMTP de Gmail para el envío de correos electrónicos sólo funciona si has permitido que aplicaciones menos seguras accedan a tu cuenta (si no utilizas la verificación en dos pasos).
Y en la configuración también habilita el acceso IMAP.
  Sendmail_Google_less_secured_settings

Validar los datos del formulario con PHP


Ya casi llegamos al final. La cosa es que podemos ser víctimas de alguna malevolencia cada vez que pongamos algún formulario, debemos tener más seguridad configurada. Vamos a centrarnos en el back-end, sobre cómo validar formularios HTML escribimos en el otro artículo, allí puedes obtener información sobre cómo hacer el código Javascript del front-end.

Así que modificamos de nuevo nuestro código. Recuerda que tenemos nuestro código comprobando si hay errores, pero aún no han sido capturados. Ahora sólo cuando no existan errores el código procederá a la función mail() .

//EMPTY SPACE VALIDATION
    if(empty($name) || empty($visitorEmail) || empty($message)){
        $errors .= "n All fields are required";
    }
 
    //NAME VALIDATION
    $string_exp = "/^[A-Za-z .'-]+$/";
    if (!preg_match($string_exp, $name)) {
        $error_message .= "n The Name you entered does not appear to be valid.";
    }
 
    //EMAIL REGEX VALIDATION
    $email_exp = "/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i";
    if (!preg_match($email_exp, $visitorEmail)){
        $errors .= "n Invalid email address";
    }

Sendmail_Pig_user

Bien, hasta ahora tenemos validación SI el usuario envió el formulario, y tenemos validación si faltan campos o datos que no queremos. A continuación, tenemos que deshacernos de los potenciales exploits de cross-site scripting (XSS), debemos evitar que los atacantes inyecten script del lado del cliente en nuestro código.

  •     Quitar los caracteres innecesarios (espacio extra, tabulación, nueva línea) de los datos de entrada del usuario (con la función PHP trim() ), también nos deshacemos de las etiquetas HTML en este paso.
  •     Eliminar las barras invertidas () de los datos introducidos por el usuario (con la función PHP stripslashes())
  •     Usando la función htmlspecialchars() esta función convertirá los caracteres especiales en entidades para evitar que los navegadores los usen como elementos HTML. Esto es útil para evitar que el código se ejecute cuando queremos hacerlo, por ejemplo si el usuario intenta enviar o ejecutar su código puesto en el campo de texto. Esto no elimina los caracteres, pero ya no se manejarán como código HTML, sino como texto plano.
    <script>location.href('http://www.facebook.com')</script>
    se convertirá en:
    &lt;script&gt;location.href('http://www.facebook.com')&lt;/script&gt;.
  •     Por último definimos una función para reemplazar el carácter vacío de todo el texto innecesario que no queremos que aparezca en nuestro buzón, nótese que para ello hemos movido todo el texto a minúsculas.

Ahora, podemos comprobar todos los datos entrantes (todos nuestros campos de formulario) que estamos escribiendo en variables con la función test_input() , y con la función quitaremos los datos de intentos de hackers potencialmente dañosos.

//TEST INPUT DATA FOR INJECTION
function testInputData($data){
  $data = strip_tags(trim($data));    //trim extra space, tab, newline from the user input data
  $data = stripslashes($data);        //Remove backslashes () from the user input data
  $data = htmlspecialchars($data);    //data would be saved as HTML escaped code, so safe to display
  $data = preg_replace("([rn])", "", $data); //removes newlines
  $data = cleanString(strtolower($data));      //removing unwanted strings
return $data;
}
 
//Returns empty if encounters any unwanted characters in $inputString
function cleanString($inputString){
  $unwantedChars = array("content-type", "bcc:", "to:", "cc:", "href", "https");
  return str_replace($unwantedChars, "", $inputString);
}

//SEND MAIL CODE
    $name = testInputData($_POST["name"]);
    $visitorEmail = testInputData($_POST["email"]);
    $message = testInputData($_POST["message"]);

PHPMailer

Hablemos de por qué PHPMailer es mejor que el correo nativo de PHP.


PHPMailer es quizás la librería PHP de código abierto más popular para el envío de correos electrónicos y desde su lanzamiento se ha convertido en la favorita de los desarrolladores PHP. Es una alternativa a la función PHP mail() , pero con más flexibilidad para sus necesidades. Por ejemplo, PHPMailer está orientado a objetos, puede usar un servidor SMTP de correo no local, lo cual es mejor que el servidor de correo local de mail()s, puede imprimir mensajes de error cuando el envío de correos electrónicos falla. Y también es utilizado por los populares CMS (sistemas de gestión de contenidos) de PHP como WordPress, Drupal y Joomla.


Así que tenemos que ir al repositorio de Github de PHPMailer y descargarlo como un archivo zip.
Extraer y poner los archivos del directorio src del archivo a nuestro directorio de la aplicación a la carpeta 'mail'.

Sendmail_PHPMailer_files
Para ilustrar cómo se puede utilizar con nuestra cuenta de Gmail, creamos un script totalmente diferente llamado sendmailphpmailer.php, lo enlazamos en el index.html (o index.php si lo tenemos así) en lugar de sendmail.php y añadimos este código dentro>

<?php
use PHPMailerPHPMailerPHPMailer;
use PHPMailerPHPMailerException;
 
require $_SERVER['DOCUMENT_ROOT'] . '/Portfolio_Tibor/mail/Exception.php';
require $_SERVER['DOCUMENT_ROOT'] . '/Portfolio_Tibor/mail/PHPMailer.php';
require $_SERVER['DOCUMENT_ROOT'] . '/Portfolio_Tibor/mail/SMTP.php';
 
//TEST INPUT DATA FOR INJECTION
function testInputData($data){
    $data = strip_tags(trim($data));
//trim extra space, tab, newline from the user input data
    $data = stripslashes($data);
//Remove backslashes () from the user input data
    $data = htmlspecialchars($data);                    
//data would be saved as HTML escaped code, so safe to display
    $data = preg_replace("([rn])", "", $data);        
//removes newlines
    $data = cleanString(strtolower($data));             
//removing unwanted strings
    return $data;
}
//Returns empty if encounters any unwanted characters in $inputString
function cleanString($inputString){
    $unwantedChars = array("content-type", "bcc:", "to:", "cc:", "href", "https");
    return str_replace($unwantedChars, "", $inputString);
}
 
//_POST VALUES
$name = testInputData($_POST["name"]);
$visitorEmail = testInputData($_POST["email"]);
$message = testInputData($_POST["message"]);
 
$errors = '';
//EMPTY SPACE VALIDATION
if(empty($name) || empty($visitorEmail) || empty($message)){
    $errors .= "n All fields are required.";
}
 
//NAME VALIDATION
$string_exp = "/^[A-Za-z0-9 .'-]+$/";
if (!preg_match($string_exp, $name)) {
    $errors .= "n The Name you entered does not appear to be valid.";
}
 
//EMAIL REGEX VALIDATION
$email_exp = "/^[A-Za-z0-9._%-][email protected][A-Za-z0-9.-]+.[A-Za-z]{2,4}$/";
$email_exp2 = "/^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,3})$/i";
if (!preg_match($email_exp2, $visitorEmail)){
    $errors .= "n Invalid email address.";
}
 
//PHPMailer Object
$mail = new PHPMailer(true);                                                        //Argument true in constructor enables exceptions
 
//SERVER SETTINGS
$mail->isSMTP();
//Send using SMTP
$mail->SMTPDebug  = 0;
//0 = off(for production use)/1 = client messages/2 = client and server messages
$mail->Host       = 'smtp.gmail.com';                       
//Set the SMTP server to send through
//$mail->Host = gethostbyname('smtp.gmail.com');              
//if your network does not support SMTP over IPv6
$mail->SMTPSecure = 'tls';                                  
// ssl is deprecated
$mail->SMTPAuth   = true;                                   
//Enable SMTP authentication
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;         
//Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port       = 587;                                    
//TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above
$mail->SMTPOptions = array(
    'ssl' => array(
    'verify_peer' => false,
    'verify_peer_name' => false,
    'allow_self_signed' => true
    )
);
 
//AUTHENTIFICATION
$mail->Username   = '[email protected]';     //SMTP username
$mail->Password   = 'websiteGmailAccountPassword';           //SMTP password
 
//RECIPIENTS
$mail->setFrom('[email protected]', 'Tibor Kopca Portfolio');        
//From email and name
$mail->addAddress("[email protected]", "Recipient : Tibor Kopca");           
//To address and name
$mail->addReplyTo($visitorEmail, "Reply to " . $name );                          
//Address to which recipient will reply
 
//CC and BCC
//$mail->addCC("[email protected]");
$mail->addCC($visitorEmail, $name);                      
//carbon copy to visitor email address
$mail->addBCC('[email protected]');
 
//CONTENT
$mail->isHTML(false);                                                              
//Send HTML or Plain Text email
$mail->Subject = "New Form Contact From " . $name . " @ Your Portfolio Website!";
$mail->AltBody = "This is the plain text version of the email content";    
// If html emails is not supported by the receiver, show this body
$mail->msgHTML("<h2>Thank you for the message. We will contact you shortly.</h2> <br>" .
                "<h3>User name: " . $name . " <br>" .
                "User email: " . $visitorEmail . "<br>" .
                "User message: " . $message . "<h3>" );
 
//ERROR HANDLING AND SEND MAIL
if ($errors) {
//error messages exists - the message shouldnt be send
    echo "Mailer Error: " . $errors;
}else{
    try {
        $mail->send();
        ?>
        <script language="javascript" type="text/javascript">
            alert('Thank you for the message. We will contact you shortly.');
            window.location.href = './index.php?action=message_sent#contact';
        </script>
        <?php
    } catch (Exception $e) {
        echo "Message could not be sent. Mailer Error: " . $mail->ErrorInfo; //can return error messages in 43 different languages.
        ?>
        <script language="javascript" type="text/javascript">
            alert('Message failed. Please, contact me by an alternative way.');
            window.location.href = './index.php?action=message_failed#contact';
            </script>
        <?php
    }
}
?>

Sendmail_PHPMailer_form

Sendmail_PHPMailer_gmail

Nota2: al final modificamos la redirección a nuestro index.html con algún código extra para pasar el contenido que queremos en la URL. De esta forma podemos coger ese contenido en la página a la que vamos a redirigir. Para que esto funcione, cambiamos el nombre de index.html a index.php y añadimos este código donde está el elemento HTML del formulario. Básicamente cuando el mensaje se ejecute con éxito, no aparecerá el formulario sino el mensaje que hemos codificado en su lugar.

<div class="container">
   <?php
   $action = isset($_GET['action']) ? $_GET['action'] : "";
   switch ($action) {
       case "message_sent":
           ?><h3>Thank you for the message, I will respond ASAP.</h3><?php
             break;
     case "message_failed":
           ?><h3>Message failed. Please, contact me by an alternative way.</h3><?php
           break;
        default:
          ?><form class="formular" accept-charset="utf-8" action="sendmailPHPMailer.php" method="POST" enctype="multipart/form-data">
          <input type="text" name="name" placeholder="name" maxlength="40" required>
          <input type="email" name="email" placeholder="email" maxlength="40" required>
          <textarea name="message" id="" maxlength="500" name="message" placeholder="message"></textarea>
          <input type="reset" class="button" value="Clear">
          <input type="submit" class="button" value="Send">
          </form>
   <?php } ?>
</div>

Y este será el resultado cuando todo funcione correctamente.

Sendmail_thankyou

Validación de formularios en JavaScript


Te aconsejamos que también añadas validación de formularios en el frontend, ya que en este artículo no mostramos ninguna. Si quieres saber cómo se puede hacer, que cubrimos en nuestro otro artículo.


Conclusión


¡Y eso es todo! Hemos cubierto la función mail() incorporada en PHP y la librería PHPMailer como alternativa.
Para este tema hay mucho más que aprender pero esperamos que en este tutorial hayamos proporcionado los fundamentos del envío de correos electrónicos desde el formulario de su sitio web.
La próxima vez escribiremos sobre cómo implementar Whatsapp messenger a nuestro sitio web, así que mantente atento.


Imagen principal por M. H. de Pixabay,
Imágenes y edición por Tibor Kopca

 
by Tibor Kopca Date: 10-05-2021 php javascript desarollo web sendmail phpmailer visitas : 3363  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Artículos relacionados

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

6 Formas de leer archivos en PHP, con strings, array y más

Bienvenido a un tutorial sobre cómo leer archivos en PHP. Sí, así es, ¿qué tan difícil puede ser leer archivos en PHP? Se sorprenderá... No es tan sencillo como algunos…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Instalar Laravel Homestead en Windows 10

Instalar Homestead Mediante Vagrant Laravel Homestead es una máquina virtual que viene ya preparada para el desarrollo de proyectos con Laravel y otras tecnologías de PHP . Al ser una máquina…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración