[Resolved] Displaying a custom shortcode in the page header

[Pablo]

Hi everyone,

I’m currently implementing ACF with my page header and have created a pretty good process for displaying normal things (text, images, etc…), however now I’ve attempted to implement a Gravity Forms form using ACF and a custom shortcode but I’m getting really odd results. The code I’m using to display the shortcode is as follows:

function custom_shortcode() {

  $form_object = get_field('why-digiboost_form');
  echo do_shortcode('[gravityform id="' . $form_object . '" title="false" description="false" ajax="true"]');

}
add_shortcode( 'form', 'custom_shortcode' );

The above code is being inserted into the functions.php file.

When displaying the shortcode in the page header, I’m displaying it like this:
<div>[form]</div>

What’s happening though is the form is showing up above all the other content inside the page header and is not actually being pulled as a part of that element. All the code combined is as follows:

<div class="grid-container clearfix header-container">
	<div class="grid-65 tablet-grid-100">
		<div class="h0 bold center line-height-2">[acf field="page_header_heading"]</div>
		<div class="center light pt2">[acf field="page_header_description"]</div>
		<div class="mt2 mb2 line-height-5 semi-light center">
			<div class="h3"><i class="fas fa-check"></i> [acf field="page_header_bullet_points_0_page_header_bullet_points_single_bullet"]</div>
			<div class="h3"><i class="fas fa-check"></i> [acf field="page_header_bullet_points_1_page_header_bullet_points_single_bullet"]</div>
			<div class="h3"><i class="fas fa-check"></i> [acf field="page_header_bullet_points_2_page_header_bullet_points_single_bullet"]</div>
			<div class="h3"><i class="fas fa-check"></i> [acf field="page_header_bullet_points_3_page_header_bullet_points_single_bullet"]</div>
			<div class="h3"><i class="fas fa-check"></i> [acf field="page_header_bullet_points_4_page_header_bullet_points_single_bullet"]</div>
		</div>
		<div class="typewriter-placeholder" style="display: none;">[acf field="page_header_typewriter_text"]</div>
		<div class="text mb3">
			<div class="content"></div>
			<div class="dash"></div>
		</div>
                 <img src="[acf field='page_header_logo_image']" alt="woocommerce wordpress liquid web">
	</div>
	<div class="grid-35 tablet-grid-100">
		<div style="margin-bottom: -50px;">
			<img src="[acf field='page_header_gravity_form_image']" alt="">
		</div>
		<div>[form]</div>
	</div>
</div>

I am currently working locally on my machine, however I can push to a staging environment if easier help could follow from that. Thanks so much!

[Pablo]

See here for screenshots of this in action:

View post on imgur.com

[Pablo]

That imgur link doesn’t seem to work, try this one:
https://postimg.cc/gallery/ezyrk6ew/

[Tom]

Hi there,

Instead of using echo, try return.

Let me know 🙂

[Pablo]

That worked perfectly, Tom. Thanks so much!

[Tom]

You’re welcome 🙂

[Author]

Posts