bookmark_borderCustomizing The Login Widget Template

If you’re using the Gravity Forms login widget but want to use a custom template, you can easily do so. This is especially helpful for theme developers who want to utilize the existing login widget already built into Gravity Forms.

Placing Template Files

The Gravity Forms login widget can be customized by placing template files directly within your active theme. If the login widget is being loaded, Gravity Forms will automatically load those template files when needed. Here are the files it will look for:

  • gravityformsuserregistration-login.php
    This template file is loaded when the login widget is displayed, and the user is not logged in.
  • gravityformsuserregistration-loggedin.php
    If the user is already logged in, this template will be loaded.

Both of these files will need to be placed in the top-level of your active theme. Outside of placing the files there, no additional configuration is needed. If the file exists, it will be used.

Customizing Template Files

When using these custom template files, the sky is the limit! Inside the template, you can load any code or output any markup that you need.

Keep in mind that these files will override the default markup automatically even if they’re blank, so be sure to include things like username and password fields if you still need to use them.

To help you start below you can find example content for both files that reproduce the default markup.

gravityformsuserregistration-login.php example

		// Just a title to let you know the custom template is being loaded. Remove before going live.
		echo '<h2>This is my custom Login Form - Not logged template</h2>';
 
 		extract( $args );
	
		/* Get the login form. */
		$form = GF_User_Registration::login_form_object();
		
		/* Set the tab index. */
		GFCommon::$tab_index = gf_apply_filters( array( 'gform_tabindex', $form['id'] ), $tabindex, $form );
	
		/* Enqueue needed scripts. */
		GFFormDisplay::enqueue_form_scripts( $form, false );
		
		/* Prepare the form wrapper class. */
		$wrapper_css_class = GFCommon::get_browser_class() . ' gform_wrapper';

		/* Ensure login redirect URL isn't empty. */
		if ( rgblank( $login_redirect ) ) {
			$login_redirect = ( isset( $_SERVER['HTTPS'] ) ? 'https' : 'http' ) . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
		}
		
		/* Open Gravity Form wrapper and form tag. */
		$html  = "<div class='{$wrapper_css_class} gf_login_form' id='gform_wrapper_{$form['id']}'>";
		$html .= "<form method='post' id='gform_{$form['id']}'>";
		$html .= "<input type='hidden' name='login_redirect' value='" . esc_attr( sanitize_text_field( $login_redirect ) ) . "' />";
		
		// Convert display title and description to boolean valudes.
		$display_title       = filter_var( $display_title, FILTER_VALIDATE_BOOLEAN );
		$display_description = filter_var( $display_description, FILTER_VALIDATE_BOOLEAN );
		
		/* Insert form heading if needed. */
		if ( $display_title || $display_description ) {
			$html .= "<div class='gform_heading'>";
			$html .= $display_title ? "<h3 class='gform_title'>" . esc_html( $form['title'] ) . "</h3>" : "";
			$html .= $display_description ? "<span class='gform_description'>" . esc_html( $form['description'] ) . "</span>" : "";
			$html .= "</div>";
		}
		
		/* Insert form body. */
		$html .= "<div class='gform_body'>";
		$html .= "<ul id='gform_fields_login' class='gform_fields top_label'>";
		foreach ( $form['fields'] as $field ) {
			$field_value = GFFormsModel::get_field_value( $field );
			$field_html  = GFFormDisplay::get_field( $field, $field_value );
			$field_html  = str_replace( "<span class='gfield_required'>*</span>", '', $field_html );
			$html       .= $field_html;
		}
		$html .= '</ul>';
		$html .= GFFormDisplay::gform_footer( $form, 'gform_footer top_label', false, array(), '', false, false, 0 );
		$html .= '</div>';
		
		/* Close Gravity Form wrapper and form tag. */
		$html .= '</form>';
		$html .= '</div>';
		
		/* Display links. */
		if ( ! empty( $logged_out_links ) ) {
			
			if ( GF_User_Registration::get_plugin_setting( 'custom_registration_page_enable' ) == '1' ) {
				$registration_page = GF_User_Registration::get_plugin_setting( 'custom_registration_page' );
				$register_url      = 'gf_custom' === $registration_page ? GF_User_Registration::get_plugin_setting( 'custom_registration_page_custom' ) : get_permalink( $registration_page );
			} else {
				$register_url = wp_registration_url();
			}

			$html .= '<nav class="gf_login_links">';
			
			foreach ( $logged_out_links as $link ) {
				
				$link['url']  = str_replace( '{register_url}', esc_attr( $register_url ), $link['url'] );
				$link['url']  = str_replace( '{password_url}', esc_attr( wp_lostpassword_url() ), $link['url'] );
				$html        .= '<a href="' . esc_attr( $link['url'] ) . '" title="' . esc_attr( $link['text'] ) . '">' . esc_html( $link['text'] ) . '</a><br />';
				
			}
			
			$html .= '</nav>';
			
		}
		
		echo $html;

gravityformsuserregistration-loggedin.php example

			// Just a title to let you know the custom template is being loaded. Remove before going live.
			echo '<h2>This is my custom Login Form - Logged in template</h2>';

			/* Prepare the logged in message. */
			if ( rgblank( $logged_in_message ) ) {
				$logged_in_message = sprintf(
					esc_html__( 'You are currently logged in as %s%s%s. %sLog out?%s', 'gravityformsuserregistration' ),
					'<strong>', $current_user->display_name, '</strong>',
					'<a href="' . wp_logout_url( $logout_redirect ) . '">', '</a>'
				);
			} else {
				$logged_in_message = str_replace( '{logout_url}', '<a href="' . esc_attr( wp_logout_url( $logout_redirect ) ) . '" title="' . esc_attr__( 'Logout', 'gravityformsuserregistration' ) . '">' . esc_html__( 'Logout', 'gravityformsuserregistration' ) . '</a>', $logged_in_message );
				$logged_in_message = GFCommon::replace_variables( $logged_in_message, array(), array(), false, false, false, 'text' );
			}
			
			/* Display the avatar and logged in message. */
			$html  = '<p>';
			$html .= filter_var( $logged_in_avatar, FILTER_VALIDATE_BOOLEAN ) ? get_avatar( $current_user->ID ) . '<br />' : null;
			$html .= $logged_in_message;
			$html .= '</p>';
			
			/* Display links. */
			if ( ! empty( $logged_in_links ) ) {
				
				foreach ( $logged_in_links as $link ) {
					
					$link['url']  = str_replace( '{logout_url}', esc_attr( wp_logout_url( $logout_redirect ) ), $link['url'] );
					$link['url']  = GFCommon::replace_variables( $link['url'], array(), array(), false, false, false, 'text' );
					$html        .= '<a href="' . esc_attr( $link['url'] ) . '" title="' . esc_attr( $link['text'] ) . '">' . esc_html( $link['text'] ) . '</a><br />';
					
				}
				
			}

			echo $html;