How to Link Your Conversational Form Logo

Introduction

Would you like to link your Conversational Forms logo from your form to your homepage? In this tutorial, we’re going to create a conversational form using the WPForms Conversational Forms addon, upload a logo for our form, and then add a snippet that would link that logo back to our homepage using a small code snippet.

Creating your form

First, we’ll need to create a new form and add our fields to this form. For the purpose of this tutorial, we’re going to just create a booking form with some basic fields.

Enabling Conversational Forms

Next, you’ll need to enable the form as a Conversational Form. For any assistance with this, please see this documentation.

Inisde the form builder, just click on Settings and then Conversational Forms to enable this for your form.

Uploading your logo

Now it’s time to upload your logo to the conversational form. While on the Conversational Forms tab, click the Upload Image and upload your logo. Once complete, click Save to save the changes.

By default, this image doesn’t link to anything. In the next step, we’re going to add a code snippet that will link this image back to the homepage.

Adding the snippet to link your form logo

Now it’s time to add a snippet to your site that will turn your logo image into a link. If you need any help in adding snippets to your site, please see this tutorial.

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

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

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

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

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

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

In the snippet above, the var formID = 375 is the form ID number. This will need to be changed to match your form ID. If you need help in locating your form ID, please review this tutorial.

Now when you view your conversational form and hover over the logo image, you’ll see the pointer to click the image.

And that’s all you need to link your Conversational Forms logo. Would you like to also do the same for the Form Pages addon? Take a look at our tutorial on How to Link Your Form Pages Form Logo.

Related

Action Reference: wpforms_wp_footer