Adicionar um índice para formulários longos

Tem um formulário longo ao qual gostaria de adicionar um índice? Pode adicionar facilmente ligações HTML à parte superior do seu formulário, bem como aos cabeçalhos das secções do seu formulário, que permitem aos utilizadores saltar rapidamente e sem esforço entre as secções do seu formulário.

Neste tutorial, vamos mostrar-lhe o HTML necessário para ativar o índice nos seus formulários WordPress.

Criar o seu formulário

No nosso exemplo, vamos criar um formulário de pessoal para recolher informações como dados pessoais, dependentes, contactos de emergência e interesses.

Assim, para começar, crie um novo formulário ou edite um já existente para aceder ao criador de formulários. No criador de formulários, vá em frente e adicione os campos relevantes. As várias categorias de informação, tal como mencionado anteriormente, serão divididas utilizando o campo de formulário HTML.

Adicionando as ligações HTML aos cabeçalhos

Agora que o formulário está configurado, é altura de adicionar as nossas ligações aos cabeçalhos das secções.

Por exemplo, vamos adicionar uma ligação à secção Informações pessoais.

<h2><a id="personal">Personal Information</a></h2>

Com este HTML, estamos a adicionar um título HTML de h2 ao nosso formulário e, dentro desse título, vamos adicionar uma ligação. O id da hiperligação é o mais importante, pois determina o destino da hiperligação.

Terá de repetir este passo para cada secção que tiver.

Criar o Índice

Com o nosso passo HTML final, adicionaremos um campo HTML ao topo do formulário que conterá uma lista não ordenada HTML com ligações que apontam para cada secção do nosso formulário.

Quando se clica nestas ligações, a página salta para a secção adequada do formulário.

<ul>
<li><h2><a href="#personal">Personal Information</a></h2></li>
<li><h2><a href="#dependents">Dependents</a></h2></li>
<li><h2><a href="#emergency">Emergency Contacts</a></h2></li>
<li><h2><a href="#hobbies">Hobbies & Interests</a></h2></li>
</ul>


Estilizar o Índice

Este passo é completamente opcional, no entanto, se pretender adicionar algum estilo a estas hiperligações, basta copiar este CSS para o seu site. Se precisar de ajuda para adicionar CSS ao seu site, consulte 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;
}

No nosso exemplo, o ID do campo do formulário HTML é 14 e o nosso ID do formulário é 1279. Isto significa que o nosso CSS só será aplicado a este formulário e ID de campo específicos.

Se precisar de ajuda para encontrar onde estão os IDs de formulário e de campo, consulte este tutorial.

É isso mesmo! Agora já sabe como criar facilmente um índice no início do seu formulário longo!

Em seguida, gostaria de criar um campo interno que possa utilizar para filtrar as suas entradas? Consulte o nosso tutorial sobre como adicionar um campo filtrável a um formulário para utilização interna.