I have a WordPress site that is using Advanced Custom Fields to render content. One such field allows users to add third party form code.
Recently users have been using HubSpot forms and this is hurting page load times.
One such example is the code below.
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "8142945",
formId: "xxxx-xxxx-xxxx-xxxx-xxxx"
});
</script>
The users enters this and it is rendered in place like so:
Is there a way that the user can copy the embed code and then I can defer it, or at least load it last?
I was thinking of just adding defer and then wrapping the form creation call in an onload event, but that would then mean that the user would need to wrap everything they past in correctly.
Has anyone dealt with a similar situation?
One solution could be to make them enter the form ID only and then I add or remove script as necessary?
Related
It seems like you have to whitelist your staging or local site in order to perform test. Does anyone know a way around that? I went to their website to look through documentation, but I can find anything beyond this (At the very bottom of the page) :
<!-- OneTrust Cookies Consent Notice start for www.example-domain.com -->
<script type="text/javascript" src="https://cdn.cookielaw.org/consent/{id}-test/OtAutoBlock.js" ></script>
<script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-language="en" type="text/javascript" charset="UTF-8" data-domain-script="{id}-test" ></script>
<script type="text/javascript">
function OptanonWrapper() {}
</script>
<element class="all-other-html-below">All other HTML</element>
<script type=text/plain class="optanon-category-[category 1 through n]"></script>
I would like to test OneTrust's scripts affect on other script tags. I want to see if script tags that come after their script can be transformed from type="text/plain" to type="text/script" and see of an error is thrown. Apparently that is something that comes out of the box. But other functionality is dependent on that confirmation. But when the user consents to a cookie category there isn't a change in accepted cookies :
enter image description here
but it works on the live site :
enter image description here
Which seems like to have something to do with the fact that the domains don't match. Is there a way around this?
I have a WowSlider that is not working when running the main page of my Wordpress website with https. The images in the slider appear stacked statically one after another. When running the Wordpress website with http, the slider works fine (provides the transition effect expected).
I am trying to figure out how to modify my website such as to launch a javascript with https, not http. I want to launch the javascript as
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (*)
but not as
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script> (**)
But since I have not been able to manually edit the source code behind the main page, I have not been able to get (*) to work.
Hence the question: How to modify the Wordpress site (php scripts?) such as to implement (*)?
I have come to understand that the problem has to do with contention between http and https.
My problem resembles the one from
jQuery slider not working in https URL
I believe the same solution will apply. I should launch the javascript using
<script type='text/javascript' src='//wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
or
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
The hypothesis above is supported by an observation from
https://www.allbookcovers.com (***)
Here a corresponding WowSlider operates fine with https.
When analyzing the code behind (***), I noticed the following:
<!-- Start wowslider.com Head section -->
<link rel="stylesheet" type="text/css" href="js/engine1/style.css" />
<script type="text/javascript" src="js/engine1/jquery.js"></script>
<!-- End WOWSlider.com section -->
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-magento-fix.js"></script>
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js"></script>
In my website, the javascript is launched with http, not https:
<script type="text/javascript" src="http://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
I tried to comb through my Wordpress website to figure out where jquery.js was being launched. I found the following in
\\wp-includes\script-loader.php(963):
scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' ); (****)
It was not clear to me how to modify this such as to result in
<script type="text/javascript" src="https://www.allbookcovers.com/skin/frontend/default/hellomini/js/jquery-1.7.1.min.js"></script>
getting added to the main page, since (****) made no direct reference to http.
Any suggestions?
I withdraw the question. I appear to have stumbled on a solution. As I was getting ready to hand-edit the PHP files comprising my website, or even go into the PHP database and manually edit the content, I stumbled on a plugin called "Really Simple SSL". I installed the plugin. And vuha! My problems went away.
I'm working on a Wordpress site that was built using Visual Composer. I'm trying to embed a Hubspot form, which is something I have done numerous times but never using VC. I figured it would be as simple as adding a "raw html" block in VC and adding the form embed script.
This does indeed load the form, however it is displayed on the bottom left of the screen instead of the right column where it was set. However, if the page is refreshed, it displays as it should, no problems. This makes me think the script is loaded after the rest of the page is loaded.
I have tried creating a shortcode for the script and inserting in the VC section. Does not work.
You can see the issue here:
http://yourveininstitute.com/leg-swelling/
( form loads at the bottom of page and loads correctly on refresh )
The HS embed code looks like this ( portal and id redacted ):
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
css: '',
portalId: '######',
formId: '#################'
});
</script>
I could really use some help on this one. I'm spinning my wheels.
I'm seeing a hubspot form loading correctly in the sidebar, even on the first load. Are you still experiencing the problem? If so, I might try enqueueing the external script call, and only putting the hbspt.forms.create stuff in the VC block.
Try adding this to your functions.php file:
add_action('wp_enqueue_scripts', 'add_hubspot');
function add_hubspot() {
wp_enqueue_script('hubspot', '//js.hsforms.net/forms/v2.js');
}
What's the best way to load fast javascript in different pages ? Should my custom javascripts go separate for each page or all custom javascripts should be present only in 1 common custom.js file and include this file in footer ?
require_once($header);
include_once($page2.php);
require_once($footer);
<script src="js/custom-page2.js"></script>//separate for each page
require_once($header);
include_once($page1.php);
require_once($footer);
<script src="js/custom-page1.js"></script>//separate for each page
OR
//in footer.php include all js in 1 file
<script src="js/all-custom.js"></script>
If all pages share the same scripts using one script will be better.
If they use different scripts you can cut out what each page DOESN'T need and save on HTTP requests.
Or a mixture of the two.
So...it depends?
Basic rule: If you don't need it, don't load it.
I advise you to create your html page by including in this order :
HTML wrap all
Head (with style in one page for example)
Body with:
Javascript modules
Main HTML DOM
Javascript DOM modifiers and launchers
Same like this :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="modules.js"></script>
<div class="body"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
it's good idea to put all js in header (browser will not render page until all header files are loaded, at least in theory).
browser (proxy etc) will cache your js, so it's not going to be fetched from your site on every request. browser will only check if file has changed.
in most cases browser will keep single connection for all requests, however it still has to ask for every single js file if it hasn't changed. i keep js logic in small seperate files during development, but then i merge them for production.
I'm using two separate JavaScript files and including them on the same page using two separate script tags. One of these files works fine and it's the one related for a date picker and the other one that has functions in it doesn't.
BUT! If I take the contents of the second js file that has functions inside and drop them in the wep page it works fine... Kindly help me through this..
Here are some parts of the code:
<head>
<?php include('header.php'); ?>?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Student Details</title>
this is where I included the first js file and it working fine (date picker)
<script language="javascript" type="text/javascript" src="../js/datetimepicker.js"></script>
this is where I included the second file and it has js functions
<script language="javascript" type="text/javascript" src="../js/myFuntions.js"></script>
this is a js functions that calls functions for the js file (there is no error in the functions that I'm using)
<script type="text/javascript">
// here I placed a function that called other js functions for the js file that i included but is not working
</script>
</head>
so when took these js functions and placed them in another file and included it on the web page, the stopped working!
First of all, you don't need the language and type attributes. You can get rid of them since they just make things harder to read.
<script src="../js/myFuntions.js"></script>
Now you can see that in your question and the comment you posted you misspelled "Functions" so try fixing that.
<script src="../js/myFunctions.js"></script>