⚠️ This article is intended for advanced users that are comfortable with custom CSS and JavaScript.
When installing a POWR Form to multiple pages, the app can be configured to capture all or part of the parent url in the response. This can be used to identify which collection, product, or blog page the submission came from.
Custom CSS and JS are not available on our Free plan, and require an upgrade. Please see our Form Builder pricing page for more details. The settings can be found under Settings -> Advanced -> Custom CSS & JS.
To capture part of the parent url in a form response, follow these instructions:
- Create one or more text elements to capture the designated portion(s) of the parent url.
- Use the browser inspector to find the unique id associated with these elements.
- Each form element has a unique id associated with it, which is a generated combination of numbers and letters separated with an underscore. Here is an example unique id: giqbk3pt_1605162980594
- Now add the custom javascript to automatically make the selection when the form is loaded on the corresponding product page, subbing the unique id of the elements for your form.
- Now add the Custom CSS to hide both the label, and the input for the appropriate form fields.
*If you want to set up custom conditional logic or autoresponders based on the parent url, create a dropdown element with corresponding options for each page where the form will be installed. These options will need to be formatted exactly as they are in the url.
Feel free to copy and modify the exact code shown below.
⚠️ As of October 2021 for security reasons, POWR editor doesn't support the Custom JS
field. If you would like to add any JS customization, kindly contact the Support Team at support@powr.io. As security is a top concern at POWR, JS scripts will be added to your app only after verification.
Custom JS to capture part of the url should look similar to this example:
setTimeout(function(){
var getUrlHashParams = () => {
var params = {};
var parts = window.location.href.replace(/[#&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
params[key] = value;
});
return params;
};
var params= getUrlHashParams();
var loc = params.url &&
decodeURIComponent(params.url).match(/\/collections\/(.*)\/products.*/);
var selector = `select[name="giqbk3pt_1605162980594"] option[value=${loc && loc[1]}]`
$(selector).attr('selected','selected').change();
$('input[name="9bc62b37_1606844293915"]').val(loc && loc[1]).change();
var productLoc = params.url &&
decodeURIComponent(params.url).match(/\/products\/(.*)\??/);
$('input[name="93e456a6_1606844306873"]').val(productLoc && productLoc[1]).change();
}, 500)
In the above JS example, this line is grabbing everything between collections/ and products/ so that any UTM parameters are not included in the response:
var loc = params.url &&
decodeURIComponent(params.url).match(/\/collections\/(.*)\/products.*/);
This line is setting the value of a text input with the corresponding portion of the url:
$('input[name="93e456a6_1606844306873"]').val(productLoc && productLoc[1]).change();
Also in the above JS example, this line is grabbing everything between products and an optional ? so that any utm params are not included in the response:
var productLoc = params.url &&
decodeURIComponent(params.url).match(/\/products\/(.*)\??/);
Custom CSS to hide input(s) should hide both the label, and the input field. It will look similar to this example for a dropdown (select) element:
div[id="giqbk3pt_1605162980594"] label, div[id="giqbk3pt_1605162980594"] select
{
display: none !important;
}
Comments
2 comments
I don'tthink this works anymore. I am a Pro user and have entered the following in my advance js editor.
setTimeout(function(){console.log(window.location.href)
}, 500)
The link loose visibility into the parent window, Response from my console is
However this is my URL, I would expect to be able to capture the UUID.
I would really appreciate some help as I just bought this tool to help but may have to switch because I thought this feature was available!
Hi Joshua, this is unfortunately doesn't work with WIX.
Please sign in to leave a comment.