Formulários que São Agradáveis de Usar

Um formulário bem estilizado gera confiança e reduz o atrito. Os usuários devem saber exatamente o que fazer, ver feedbacks claros e sentir-se seguros ao enviar. Vamos transformar o formulário de reserva de funcional para bonito.

O Que Você Vai Aprender

Estilizar inputs de formulário de forma consistente
Criar hierarquia visual clara
Projetar layouts de formulário acessíveis
Adicionar feedback visual para estados

Estrutura do Formulário

Comece com uma estrutura HTML limpa:

<!-- 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 do Formulário

Configure o contêiner do formulário:

.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;
}

Isso cria seções visuais claras com separação sutil.

Estilização de Inputs

Faça os inputs parecerem premium:

.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);
}

Detalhes importantes:

Padding generoso para toque confortável
Borda sutil que é visível, mas não agressiva
Anel de foco azul para indicação clara
Transições suaves para sofisticação

Estilização de Placeholder

Oriente os usuários sem poluição visual:

.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 em Duas Colunas

Para campos relacionados como nome/e-mail:

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

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

Selects precisam de atenção 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;
}

A seta personalizada substitui o estilo padrão do navegador.

Estilização de Textarea

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

Grupo de Radio Button

Para seleção de serviço:

.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}

Estilização de Checkbox

Para complementos e termos:

.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ão de Envio

Faça-o se destacar:

.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 Erro

Exiba erros de validação claramente:

.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>

Os Estilos Completos do Formulário

<!-- 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>

Resumo

Um formulário bem estilizado guia os usuários até a conclusão. Use espaçamento consistente, estados de foco claros e mensagens de erro úteis. A hierarquia visual deve tornar a próxima ação óbvia.

Principais conclusões:

Estilização consistente de inputs gera confiança
Estados de foco mostram onde os usuários estão
Estados de erro fornecem feedback claro
Alvos de toque grandes melhoram a usabilidade

Próximos Passos

Os formulários respondem às ações dos usuários. Continue com Adicionar Estados de Hover para tornar as interações responsivas e refinadas.