Tenho vários campos que estão escondidos e só devem aparecer quando o usuário clicar no botão ver ao lado do primeiro campo.
A minha ideia inicial seria quando a pessoa clicar no botão verde (after do .newField) ele adicionasse a classe newField ao próximo campo.
(não tem problema se o botão verde ficar duplicado, é claro que se conseguirem deixar só no último é melhor.)
.c-form .hide {
display: none;
}
.newField {
display: block!important;
position: relative;
}
.c-form .newField:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
font-size: 35px;
cursor: pointer;
color: #1fa050
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="c-form">
<form id="formsugestoes" method="post" enctype="multipart/form-data">
<h3>Fale conosco</h3>
<input type="hidden" name="setor" value="">
<input type="hidden" name="assunto" value="formsugestoes">
<label class="lado hide newField"><span>Nome: *</span><input class="text" type="text" name="nome" value="" required></label>
<label class="lado hide"><span>E-mail: *</span><input class="text" type="email" name="email" value="" required></label>
<label class="lado hide"><span>Cidade: *</span><input class="text" type="text" name="cidade" value="" required></label>
<label class="lado hide"><span>Telefone:</span><input class="text mask-tel" type="text" name="telefone" value="" required></label>
<label class="lado hide"><span>Mensagem:</span><textarea class="text" name="mensagem" value=""> </textarea></label>
<div><input type="submit" name="enviar" value="Enviar" class="btnEnviar hide lado" /></div>
</form>
</div>