Formularios que Se Sienten Bien al Usar

Un formulario bien estilizado genera confianza y reduce la fricción. Los usuarios deben saber exactamente qué hacer, ver retroalimentación clara y sentirse seguros al enviarlo. Transformemos el formulario de reservas de funcional a hermoso.

Qué Aprenderás

Estilizar inputs de formulario de manera consistente
Crear una jerarquía visual clara
Diseñar layouts de formulario accesibles
Agregar retroalimentación visual para distintos estados

Estructura del Formulario

Comienza con una estructura HTML limpia:

<!-- filename: src/lib/components/BookingForm.svelte -->
<form class="booking-form">
  <div class="form-section">
    <h2 class="section-title">Contact Information</h2>
    
    <div class="form-row">
      <div class="form-field">
        <label for="name">Your Name</label>
        <input type="text" id="name" bind:value={customerName} required />
      </div>
      
      <div class="form-field">
        <label for="email">Email Address</label>
        <input type="email" id="email" bind:value={customerEmail} required />
      </div>
    </div>
  </div>
  
  <div class="form-section">
    <h2 class="section-title">Appointment Details</h2>
    <!-- More fields... -->
  </div>
  
  <button type="submit" class="submit-btn">Request Booking</button>
</form>

Estilos Base del Formulario

Configura el contenedor del formulario:

.booking-form {
  max-width: 640px;
  margin: 0 auto;
}

.form-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
}

Esto crea secciones visuales claras con una separación sutil.

Estilizado de Inputs

Haz que los inputs se sientan de alta calidad:

.form-field {
  margin-bottom: 1.25rem;
}

.form-field:last-child {
  margin-bottom: 0;
}

.form-field label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

Detalles clave:

Padding generoso para un toque cómodo
Borde sutil que es visible pero no agresivo
Anillo de foco azul para una indicación clara
Transiciones suaves para un acabado pulido

Estilizado de Placeholders

Guía a los usuarios sin generar desorden:

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9ca3af;
}

/* Required field indicator */
.form-field label .required {
  color: #ef4444;
  margin-left: 0.25rem;
}

<label for="name">
  Your Name <span class="required">*</span>
</label>

Layout de Dos Columnas

Para campos relacionados como nombre/correo electrónico:

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Stack on mobile */
@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

Estilizado del Select Desplegable

Los selects requieren atención extra:

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-field select:disabled {
  background-color: #f9fafb;
  cursor: not-allowed;
  color: #9ca3af;
}

La flecha personalizada reemplaza el estilo predeterminado del navegador.

Estilizado del Textarea

.form-field textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}

Grupo de Radio Buttons

Para la selección de servicios:

.service-options {
  display: grid;
  gap: 0.75rem;
}

.service-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.service-option:hover {
  background: #f3f4f6;
}

.service-option.selected {
  background: #eff6ff;
  border-color: #3b82f6;
}

.service-option input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  accent-color: #3b82f6;
}

.service-option .service-info {
  flex: 1;
}

.service-option .service-name {
  font-weight: 600;
  color: #1f2937;
}

.service-option .service-price {
  color: #3b82f6;
  font-weight: 600;
}

{#each services as service (service.id)}
  <label class="service-option" class:selected={selectedService === service.slug}>
    <input 
      type="radio" 
      name="service" 
      value={service.slug}
      bind:group={selectedService}
    />
    <div class="service-info">
      <span class="service-name">{service.name}</span>
      <span class="service-price">${service.price}</span>
    </div>
  </label>
{/each}

Estilizado de Checkboxes

Para complementos y términos:

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.checkbox-field input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
  accent-color: #3b82f6;
  cursor: pointer;
}

.checkbox-field label {
  cursor: pointer;
  color: #4b5563;
  line-height: 1.5;
}

Botón de Envío

Haz que se destaque:

.submit-btn {
  display: block;
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: white;
  background: #3b82f6;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}

.submit-btn:hover {
  background: #2563eb;
}

.submit-btn:active {
  transform: scale(0.98);
}

.submit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

Estados de Error

Muestra los errores de validación de manera clara:

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: #ef4444;
  background: #fef2f2;
}

.form-field.has-error input:focus,
.form-field.has-error select:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.error-message {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #ef4444;
}

<div class="form-field" class:has-error={emailError}>
  <label for="email">Email Address</label>
  <input type="email" id="email" bind:value={customerEmail} />
  {#if emailError}
    <span class="error-message">{emailError}</span>
  {/if}
</div>

Los Estilos Completos del Formulario

<!-- filename: src/lib/components/BookingForm.svelte -->
<style>
  .booking-form {
    max-width: 640px;
    margin: 0 auto;
  }

  .form-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  @media (max-width: 640px) {
    .form-row {
      grid-template-columns: 1fr;
    }
  }

  .form-field {
    margin-bottom: 1.25rem;
  }

  .form-field:last-child {
    margin-bottom: 0;
  }

  .form-field label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1f2937;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .form-field.has-error input {
    border-color: #ef4444;
    background: #fef2f2;
  }

  .error-message {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #ef4444;
  }

  .submit-btn {
    display: block;
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
  }

  .submit-btn:hover {
    background: #2563eb;
  }

  .submit-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
  }
</style>

Resumen

Un formulario bien estilizado guía a los usuarios durante el proceso de completado. Usa espaciado consistente, estados de foco claros y mensajes de error útiles. La jerarquía visual debe hacer que la siguiente acción sea obvia.

Puntos clave:

El estilizado consistente de los campos genera confianza
Los estados de foco muestran dónde están los usuarios
Los estados de error proporcionan retroalimentación clara
Los objetivos táctiles grandes mejoran la usabilidad

Próximos pasos

Los formularios responden a las acciones del usuario. Continúa con Agregar estados hover para que las interacciones se sientan receptivas y refinadas.