Search-Form/index.html at main · italosouzatech/Search-Form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>Formulário de Pesquisa</title>
      <link rel="stylesheet" href="styles.css">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Formulário de pesquisa para a HavenTech.">
      <meta property="og:title" content="Formulário de Pesquisa HavenTech">
      <meta property="og:type" content="website">
  </head>

  <body>

  <!--Cabeçalho do formulário de pesquisa-->
    <header>
      <h1 id="title">HavenTech</h1>
      <h2 id="description">Formulário de Pesquisa HavenTech</h2>
      <p>Obrigado por dedicar seu tempo para nos ajudar a melhorar nossos serviços!</p>
    </header>

  <!--Formulário de pesquisa-->
    <form id="survey-form" action="https://formspree.io/f/xqarnnpz" method="POST">
  <!--fieldset one-->
    <fieldset>
      <legend>Como ficou sabendo da HavenTech?</legend>
        <label for="dropdown">Fonte:
          <select id="dropdown" name="source" required>
            <option value="1" id="one">Selecione</option>
            <option value="2" id="two">Google</option>
            <option value="3" id="three">Instagram</option>
            <option value="4" id="four">Fóruns de tecnologia</option>
            <option value="5" id="five">Outros</option>
          </select>
        </label>
    </fieldset>

  <!--fieldset two-->
    <fieldset>
      <legend>Dados Pessoais</legend>
  <!--Nome-->
        <label for="your-name">Nome:</label>
          <input name="your-name" id="your-name" type="text"
          placeholder="José..." required>
  <!--Email-->
        <label for="email">Email:</label>
          <input name="email-label" id="email" type="email"
          placeholder="[email protected]" minlength="6" maxlength="36" required>
  <!--Telefone-->
        <label for="telefone">Telefone:</label>
          <input name="tel" id="telefone" type="tel"
          placeholder="11999999999" inputmode="numeric" pattern="[0-9]{10,11}" required>
  <!--Idade-->
        <label for="idade">Idade:</label>
          <input name="idade" id="idade" type="number"
          placeholder="25" min="1" max="120" required>
    </fieldset>

  <!--fieldset three-->
    <fieldset>
      <legend>Você recomendaria a HavenTech?</legend>
  <!--Definitivamente-->
        <label for="definitivamente"></label>
          <input name="recom" id="definitivamente" type="radio" value="dftv" class="inline">Definitivamente
  <!--Talvez-->
        <label for="talvez"></label>
          <input name="recom" id="talvez" type="radio" value="tlz" class="inline">Talvez
  <!--Nunca-->
        <label for="nunca"></label>
          <input name="recom" id="nunca" type="radio" value="nca" class="inline">Nunca
    </fieldset>

  <!--fieldset four-->
    <fieldset>
      <legend>Avaliação</legend>
        <div class="rating">
  <!--1 estrela-->
        <label>
          <input name="estrelas" type="radio" value="1" class="inline">⭐
        </label>
  <!--2 estrelas-->
        <label>
          <input name="estrelas" type="radio" value="2" class="inline">⭐⭐
        </label>
  <!--3 estrelas-->
        <label>
          <input name="estrelas" type="radio" value="3" class="inline">⭐⭐⭐
        </label>
  <!--4 estrelas-->
        <label>
          <input name="estrelas" type="radio" value="4" class="inline">⭐⭐⭐⭐
        </label>
  <!--5 estrelas-->
        <label>
          <input name="estrelas" type="radio" value="5" class="inline">⭐⭐⭐⭐⭐
        </label>
        </div>
    </fieldset>

  <!--fieldset five-->
    <fieldset>
      <legend>Feedback</legend>
        <label for="sugestões">Sugestões</label>
        <textarea name="sugestões" id="sugestões" rows="12" cols="12" placeholder="Simplesmente excelente..." ></textarea>
    </fieldset>

  <!--submit button-->
        <input id="submit" type="submit" value="Enviar Formulário">

    </form>
    <!--Rodapé-->
    <footer>
      <h3>Contato HavenTech</h3>
      <p>Email:<a href="mailto:[email protected]">[email protected]</a></p>
      <p>© 2025 HavenTech. Todos os direitos reservados.</p>
    </footer>
  </body>
</html>