<form id="mentoria-form"

action="https://formspree.io/f/TU_ENDPOINT_AQUI"

method="POST"

enctype="multipart/form-data"

accept-charset="UTF-8"

novalidate

style="max-width:720px;margin:0 auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;">

<h1 style="margin:0 0 8px;font-size:1.6rem;">Preparación de tu Sesión de Mentoría – mAYO en YouTube</h1>

Gracias por reservar tu sesión 🙌 Completa este formulario para adaptar la mentoría a tus objetivos.<br>

<strong>Duración:</strong> 60 min · <strong>Formato:</strong> Zoom · <strong>Idiomas:</strong> Español / Inglés / Alemán / Italiano

</p>

</header>

<legend style="font-weight:600;margin-bottom:12px;">Datos básicos</legend>

<label for="nombre" style="display:block;margin:12px 0 6px;">Nombre completo *</label>

<input id="nombre" name="nombre" type="text" required

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<label for="email" style="display:block;margin:12px 0 6px;">Email de contacto *</label>

<input id="email" name="email" type="email" inputmode="email" autocomplete="email" required

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<label for="ciudad" style="display:block;margin:12px 0 6px;">País / Ciudad (zona horaria) *</label>

<input id="ciudad" name="pais_ciudad" type="text" required placeholder="Ej.: España, Madrid (CET)"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<label for="idioma" style="display:block;margin:12px 0 6px;">Idioma preferido para la sesión *</label>

<select id="idioma" name="idioma" required

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<option value="" disabled selected>Selecciona un idioma</option>

<option value="es">🇪🇸 Español</option>

<option value="en">🇬🇧 Inglés</option>

<option value="de">🇩🇪 Alemán</option>

<option value="it">🇮🇹 Italiano</option>

</select>

</fieldset>

<legend style="font-weight:600;margin-bottom:12px;">Tu perfil</legend>

<label style="display:block;margin:12px 0 6px;">¿Cuál describe mejor tu situación actual? *</label>

<input type="radio" name="situacion" value="principiante" required> Principiante (foto o video)

</label>

<input type="radio" name="situacion" value="amateur"> Aficionado / Amateur

</label>

<input type="radio" name="situacion" value="pro_inicio"> Profesional que está comenzando

</label>

<input type="radio" name="situacion" value="artista"> Artista / Creador independiente (no freelance comercial)

</label>

</div>

<label for="ocupacion" style="display:block;margin:12px 0 6px;">¿A qué te dedicas actualmente? *</label>

<input id="ocupacion" name="ocupacion" type="text" required placeholder="Ej.: estudiante, fotógrafo freelance, editor de video…"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<label for="links" style="display:block;margin:12px 0 6px;">Enlaces a tu portafolio o redes (Web, IG, YouTube, Behance…)</label>

<textarea id="links" name="links" rows="3" placeholder="Pega 1–3 enlaces relevantes"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;"></textarea>

<label for="archivos" style="display:block;margin:12px 0 6px;">Sube 1–3 piezas clave (PDF/Imágenes) — opcional</label>

<input id="archivos" name="archivos" type="file" multiple

accept=".pdf,.jpg,.jpeg,.png"

style="display:block;padding:6px 0;">

<small style="color:#666;">Hasta 100 MB total · formatos: pdf, jpg, png</small>

</fieldset>

<legend style="font-weight:600;margin-bottom:12px;">Sobre tu trabajo</legend>

<label style="display:block;margin:12px 0 6px;">¿Qué tipo de trabajo haces o te interesa más? * (puedes marcar varias)</label>

<input type="checkbox" name="interes[]" value="retrato_moda"> Retrato / Moda

</label>

<input type="checkbox" name="interes[]" value="documental"> Documental / Reportaje

</label>

<input type="checkbox" name="interes[]" value="comercial"> Comercial / Publicitario

</label>

<input type="checkbox" name="interes[]" value="video_creativo"> Video creativo / Cortos

</label>

<input type="checkbox" name="interes[]" value="naturaleza_paisaje"> Naturaleza / Paisaje

</label>

<input type="checkbox" name="interes[]" value="otro"> Otro

</label>

</div>

<label style="display:block;margin:12px 0 6px;">¿Qué te gustaría mejorar en la sesión? * (puedes marcar varias)</label>

<input type="checkbox" name="mejorar[]" value="presentacion_portafolio" required> Presentación del portafolio

</label>

<input type="checkbox" name="mejorar[]" value="coherencia_estilo"> Coherencia visual / Estilo

</label>

<input type="checkbox" name="mejorar[]" value="branding_posicionamiento"> Branding personal / Posicionamiento

</label>

<input type="checkbox" name="mejorar[]" value="feedback_tecnico"> Feedback técnico (foto/video)

</label>

<input type="checkbox" name="mejorar[]" value="flujo_trabajo"> Flujo de trabajo / Organización

</label>

<input type="checkbox" name="mejorar[]" value="proyectos_personales"> Llevar mis proyectos personales al siguiente nivel

</label>

<input type="checkbox" name="mejorar[]" value="desarrollarme_artista"> Desarrollarme como artista

</label>

<input type="checkbox" name="mejorar[]" value="otro"> Otro

</label>

</div>

<label for="objetivo" style="display:block;margin:12px 0 6px;">Cuéntame brevemente tu objetivo principal *</label>

<textarea id="objetivo" name="objetivo" rows="3" required

placeholder="Sé concreto: reordenar portafolio para X; definir estilo para Y; preparar presentación para Z…"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;"></textarea>

</fieldset>

<legend style="font-weight:600;margin-bottom:12px;">Logística</legend>

<label for="disponibilidad" style="display:block;margin:12px 0 6px;">Disponibilidad preferida (día y hora) *</label>

<textarea id="disponibilidad" name="disponibilidad" rows="2" required

placeholder="Indica 2–3 opciones y tu zona horaria"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;"></textarea>

<label for="deadline" style="display:block;margin:12px 0 6px;">Deadline o fecha importante (si aplica)</label>

<input id="deadline" name="deadline" type="text" placeholder="Ej.: Presentación el 15/11"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<label for="referencia" style="display:block;margin:12px 0 6px;">¿Cómo conociste este servicio?</label>

<select id="referencia" name="referencia"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;">

<option value="" selected>Selecciona una opción</option>

<option value="youtube">YouTube</option>

<option value="instagram">Instagram</option>

<option value="blog">Blog mayoenyoutube.com</option>

<option value="recomendacion">Recomendación</option>

</select>

</fieldset>

<legend style="font-weight:600;margin-bottom:12px;">Permisos y confirmación</legend>

Confirmo que la información proporcionada se usará para preparar mi sesión y acepto recibir comunicaciones relacionadas (confirmación, enlace de Zoom, material posterior). *

</label>

Quiero recibir un recordatorio por email 24 h antes.

</label>

<label for="notas" style="display:block;margin:12px 0 6px;">Notas finales para Michael (opcional)</label>

<textarea id="notas" name="notas" rows="3"

style="width:100%;padding:10px;border:1px solid #ccc;border-radius:8px;"></textarea>

</fieldset>

<button type="submit"

style="display:inline-block;padding:12px 18px;border:0;border-radius:10px;background:#111;color:#fff;font-weight:600;cursor:pointer;">

Reservar y enviar formulario

</button>

</form>

// Validación suave + envío Fetch (para endpoints tipo Formspree)

const form = document.getElementById('mentoria-form');

const statusEl = document.getElementById('form-status');

form.addEventListener('submit', async (e) => {

// Si tu backend necesita el submit normal, comenta este bloque JS.

e.preventDefault();

statusEl.textContent = 'Enviando…';

const formData = new FormData(form);

try {

const res = await fetch(form.action, {

method: 'POST',

body: formData

});

if (res.ok) {

statusEl.textContent = '¡Gracias! He recibido tus datos. En breve te contacto por email con el enlace de Zoom.';

form.reset();

// Si usas _redirect, puedes hacer: window.location.href = 'https://mayoenyoutube.com/gracias';

} else {

statusEl.style.color = '#b00020';

statusEl.textContent = 'Hubo un problema al enviar el formulario. Por favor, inténtalo de nuevo.';

}

} catch (err) {

statusEl.style.color = '#b00020';

statusEl.textContent = 'Error de conexión. Comprueba tu red e inténtalo otra vez.';

}

});

</script>