Archived topic
Displaying a custom shortcode in the page header
5 replies · Started by Pablo on August 30, 2018
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!
See here for screenshots of this in action:
https://imgur.com/a/MIvmPuz
That imgur link doesn't seem to work, try this one:
https://postimg.cc/gallery/ezyrk6ew/
Hi there,
Instead of using echo, try return.
Let me know :)
That worked perfectly, Tom. Thanks so much!
You're welcome :)