-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (125 loc) · 4.26 KB
/
index.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Titillium+Web:wght@700&display=swap"
rel="stylesheet"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fórmulario Multi Step</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main id="app">
<form>
<div class="step-progress">
<strong class="active" data-step>Contato</strong>
<img src="assets/arrow-right.svg" alt="" />
<strong data-step>Empresa</strong>
<img src="assets/arrow-right.svg" alt="" />
<strong data-step>Projeto</strong>
</div>
<div class="form-step active">
<div class="content">
<div class="input-wrapper">
<label for="name">Nome</label>
<input
id="name"
name="name"
type="text"
placeholder="Como prefere ser chamado"
required
/>
</div>
<div class="input-wrapper">
<label for="phone">Telefone</label>
<input
id="phone"
name="phone"
type="text"
placeholder="Digite seu número de WhatsApp"
onkeypress="return /\d/.test(event.key)"
/>
</div>
<div class="input-wrapper">
<label for="email">E-mail</label>
<input
id="email"
name="email"
type="email"
placeholder="Digite seu e-mail"
required
/>
</div>
</div>
<div class="button-wrapper justify-end">
<button type="button" class="btn primary" data-action="next">
Continuar
</button>
</div>
</div>
<div class="form-step hide">
<div class="content">
<div class="input-wrapper">
<label for="business-name">Nome da empresa</label>
<input
name="business-name"
id="business-name"
type="text"
placeholder="Qual é o nome da empresa"
/>
</div>
<div class="input-wrapper">
<label for="business-colab-number">Número de funcionarios</label>
<input
id="business-colab-number"
name="business-colab-number"
type="text"
placeholder="Digite o número de colaboradores"
onkeypress="return /\+?\d/.test(event.key)"
/>
</div>
<div class="input-wrapper">
<label for="business-about">Sobre seu negócio</label>
<textarea
id="business-about"
name="business-about"
placeholder="Fale um pouco sobre seus produtos e serviços"
></textarea>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="btn secondary" data-action="prev">
VOLTAR
</button>
<button type="button" class="btn primary" data-action="next">
Continuar
</button>
</div>
</div>
<div class="form-step hide">
<div class="content">
<div class="input-wrapper">
<label for="project">Objetivos do projeto</label>
<textarea
id="project"
name="project"
placeholder="Fale um pouco sobre seus produtos e servços"
></textarea>
</div>
</div>
<div class="button-wrapper">
<button type="button" class="btn secondary" data-action="prev">
VOLTAR
</button>
<button type="submit" class="btn primary">Enviar resposta</button>
</div>
</div>
</form>
</main>
<script src="script.js"></script>
</body>
</html>