Crear una Página Personal

instrucciones claras, ordenadas y completas para crear una página personal, totalmente responsive, con menú superior, menú lateral, pie de página, banner de cookies, formulario de contacto, logo y selector de modo oscuro.

Abrir Página Personal

1) Crea la estructura básica del proyecto

Crea una carpeta para tu web:

Código

tu-sitio.com/
│
└── index.html

El archivo index.html será tu página principal.

2) Añade la estructura HTML base

Tu página debe comenzar con:

html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>franciscojaviergonzalezgarcia.com</title>
</head>
<body>
</body>
</html>

Esto garantiza:

compatibilidad móvil
codificación correcta
título de la web

3) Crea el header con logo y menú de navegación

Dentro del <body> añade:

html

<header>
    <div class="logo">
        <img src="logo.png" alt="Logo">
        <strong>franciscojaviergonzalezgarcia.com</strong>
    </div>

    <nav class="main-nav">
        <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#proyectos">Proyectos</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>
    </nav>

    <button id="darkToggle">Modo oscuro</button>
</header>

Este bloque incluye:

logo
menú superior
botón de modo oscuro

4) Crea el menú lateral

Debajo del header:

html

<aside>
    <h2>Menú lateral</h2>
    <ul>
        <li><a href="#sobre-mi">Sobre mí</a></li>
        <li><a href="#articulos">Artículos</a></li>
        <li><a href="#recursos">Recursos</a></li>
    </ul>
</aside>

5) Crea el contenido principal

html

<main>
    <section id="inicio">
        <h1>Bienvenido</h1>
        <p>Contenido principal de la página.</p>
    </section>

    <section id="contacto">
        <h2>Formulario de contacto</h2>
        <form>
            <label>Nombre</label>
            <input type="text">

            <label>Email</label>
            <input type="email">

            <label>Mensaje</label>
            <textarea></textarea>

            <button>Enviar</button>
        </form>
    </section>
</main>

6) Crea el pie de página

html

<footer>
    <nav>
        <ul>
            <li><a href="#aviso-legal">Aviso legal</a></li>
            <li><a href="#privacidad">Privacidad</a></li>
            <li><a href="#cookies">Cookies</a></li>
        </ul>
    </nav>
    <div>&copy; 2026 franciscojaviergonzalezgarcia.com</div>
</footer>

7) Añade el banner de cookies

html

<div class="cookie-banner" id="cookieBanner">
    <p>Usamos cookies para mejorar la experiencia.</p>
    <button id="cookieAccept">Aceptar</button>
    <button id="cookieDecline">Rechazar</button>
</div>

8) Añade el modo oscuro con JavaScript

html

<script>
const toggle = document.getElementById('darkToggle');
toggle.addEventListener('click', () => {
    document.body.classList.toggle('dark');
});
</script>

9) Añade el CSS responsive

En el <head> añade:

html

<style>
body {
    font-family: Arial;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}
:root {
    --bg: #f5f5f5;
    --text: #222;
}
body.dark {
    --bg: #111;
    --text: #eee;
}
header, footer, aside, main {
    padding: 20px;
}
@media (max-width: 768px) {
    aside {
        width: 100%;
    }
}
</style>

10) Haz la página responsive

La clave es:

usar flex
usar @media
usar variables CSS
evitar medidas fijas

11) Prueba la página en móvil

Abre Chrome → F12 → Modo móvil.

Comprueba:

menú superior
menú lateral
pie de página
banner de cookies
formulario
modo oscuro

Qué necesita el Formulario de Contacto para funcionar.

Un formulario de contacto en HTML como el que tienes ahora no funciona por sí solo. HTML solo muestra los campos. Para que envíe mensajes, guarde datos, o te llegue un correo, necesita un sistema adicional.

Aquí tienes todo lo que necesita, explicado de forma clara y ordenada.

1) Un backend (servidor) que procese el formulario

El formulario envía datos, pero alguien debe recibirlos y procesarlos.

Opciones típicas:

PHP → lo más común en hostings como el tuyo
Node.js → si usas JavaScript en servidor
Python Flask → si prefieres Python
Servicios externos como Formspree o Netlify Forms

Si tu hosting es estándar (OVH, Ionos, Raiola, etc.), lo más fácil es PHP.

2) Un método de envío

El formulario necesita un atributo:

html

<form action="procesar.php" method="POST">

action → archivo que recibe los datos
method="POST" → forma segura de enviar información

Sin esto, el formulario no hace nada.

3) Validación de datos

Para evitar errores y spam:

Validación en HTML (required, type=email)
Validación en JavaScript (opcional)
Validación en servidor (obligatoria)

Ejemplo de validación HTML:

html

<input type="email" name="email" required>

4) Un sistema para enviar el correo

Si quieres que el formulario te envíe un email, necesitas:

mail() en PHP
o SMTP (más fiable)
o un servicio externo (SendGrid, Mailgun)

Ejemplo básico en PHP:

php

mail("tuemail@dominio.com", "Nuevo mensaje", $mensaje);

5) Protección contra spam

Muy importante hoy en día:

Honeypot (campo invisible)
Limitación de envíos
ReCAPTCHA v3 si quieres máxima seguridad

Si quieres, te explico cómo añadir un honeypot invisible, que no molesta al usuario.

6) Mensaje de confirmación para el usuario

Después de enviar, el usuario debe ver:

“Mensaje enviado correctamente”
o “Hubo un error, inténtalo más tarde”

Esto se hace en el archivo del servidor (PHP, Node, etc.).

7) Seguridad básica

Para evitar problemas:

Sanitizar los datos (evitar código malicioso)
Limitar tamaño de mensajes
Evitar que el formulario se use para enviar spam a terceros

8) Opcional: Guardar los mensajes en un archivo o base de datos

Si quieres conservar los mensajes:

Archivo .txt
Base de datos MySQL
Google Sheets (con API)
Firebase

Resumen rápido (lo esencial)

Tu formulario necesita:

Un archivo en servidor que reciba los datos
Un método POST
Validación
Sistema de envío de correo
Protección contra spam
Mensaje de confirmación

Sin esto, el formulario solo muestra campos, pero no envía nada.

FRANCISCO, aquí tienes el archivo PHP exacto, limpio, seguro y funcional para que tu formulario de contacto HTML envíe correos desde tu hosting. Este archivo está pensado para funcionar en cualquier hosting típico (Raiola, Ionos, OVH, Hostinger, etc.) que soporte PHP.

Va acompañado de instrucciones claras para que lo conectes sin fallos.

Archivo: `procesar.php`

Crea un archivo llamado procesar.php en la misma carpeta donde tengas tu index.html.

Pega este contenido:

php

<?php
// CONFIGURACIÓN
$destinatario = "tuemail@franciscojaviergonzalezgarcia.com"; // Cambia esto
$asunto = "Nuevo mensaje desde el formulario de contacto";

// COMPROBAR QUE VIENE POR POST
if ($_SERVER["REQUEST_METHOD"] !== "POST") {
    exit("Acceso no permitido");
}

// RECOGER DATOS
$nombre  = trim($_POST["nombre"] ?? "");
$email   = trim($_POST["email"] ?? "");
$mensaje = trim($_POST["mensaje"] ?? "");

// VALIDACIÓN BÁSICA
if ($nombre === "" || $email === "" || $mensaje === "") {
    exit("Todos los campos son obligatorios.");
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    exit("El correo electrónico no es válido.");
}

// PROTECCIÓN ANTI-SPAM (honeypot)
if (!empty($_POST["robot"])) {
    exit("Spam detectado.");
}

// CONSTRUIR EL MENSAJE
$contenido = "Nombre: $nombre\n";
$contenido .= "Email: $email\n";
$contenido .= "Mensaje:\n$mensaje\n\n";
$contenido .= "Enviado desde franciscojaviergonzalezgarcia.com";

// CABECERAS
$cabeceras = "From: $nombre <$email>\r\n";
$cabeceras .= "Reply-To: $email\r\n";

// ENVIAR
if (mail($destinatario, $asunto, $contenido, $cabeceras)) {
    echo "Mensaje enviado correctamente.";
} else {
    echo "Error al enviar el mensaje.";
}
?>

2) Conectar el formulario HTML con el PHP

En tu formulario HTML, cambia la etiqueta <form> por esta:

html

<form action="procesar.php" method="POST" class="contact-form">

Y añade el campo honeypot invisible:

html

<input type="text" name="robot" style="display:none;">

Tu formulario quedaría así:

html

<form action="procesar.php" method="POST" class="contact-form">
    <input type="text" name="robot" style="display:none;">

    <label for="nombre">Nombre</label>
    <input id="nombre" name="nombre" type="text" required>

    <label for="email">Correo electrónico</label>
    <input id="email" name="email" type="email" required>

    <label for="mensaje">Mensaje</label>
    <textarea id="mensaje" name="mensaje" rows="5" required></textarea>

    <button type="submit">Enviar</button>
</form>

3) Cambia el correo destinatario

En procesar.php, cambia:

php

$destinatario = "tuemail@franciscojaviergonzalezgarcia.com";

Por tu correo real.

4) Sube los archivos al hosting

En tu hosting:

Entra en Administrador de archivos
Ve a /public_html/
Sube:
- index.html
- procesar.php

5) Prueba el formulario

Abre tu web:

Rellena el formulario y envía un mensaje.

Si tu hosting permite mail() (la mayoría sí), te llegará el correo en segundos.

6) Si el correo no llega

Puede ser por:

tu hosting bloquea mail()
tu dominio necesita SPF/DMARC
el correo cae en spam
tu proveedor exige SMTP

1) Crea la estructura básica del proyecto

2) Añade la estructura HTML base

3) Crea el header con logo y menú de navegación

4) Crea el menú lateral

5) Crea el contenido principal

6) Crea el pie de página

7) Añade el banner de cookies

8) Añade el modo oscuro con JavaScript

9) Añade el CSS responsive

10) Haz la página responsive

11) Prueba la página en móvil

Qué necesita el Formulario de Contacto para funcionar.

1) Un backend (servidor) que procese el formulario

2) Un método de envío

3) Validación de datos

4) Un sistema para enviar el correo

5) Protección contra spam

6) Mensaje de confirmación para el usuario

7) Seguridad básica

8) Opcional: Guardar los mensajes en un archivo o base de datos

Resumen rápido (lo esencial)

Archivo: procesar.php

2) Conectar el formulario HTML con el PHP

3) Cambia el correo destinatario

4) Sube los archivos al hosting

5) Prueba el formulario

6) Si el correo no llega

Cookies

Archivo: `procesar.php`