How to Customize the Date Smart Tag

Introduction

Would you like to customize the Date Smart Tag? WPForms already has a built-in Smart Tag that will display the current date, but did you know you can actually define the format of this date? In this tutorial, we’re going to show you how to use Smart Tags inside field labels as well as customize the Date Smart Tag.

Creating the form

For a more in-depth tutorial on how to use Smart Tags and what default Smart Tags are already built-in for you to use, please review this documentation.

For the purpose of this documentation, we’re going to create a form that has a Checkbox field which will ask the user to agree to the terms and conditions while placing a current date inside the label of the field using a pre-defined WPForms Smart Tag.

To begin, create a new form and add your fields. We’re going to be creating a digital book upload form so we’ll have a Checkbox field that will be required asking them to agree to the terms and conditions before uploading the eBook.

If you need any assistance in how to create a form, please check out this documentation.

Once you create your form and add your Checkbox field, inside the label for this field, you’re going to add this Smart Tag.

{date format="m/d/Y"}

Add the checkbox form field to your form and inside the field label add the date smart tag

Using Smart Tags inside field labels

In order to use Smart Tags inside field labels, we have to add a small code snippet. Copy and paste this snippet to your site.

If you’re not sure how or where to add custom snippets to your site, please check out this tutorial.

/**
 * Using Smart Tags in Checkbox field labels.
 *
 * @link https://wpforms.com/developers/how-to-customize-date-format-in-the-date-smart-tag/
 */
 
function wpf_dev_checkbox_choices_process_smarttags( $field, $deprecated, $form_data ) {

    foreach ( $field[ 'choices' ] as $key => $choice ) {

        if ( ! empty( $choice[ 'label' ] ) ) {

            $field[ 'choices' ][ $key ][ 'label' ] = apply_filters( 'wpforms_process_smart_tags', $choice[ 'label' ], $form_data );

        }

    }

    return $field;
}
add_filter( 'wpforms_checkbox_field_display', 'wpf_dev_checkbox_choices_process_smarttags', 10, 3 );

This snippet will allow us to use any Smart Tag inside any form on any Checkbox form field label.

For more information on this, please check out this tutorial.

Customizing the format

By default, when you use the Date Smart Tag, the format will automatically be applied as m/d/Y. PHP requires a format so it will know how to display the date.

Let’s start by explaining the m/d/Y format. The month (m/) will be displayed in a numerical format with leading zeros (01-12), and the day (d/) is also displayed in this same format with leading zeros (01-31) and finally the year (Y)will be displayed in a full numerical representation with four digits.

Let us now change the format of the date Smart Tag.

{date format="Y-m-d H:i:s"}

With this format, we’re now placing the year first, followed by the month and day but also we are including the time (H:i:s) as well inside the label.

By altering the default format of the date you can pick and choose the date format you want for your smart tag per form and even per field

Once you’ve selected your PHP date format from the official PHP approved format list, you can easily customize the Date Smart Tag anywhere and everywhere on your forms.

Would you like to create a Smart Tag for a unique ID so that you can use it in other areas of your form? Take a look at our article on How to Create a Unique ID for Each Form Entry.

Filter Reference: wpforms_checkbox_field_display

FAQ

Q: What if I wanted to add 2 days to my Smart Tag Date?

A: No worries, we’ve got you covered! To achieve this, use this snippet.

/**
 * Add 2 days to the Date Smart Tag
 *
 * @link https://wpforms.com/developers/how-to-customize-date-format-in-the-date-smart-tag/
 */

function wpf_dev_process_smarttag_date_plus_two( $content, $tag ) {
  
    // Only run if it is our desired tag.
    if ( 'current_date_plus_two' === $tag ) {
         
        date_default_timezone_set( 'US/Eastern' );
         
        $link = date( 'Y-m-d', strtotime( '+2 days' ) ); // Output current date plus 2 days
         
        // Replace the tag with our link.
        $content = str_replace( '{current_date_plus_two}', $link, $content );
    }
  
    return $content;
}
  
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag_date_plus_two', 10, 2 );

You can just adjust the +2 days to be whatever you’d like and remember to set the date_default_timezone_set.