Resumo de IA
Você tem um formulário longo ao qual gostaria de adicionar um sumário? Você pode facilmente adicionar links HTML ao topo do seu formulário, bem como aos cabeçalhos das seções do seu formulário, que permitem aos usuários navegar de forma rápida e sem esforço entre as seções do seu formulário.
Neste tutorial, mostraremos o HTML necessário para habilitar o sumário em seus formulários WordPress.
Criando Seu Formulário
Em nosso exemplo, criaremos um formulário de pessoal de funcionários para coletar informações como dados pessoais, dependentes, contatos de emergência e interesses.
Portanto, para começar, crie um novo formulário ou edite um existente para acessar o construtor de formulários. No construtor de formulários, adicione os campos relevantes. As várias categorias de informações, como mencionado anteriormente, serão divididas usando o campo de formulário HTML.
Adicionando os Links HTML aos Cabeçalhos
Agora que o formulário está configurado, é hora de adicionar nossos links aos cabeçalhos das seções.
Por exemplo, vamos adicionar um link à seção Informações Pessoais.
Com este HTML, estamos adicionando um cabeçalho HTML h2 ao nosso formulário e, dentro desse cabeçalho, adicionaremos um link. O id do link é o mais importante, pois determina o destino do link.
Você precisará repetir esta etapa para cada seção que tiver.
Observação: O id de cada link deve ser único. Usar o mesmo id para várias seções em uma página confundirá o navegador, e o seletor não funcionará.
Criando o Sumário
Com nossa etapa final de HTML, adicionaremos um campo HTML no topo do formulário que conterá uma lista não ordenada em HTML com links que apontam para cada seção do nosso formulário.
Quando esses links forem clicados, a página pulará para a seção apropriada do formulário.
Observação: O id da etapa anterior e o href desta etapa precisam corresponder exatamente com um sinal de cerquilha (#) antes do texto, ou um não vinculará ao outro.
Estilizando o Sumário
Esta etapa é completamente opcional, no entanto, se você quiser adicionar algum estilo a esses links, basta copiar este CSS para o seu site. Se precisar de ajuda para adicionar CSS ao seu site, revise este tutorial.
div#wpforms-1279-field_34 ul {
text-align: center;
}
div#wpforms-1279-field_14 ul li {
list-style: none !important;
display: inline-block;
margin: 5px 10px !important;
}
div#wpforms-1279-field_14 ul li h2 a {
font-size: 18px;
}
#wpforms-form-1279 h2 a {
font-size:26px;
width: 100%;
display: block;
color: #000000;
}
div#wpforms-1279-field_14 ul li h2 a:hover {
color: #b95d52;
text-decoration: underline;
}
Em nosso exemplo, o ID do campo de formulário HTML é 14 e o ID do nosso formulário é 1279. Isso significa que nosso CSS será aplicado apenas a este ID específico de formulário e campo.
Se precisar de ajuda para encontrar os IDs de formulário e campo, confira este tutorial.
É isso! Agora você sabe como criar facilmente um índice no início do seu formulário longo!
Em seguida, você gostaria de criar um campo interno que possa usar para filtrar suas entradas? Dê uma olhada em nosso tutorial sobre como adicionar um campo filtrável a um formulário para uso interno.