Coletando Informações do Cliente

Todo agendamento precisa de dados de contato. O nome e o e-mail do cliente são essenciais — precisamos saber quem está agendando e como entrar em contato. Vamos construir esses campos corretamente com rótulos, placeholders e validação básica do navegador.

O Que Você Vai Aprender

Criar campos de formulário com rótulos
Adicionar texto de placeholder para orientação
Usar atributos de validação do HTML5
Estruturar marcação de formulário acessível

Começando com o Campo de Nome

Um campo de formulário adequado precisa de mais do que apenas um input. Ele precisa de um rótulo:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
</script>

<form>
  <div class="field">
    <label for="customer-name">Your Name</label>
    <input 
      type="text" 
      id="customer-name"
      bind:value={customerName}
      placeholder="Jane Smith"
      required
    />
  </div>
</form>

Elementos-chave:

<label for="..."> conecta-se ao <input id="...">
placeholder exibe texto de exemplo quando vazio
required impede o envio sem um valor preenchido

Adicionando o Campo de E-mail

Inputs de e-mail recebem tratamento especial nos navegadores:

<script>
  let customerName = $state('');
  let customerEmail = $state('');
</script>

<form>
  <div class="field">
    <label for="customer-name">Your Name</label>
    <input 
      type="text" 
      id="customer-name"
      bind:value={customerName}
      placeholder="Jane Smith"
      required
    />
  </div>
  
  <div class="field">
    <label for="customer-email">Email Address</label>
    <input 
      type="email" 
      id="customer-email"
      bind:value={customerEmail}
      placeholder="jane@example.com"
      required
    />
  </div>
</form>

Usar type="email" fornece:

Teclados móveis otimizados para entrada de e-mail
Validação de formato integrada (deve conter @)
Preenchimento automático do navegador para endereços de e-mail

Adicionando um Campo de Telefone (Opcional)

Alguns agendamentos se beneficiam de um número de telefone:

<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
</script>

<form>
  <!-- Name and Email fields... -->
  
  <div class="field">
    <label for="customer-phone">Phone Number (optional)</label>
    <input 
      type="tel" 
      id="customer-phone"
      bind:value={customerPhone}
      placeholder="(555) 123-4567"
    />
  </div>
</form>

Observe: sem o atributo required. O texto "(opcional)" informa aos usuários que o campo não é obrigatório.

A Seção de Contato Completa

Aqui está a seção completa de informações de contato:

<!-- filename: src/lib/components/BookingForm.svelte -->
<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
</script>

<form>
  <fieldset>
    <legend>Contact Information</legend>
    
    <div class="field">
      <label for="customer-name">Your Name</label>
      <input 
        type="text" 
        id="customer-name"
        name="customerName"
        bind:value={customerName}
        placeholder="Jane Smith"
        required
        autocomplete="name"
      />
    </div>
    
    <div class="field">
      <label for="customer-email">Email Address</label>
      <input 
        type="email" 
        id="customer-email"
        name="customerEmail"
        bind:value={customerEmail}
        placeholder="jane@example.com"
        required
        autocomplete="email"
      />
    </div>
    
    <div class="field">
      <label for="customer-phone">Phone Number (optional)</label>
      <input 
        type="tel" 
        id="customer-phone"
        name="customerPhone"
        bind:value={customerPhone}
        placeholder="(555) 123-4567"
        autocomplete="tel"
      />
    </div>
  </fieldset>
</form>

<style>
  fieldset {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  legend {
    font-weight: 600;
    padding: 0 0.5rem;
  }
  
  .field {
    margin-bottom: 1rem;
  }
  
  .field:last-child {
    margin-bottom: 0;
  }
  
  label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
  }
  
  input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
  }
  
  input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }
</style>

Novidades adicionadas:

<fieldset> e <legend> agrupam campos relacionados
Atributos name para envio do formulário
Dicas de autocomplete ajudam os navegadores a preencher formulários mais rapidamente

Pré-visualizando os Dados Inseridos

Mostre aos usuários o que eles digitaram:

<script>
  let customerName = $state('');
  let customerEmail = $state('');
  let customerPhone = $state('');
  
  let hasContactInfo = $derived(customerName || customerEmail);
</script>

<!-- Form fields... -->

{#if hasContactInfo}
  <div class="preview">
    <h3>Contact Details</h3>
    {#if customerName}
      <p><strong>Name:</strong> {customerName}</p>
    {/if}
    {#if customerEmail}
      <p><strong>Email:</strong> {customerEmail}</p>
    {/if}
    {#if customerPhone}
      <p><strong>Phone:</strong> {customerPhone}</p>
    {/if}
  </div>
{/if}

A pré-visualização só aparece quando o usuário começa a inserir dados.

Acessibilidade é Importante

Nosso formulário é acessível porque:

Os rótulos estão conectados aos inputs via for/id — clicar no rótulo foca o input
Os campos obrigatórios estão marcados — leitores de tela anunciam "obrigatório"
O fieldset agrupa conteúdo relacionado — fornece contexto para usuários de leitores de tela
Os tipos de input são semânticos — email e tel transmitem significado

Erros Comuns

Conexão de Rótulo Ausente

<!-- ❌ Label not connected to input -->
<label>Email</label>
<input type="email" bind:value={email} />

<!-- ✅ Connected via for/id -->
<label for="email">Email</label>
<input type="email" id="email" bind:value={email} />

<!-- ✅ Or wrap input in label -->
<label>
  Email
  <input type="email" bind:value={email} />
</label>

Placeholder como Rótulo

<!-- ❌ Placeholder disappears when typing -->
<input type="text" placeholder="Your Name" />

<!-- ✅ Always have a visible label -->
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="Jane Smith" />

Placeholders são dicas, não rótulos.

Resumo

Os campos de contato do cliente precisam de rótulos, tipos de input adequados e atributos de acessibilidade. Use bind:value para manter o estado sincronizado, e agrupe campos relacionados com <fieldset>.

Principais conclusões:

Conecte rótulos aos inputs com for/id
Use tipos de input semânticos (email, tel)
Adicione required para campos obrigatórios
Inclua autocomplete para melhor experiência do usuário

Próximos Passos

Os dados de contato estão cobertos. Continue com Seletor de Data para permitir que os clientes escolham quando desejam o seu serviço.