[Resolved] Displaying a custom shortcode in the page header

Home Forums Support [Resolved] Displaying a custom shortcode in the page header

Home Forums Support Displaying a custom shortcode in the page header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #664701
    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('

    Oops! We could not locate your form.

    '); } 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!

    GP Premium 1.7.2
    #664710
    Pablo

    See here for screenshots of this in action:

    View post on imgur.com

    #664712
    Pablo

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

    #664917
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Instead of using echo, try return.

    Let me know ๐Ÿ™‚

    #665187
    Pablo

    That worked perfectly, Tom. Thanks so much!

    #665414
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.