I have a form on a landing page template. This template is used for several pages, each page has it’s unique text and images, and all submissions go through the single form.
I want to change the text on a button depending what page it is showing on, so the button better aligns with the text on a given page.
I am trying to do this with either a functions.php snippet or some javascript.
I know I have to do one snippet for each page, which is fine.
I am open to other suggestions that also accomplish this.
You should be able to do this with JavaScript, and it could all be one script (assuming you don’t have thousands of query string values.)
Here is a plain JavaScript way to get the query string parameters and values:
From that article, you can use it like this:
Example URL:
http://www.example.com/index.php?id=1&image=awesome.jpg
Calling getQueryVariable("id") – would return “1”.
Calling getQueryVariable("image") – would return “awesome.jpg”.
That’s the first part. Then you need to update the submit button value. You could do it like this:
<script>
// Function to get query string parameter value by name
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] === variable) {
return pair[1];
}
}
return null;
}
// Function to handle setting the input value based on the query parameter
function setInputValue() {
// Get the value of the query string parameter 'myparam'
var myparamValue = getQueryVariable('myparam');
// Get the submit button element
// update for your Form ID
var submitButton = document.getElementById("gform_submit_button_6");
// Check the value of 'myparam' and update the input value accordingly
if (myparamValue === "sales") {
submitButton.value = "Talk to Sales";
} else if (myparamValue === "support") {
submitButton.value = "Contact Support";
} else if (myparamValue === "marketing") {
submitButton.value = "Inquire about Marketing";
} else {
// Handle other cases or set a default value if needed
submitButton.value = "Submit";
}
}
// Attach the setInputValue function to the window.onload event
window.onload = setInputValue;
</script>