Como Linkar o Logo do seu Formulário de Páginas de Formulário

Introdução

Gostaria de vincular o logotipo do seu Form Pages do seu formulário à sua página inicial? Neste tutorial, vamos criar um formulário usando o addon Form Pages do WPForms, fazer o upload de um logotipo para o nosso formulário e, em seguida, adicionar um trecho de código que vinculará esse logotipo de volta à nossa página inicial.

Criando seu formulário

Primeiro, precisaremos criar um novo formulário e adicionar nossos campos a ele. Para fins deste tutorial, vamos apenas criar um formulário de reserva com alguns campos básicos.

Habilitando Páginas de Formulário

Em seguida, você precisará habilitar o formulário para usar o Form Pages. Para qualquer assistência com isso, consulte esta documentação.

Dentro do construtor de formulários, clique em Configurações e depois em Form Pages para habilitar isso para o seu formulário.

Fazendo o upload do seu logotipo

Na aba Form Pages, clique em Upload Image e faça o upload do seu logotipo. Concluído, clique em Salvar para salvar as alterações.

Por padrão, esta imagem não vincula a nada. Na próxima etapa, adicionaremos um trecho de código que vinculará esta imagem de volta à página inicial.

Adicionando o trecho de código para vincular o logotipo do seu formulário

Agora é hora de adicionar um trecho de código ao seu site que transformará a imagem do seu logotipo em um link. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.

/**
 * Link your form logo on form pages.
 *
 * @link   https://wpforms.com/developers/how-to-link-your-form-pages-form-logo/
 */

function wpf_dev_form_pages_add_link() {
	?>
	<script type="text/javascript">
		jQuery( function( $ ) {

			// Could be removed if changes are needed in all form pages on the site.
			var formID = 375;// ID of form page form to which apply changes.

			if ( $( '#wpforms-' + formID ).length === 0 ) {
				return;
			}

			// Detect Form Page image.
			var $logo = $( '#wpforms-form-page-page' ).find( '.wpforms-custom-logo img' );

			if ( $logo.length > 0 ) {
				$logo.wrap($( '<a>',{
					href: '/' // "/" could be changed to any link.
				}));
			}
		} );
	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_pages_add_link', 30 );

No trecho de código acima, var formID = 375 é o número de ID do formulário. Isso precisará ser alterado para corresponder ao ID do seu formulário. Se precisar de ajuda para localizar o ID do seu formulário, revise este tutorial.

Agora, quando você visualizar seu formulário e passar o mouse sobre a imagem do logotipo, verá o ponteiro para clicar na imagem.

E é tudo o que você precisa para vincular o logotipo do seu formulário em suas páginas de formulário. Gostaria de fazer o mesmo para o addon Conversational Forms? Dê uma olhada em nosso tutorial sobre Como Vincular o Logotipo do Seu Formulário Conversacional.

Relacionado

Referência de Ação: wpforms_wp_footer_end