How do I make my javascript webform load only on specific page?

by 2 comments
Hi Guys,

I need to have my webform load on a specific page only and not globally on other pages of the site, including the home page.

I saw a tutorial which appears to offer a solution, however I am fairly new to Wordpress and PHP.

I'm looking for a simple laymen's explanation of what code exactly to insert and where to insert it to make my webform javascript code load up only on on specific page whenever the link to the page is clicked.

Below is the tutorial I saw.

Thanks in advance!

How to load Javascript on specific pages in Wordpress

The website speed and responsiveness are very important factors and this aspects should not be neglected if you want to have happy visitors.
There are many areas that should be improved for better website performance as: smart wise written (X)HTML/CSS, optimized images and minimal javascript.
On larger websites, you will have JavaScript, that needs to be loaded just on certain pages or areas from the website, without needing to load it and slow down those.

Adding the JavaScript in header

In this post, I want to show you how to include JavaScript, just on specific pages or areas in Wordpress. First thing you have to do, is to add the JavaScript you want to load in your theme folder of Wordpress. To keep everything organized, create a folder called “Scripts” or “Js”.
Than, open you header.php file from you active theme and instead calling the link as you normally do, paste the following code within the head tag:
The Code

<?php if (is_page('home') ) { ?>
<!--home page custom JS-->
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>
<?php } ?>

Code explained

if (is_page('home')

That means that if you have permalinks active and a page called home, the JavaScript will load just on that page.
<!--home page custom JS-->

This is a simple HTML comment to keep organized or to make the life easier to other developers who might have to work with your code.
<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>

Basically, this is the link to our JavaScript file that could stay by itself just that will be loaded on all of the pages.

Additionally, you can have more pages like that inclusive a page id (please replace just this line in the code from above):
if (is_page('home') || is_page('contact') || is_page('45')

Or sections as:
if (is_single()
#website design #javascript #load #make #page #specific #webform
  • Profile picture of the author aarondwyer
    If you are trying to get a web form going in Wordpress, use a plugin and just put the web form on a particular page, you don't need javascript.

    Search on google for "wordpress contact form plugin" and there are plenty of good ones out there.


Next Topics on Trending Feed