Skip to main content

I have a form on my page and at the top of the form, I’d like a piece of text that says “Last Updated:” and then shows today’s date. Anyone know how I could accomplish this?


I assume I could also use something similar to update to the current year for a copyright piece of the footer?


Thanks in advance!

Your best bet is to write a little JavaScript function to return the current date in the Custom HTML box in Unbounce.


Here’s documentation to get you started: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Can we get an updated implementation method, please? Custom HTML containers no longer allow the usage of inline JS, we have to place them in the head, body/body close then somehow invoke/call them from the HTML container.


So far, I’m unable to find any documentation around how to accomplish the latter portion of the aforementioned. Having a doc on how to invoke JS the user has placed in the Script Manager, within a custom html container, would be helpful to a lot of folks is my guess.

Can we get an updated implementation method, please? Custom HTML containers no longer allow the usage of inline JS, we have to place them in the head, body/body close then somehow invoke/call them from the HTML container.

So far, I’m unable to find any documentation around how to accomplish the latter portion of the aforementioned. Having a doc on how to invoke JS the user has placed in the Script Manager, within a custom html container, would be helpful to a lot of folks is my guess.


To add the current year to an Unbounce landing page, you can use JavaScript to dynamically replace a placeholder, such as {current_year}, with the actual current year. Here's a step-by-step guide and the JavaScript code you'll need to accomplish this.

Step 1: Add the Placeholder to Your Unbounce Page

First, insert the placeholder {current_year} wherever you want the current year to appear on your Unbounce landing page. This can be within the text of any paragraph, header, or other element.

Step 2: Add the JavaScript Code

  1. Go to your Unbounce dashboard and open the page editor for the page you want to modify.
  2. Navigate to the "Javascripts" section on the bottom left corner of the page editor.
  3. Click on "Add New Javascript".
  4. In the dialogue that appears, give your script a name, e.g., "Replace Current Year".
  5. Set the placement to "Before Body End Tag" to ensure the script runs after the page content has loaded.
  6. Copy and paste the following JavaScript code into the script content area:
 

javascriptCopy code

<script>

document.addEventListener('DOMContentLoaded', function() {

    var elements = document.body.innerHTML;

    var currentYear = new Date().getFullYear();

    var updatedHtml = elements.replace(/\{current_year\}/g, currentYear);

    document.body.innerHTML = updatedHtml;

});

</script>

  1. Save the script and then save and publish your page changes.

How It Works

  • The code listens for the DOMContentLoaded event to ensure it runs after the HTML document has been fully loaded.
  • It retrieves the current year using new Date().getFullYear().
  • It then searches the entire body of the document for the {current_year} placeholder using a regular expression and replaces all instances of it with the current year.
  • Finally, it updates the innerHTML of the body with the modified HTML.

Important Note

Replacing document.body.innerHTML directly can interfere with event listeners and other JavaScript functionality on your page. This approach is simple and effective for basic use cases, but if your page relies on complex interactions or external scripts, consider a more targeted approach. For example, assign a unique ID or class to elements containing the {current_year} placeholder and only replace the content of those specific elements.

If you need further customization or run into any issues, feel free to ask!

Thank you for this post!! What about a full date? Like ‘October 16, 2024”

@Brett_Rosenblatt, You can try this one. I tried on my landing page: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Display</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var today = new Date();
            var options = { year: 'numeric', month: 'long', day: 'numeric' };
            var formattedDate = today.toLocaleDateString('en-US', options);

            // Display the date on the page
            $('#dateDisplay').text(formattedDate);
        });
    </script>
</head>
<body>
    <h1>Today's Date:</h1>
    <p id="dateDisplay"></p>
</body>
</html>

 

Reply


Terms & ConditionsCookie settings