Add element to bottom of every page

Hi,

I have two sites. One of the sites (pdx) has contact forms at the bottom of every page. This was added by someone else who is hard to contact. I want to add forms to the bottom of every page on my other site, but can’t figure out how they did it. I’m assuming it’s a customization of the page templates, but don’t see any added code in the child theme. Any help would be greatly appreciated. Info in the secure note. Thanks!

Hi There,

Thank you for the credentials. It can be added using a template.

Option 1. See this guide: https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208. Then use x_before_colophon_begin filter so it will be above the footer like this site: http://treehouserecoverypdx.com/

function bottom_content(  ) {

  
  echo "your form or section content here";

}

add_filter( 'x_before_colophon_begin', 'bottom_content' );

Option 2: You may add the content on the template handling the footer directly:
\wp-content\themes\x\framework\legacy\cranium\footers\views\integrity\wp-footer.php
Copy that files on the same folder on your child theme here:
\wp-content\themes\x-child\framework\legacy\cranium\footers\views\integrity\wp-footer.php
You might need to create the folder if it doesn’t exist yet. At line #10 of the that file, you may add the code for the form and it will display on top of footer content too.

Option 3. If you will update on the latest version of the theme, there is global blocks. You can create the form as part of global blocks this way, you may just insert it at the bottom of every page where you wan this to appear.

I can see the form on the site is using ContactForm7.

Hope this helps.

Thank you for the reply!

I created a form on the admissions page using CF7, and tried to implement it globally by using entering the code below in the cutom JS field. However, it’s not working. I’m not sure if I added the right content in the echo section. Thanks!

function bottom_content(  ) {

  
  echo [contact-form-7 id="4743" title="Site Form"] ;

}

add_filter( 'x_before_colophon_begin', 'bottom_content' );

Hi there,

In order to make the shortcode work, you will have to use the do_shortcode() function like this:

function bottom_content() {
  echo do_shortcode( '[contact-form-7 id="4743" title="Site Form"]');
}

add_filter( 'x_before_colophon_begin', 'bottom_content' );

Hope this helps.

Thanks for your reply. I added the code to the JS field in the customizer. It did not work, though. I also tried to add it to the child theme’s functions.php. That didn’t work either. Any ideas what I am doing wrong?

Also, I gave the form an id of #admissions on the admissions page. Is there a way to use that instead of the shortcode, so that the styling i did on that page applies to all of the pages?

Thanks!

Hi There,

You can try with this code instead:

function bottom_content() {
	echo do_shortcode( '[contact-form-7 id="4743" title="Site Form"]');
}
add_action( 'x_after_site_end', 'bottom_content' );

Let us know how it goes!

Thanks for the help. That code added the form to every page, but it added it as a right sidebar, rather than a footer. I removed it for now. How can I get it above the footer? Thanks again!

Hi again,

Try this, add the following code in your Child Theme’s functions.php file:

function bottom_content() {
	echo do_shortcode( '<div class="common-form x-container max width">[contact-form-7 id="4743" title="Site Form"]</div>');
}
add_action( 'x_after_site_end', 'bottom_content' );

Then add the following code in your Theme Options > JS:

jQuery(document).ready(function($){
	$('.common-form').insertBefore('.x-colophon.bottom');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

Thank you! We’re very close.

I moved this over to my staging site (link in secure note). Everything is working now. However, there is one issue. When the page loads for the first time, the form appears on the right very quickly, then moves down above the footer. Is there a way to prevent this? It looks really glitchy and bad when it is loading, Thanks again!

Hi again,

I went ahead and made some adjustments to the code, I changed the JS to:

jQuery(window).load(function(){
  jQuery('.common-form').insertBefore('.x-colophon.bottom');
  jQuery('.common-form').removeClass('hidden');
});

And added a class hidden to the Form div. Now it’s working fine. Please clear your browser’s cache and reload the site.

Cheers!

Thank you so much!

You’re most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.