Cómo enlazar el logotipo del formulario de las páginas de tu formulario

Introducción

¿Te gustaría enlazar el logotipo de tus Páginas de formulario desde tu formulario a tu página de inicio? En este tutorial, vamos a crear un formulario usando el complemento Páginas de formulario de WPForms, subir un logotipo para nuestro formulario y luego añadir un fragmento de código que enlazaría ese logotipo a nuestra página de inicio.

Creación de su formulario

Primero, necesitaremos crear un nuevo formulario y añadir nuestros campos a este formulario. Para el propósito de este tutorial, vamos a crear un formulario de reserva con algunos campos básicos.

Habilitar Páginas de formulario

A continuación, deberás habilitar el formulario para usar Páginas de formulario. Para cualquier ayuda con esto, por favor consulta esta documentación.

Dentro del creador de formularios, simplemente haz clic en Ajustes y luego en Páginas de formulario para habilitar esto para tu formulario.

Subir tu logotipo

Mientras estás en la pestaña Páginas de formulario, haz clic en Subir imagen y sube tu logotipo. Una vez completado, haz clic en Guardar para guardar los cambios.

Por defecto, esta imagen no enlaza a nada. En el siguiente paso, vamos a añadir un fragmento de código que convertirá esta imagen en un enlace a la página de inicio.

Añadir el fragmento de código para enlazar el logotipo de tu formulario

Ahora es el momento de añadir un fragmento de código a tu sitio que convertirá la imagen de tu logotipo en un enlace. Si necesitas ayuda para añadir fragmentos de código a tu sitio, por favor consulta 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 );

En el fragmento de código anterior, var formID = 375 es el número de ID del formulario. Esto deberá cambiarse para que coincida con el ID de tu formulario. Si necesitas ayuda para localizar el ID de tu formulario, por favor revisa este tutorial.

Ahora, cuando veas tu formulario y pases el ratón sobre la imagen del logotipo, verás el puntero para hacer clic en la imagen.

Y eso es todo lo que necesitas para enlazar el logotipo de tu formulario en tus páginas de formulario. ¿Te gustaría hacer lo mismo para el complemento Formularios conversacionales? Echa un vistazo a nuestro tutorial sobre Cómo enlazar el logotipo de tu formulario conversacional.

Relacionado

Referencia de acción: wpforms_wp_footer_end