Time-Based Visibility
Add this attribute to all text elements, where you want to display the current time
Add this attribute to all elements with the ift-current="time" attribute, that should display the current time in 12-hour format. For example 10:23 pm instead of 22:23.
Add this attribute to all text elements, where you want to display the current year.
Add this attribute to all text elements, where you want to display the current month. The month names are automatically translated to the language of your website.
Add this attribute to all text elements, where you want to display the current month number. January = 1, February = 2, March = 3, etc.
Add this attribute to all text elements, where you want to display the current weekday. The weekdays are automatically translated to the language of your website.
Add this attribute to all text elements, where you want to display the current weekday number. Monday = 1, Tuesday = 2, Wednesday = 3, etc.
Add this attribute to all text elements, where you want to display the current quarter of the year (1-4).
Add this attribute to all text elements, where you want to display the current hour (0-23).
Add this attribute to all text elements where you want to display the current minute (0-59). The value displayed will not update after the page has initially loaded. For instance, if the page is opened at 10:55, the minute displayed will be 55 and will not change until the page is either refreshed or navigation to another page occurs.
Add this attribute to all text elements where you want to display the current second (0-59). The value displayed will not update after the page has initially loaded. For instance, if the page is opened at 10:55:22, the second displayed will be 22 and will not change until the page is either refreshed or navigation to another page occurs.
Add this attribute to all text elements where you want to display how many days there are left until a specified target date.
Add this attribute to all elements with the ift-current="days-until-date" attribute. For example, if you set '2099-05-23' as the attribute value, the element will display how many days there are until the 23rd of May, 2099.
CMS support: You can pull the value of the target date from the CMS. This could be useful if you have an 'Events' collection and want to display how many days there are left until a certain event. Just make sure to select the correct format (YYYY-MM-DD).
Add this attribute to all text elements where you want to display the current day of the month (1-31).
Add this attribute to all text elements where you want to display the current day of the year (1-366).
Add this attribute to all text elements where you want to display how many days are left in the current month.
Add this attribute to all text elements where you want to display how many days are left in the current year.
Add this attribute to all text elements where you want to display what percentage of the year has already passed.
Add this attribute to all text elements where you want to display what percentage of the year is still left.
Add this attribute to all text elements where you want to display the current browser timezone of the website visitor.
Add this attribute to all elements with the ift-current="timezone" attribute, that should display the current website visitor's timezone in IANA (Internet Assigned Numbers Authority) format. For example: Europe/Zurich instead of Central European Time
Add this attribute to all elements, which should be visible only during specified hours.
If you want to specify the time range in 12-hour format (e.g 09:00am - 02:30pm instead of 09:00 - 14:30), no additional configuration is required. The tool automatically detects the utilized format (12-hour or 24-hour).
If you want to specify multiple visibility time ranges, you can separate them with a comma:
ift-visible-hours="09:00-10:30, 15:00-17:10"
If you want to specify an overnight range, no additional configuration is required:
ift-visible-hours="07:00pm - 05:15am"
Add this attribute to all elements, which should be visible only on specified days of the week.
If you want to show an element on a single weekday, you can just write the weekday instead of a range:
ift-visible-weekdays="Monday"
If you want to specify multiple visibility ranges, you can separate them with a comma:
ift-visible-weekdays="Monday, Thursday - Sunday"
If you want to specify a cross-week range, no additional configuration is required:
ift-visible-weekdays="Saturday - Tuesday"
If you want to specify weekdays using their abbreviation or numbers, no additional configuration is required:
ift-visible-weekdays="Tue, Fri-Sun"
ift-visible-weekdays="2, 5-7"
Add this attribute to all elements, which should be visible only during specified months.
If you want to show an element during a single month, you can just write the month instead of a range:
ift-visible-months="August"
If you want to specify multiple visibility ranges, you can separate them with a comma:
ift-visible-months="January - April, June - September, November"
If you want to specify a cross-year range, no additional configuration is required:
ift-visible-months="November - April"
If you want to specify months using their abbreviation or numbers, no additional configuration is required:
ift-visible-months="jan-apr, jun-sep, nov"
ift-visible-months="1-4, 6-9, 11"
Add this attribute to all elements, which should be visible only on specified days of the month.
If you want to show an element on a single day, you can just write the day instead of a range:
ift-visible-monthdays="31"
If you want to specify multiple visibility ranges, you can separate them with a comma:
ift-visible-monthdays="1-10, 20-31"
If you want to specify a cross-month range, no additional configuration is required:
ift-visible-monthdays="25-7"
Add this attribute to all elements, which should be visible only on specified dates. The dates must be in the format MM/DD.
If you want to show an element on a single date, you can just write the date instead of a range:
ift-visible-dates="02/14"
If you want to specify multiple visibility ranges, you can separate them with a comma:
ift-visible-dates="01/01 - 02/24, 01/08 - 09/30"
If you want to specify a cross-year range, no additional configuration is required:
ift-visible-dates="12/20 - 01/07"
If you want to combine multiple visibility attributes, then the element is only shown if ALL visibility attributes are matching.
Example:
You have an element with two visibility attributes: ift-visible-weekdays="Monday-Friday" and ift-visible-hours="09:00am - 05:00pm". In this case, the element would only show from Monday to Friday between 9 AM and 5 PM, but not on Saturday and Sunday between 9 AM and 5 PM.
This attribute is optional
Add this attribute to an element which has another timed-visibility attribute applied to it.
If an element is hidden by default, and based on your time-visibility attributes the element should be visible, then by default the display value will be set to "block". If you want to change that display value (e.g. flex, inline-block, grid, etc.) then you can use this attribute.
Important: This attribute is not necessary, if your element is visible by default.
This attribute is optional
By default, this tool uses the timezone of the website visitor's browser. This means that two people viewing the website from different timezones might see different elements based on time-based visibility.
If you want the time-based visibility not to be based on the website visitor's browser timezone, but rather on a specified timezone, you can specify this setting. The timezone must be in the IANA format AREA/LOCATION.
Your browser's current IANA timezone is area/location. Check the following list for available timezones: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
Important: You can apply this attribute to a specific element that already has other time-visibility attributes, or you can apply it to a parent/wrapper element. Doing so will affect all time-based visibility elements within it. Therefore, if you want the timezone to apply to all time-based visibility elements on the page, simply add it to the Body element.
Copy and paste script
Copy the script above, and paste it into the before <head> tag code section of the page where you want to use the functionality.
Add attributes to elements
Add attributes to elements according to your desired timed visibility. Above is a list of attributes you can add.
Test on the live site
Since this is a Javascript solution, the functionality will only be visible on the live site, not inside the Webflow Designer.
Frequently asked tool questions
No, you don't have to be a user of the Inputflow Webflow App to use our free tools. You can use them independently of Inputflow or in combination with it.
Inputflow is a Webflow App to build multi-step forms with full design control. You can style & build your multi-step form in the Webflow Designer. Exactly how you want. Then connect your steps, add custom error messages and calculations.
Click here to install the App inside your Webflow account
In addition to the Inputflow App, we created a couple of free tools for the Webflow community to build better forms and websites. You can use these tools for your own projects and client projects for free, without signup.
Yes, you can use it on your client projects or your own projects.
No, you don't have to be a user of the Inputflow Webflow App to use our free tools. You can use them independently of Inputflow or in combination with it.
Inputflow is a Webflow App to build multi-step forms with full design control. You can style & build your multi-step form in the Webflow Designer. Exactly how you want. Then connect your steps, add custom error messages and calculations.
Click here to install the App inside your Webflow account
In addition to the Inputflow App, we created a couple of free tools for the Webflow community to build better forms and websites. You can use these tools for your own projects and client projects for free, without signup.
Yes, you can use it on your client projects or your own projects.
Start building your own multi-step form
Start building your own multi-step form