Age Verification -- Shortcode: Age Verification Form

Overview

The  Age Verification Modals (AVM) plugin extension registers an Age Verification Form shortcode with WordPress ( tag: [pum_age_form] ). The shortcode can be set from the Popup menu with the Popup Maker shortcode button. 

The shortcode creates either a set of 'entry / exit' buttons or a birthdate form to display inside a popup.  Plugin users must provide their own content to the popup to give the forms context and meaning.  The shortcode works in tandem with the Age Verification and Failed Age Redirect triggers provided by the AVM plugin. 

This document describes how to add, edit, and delete the shortcode. The shortcode options are set in the Age Verification Form box when adding or editing the shortcode.  

Article Contents

• The Age Verification Form Shortcode
  
  • Add Shortcode
  • Edit Shortcode
  • Delete Shortcode
• Set Shortcode in the 'Age Verification Form' Box
  • 'General' option settings tab
    • 1.  Type
    • 2.  Required Age
    • 3.  Enable lockout?
    • 4.  Lockout Try Count
    • 5.  Exit URL
  • 'Appearance' option settings tab
    • 1.  Form Layout
    • 2.  Form Alignment
    • 3.  Disable HTML5 Date Input
    • 4.  Disable Labels
  • 'Labels' option settings tab
    • 1.  Enter Button
    • 2.  Exit Button
    • 3.  Birth Date
    • 4.  Month
    • 5.  Day
    • 6.  Year

The Age Verification Form Shortcode

Add Shortcode

1)  From the WordPress Admin, open the Popup Editor by selecting either the 'Add New' button, or an existing popup from the 'All Popups' page. 

[ Back to top ]

Edit Shortcode

• In the Editor ('Visual Tab'), select the shortcode form to focus on it in the Editor.  In the example above, the shortcode displays a set of inline buttons labeled 'Enter / 'Exit'. The alternate option is a birth date form that accepts data input as 'MMDDYYYY'. 
• Select the 'pencil' icon to reopen the Age Verification Form box for editing. 
• In the Age Verification Form box, select the 'Save' button to preserve changes to the shortcode options.
• In the 'Publish' box (to the right of the Editor), select 'Update' to save changes to the popup.

[ Back to top ]

Delete Shortcode

• In the Editor ('Visual Tab'), select the shortcode form to focus on it in the Editor. 
• Select the 'X' icon to remove the shortcode. 
• In the 'Publish' box (to the right of the Editor), select 'Update' to save changes to the popup.

[ Back to top ]

Set Shortcode in the 'Age Verification Form' Box

'General' option settings tab

1.  'Type' (menu option) -- The shortcode provides 2 types of age verification methods; a set of 'Enter / Exit' buttons, or a 'Birthdate' form.  Plugin default: 'Exit / Enter'. 

The 'Enter' button allows direct entry to the site, while the 'Exit' button redirects to an 'Exit URL'.  The button text can be edited. 

The 'Birthdate' option displays a required field to enter a date of birth. The visitor input is compared to the value preset in the 'Required Age' field. If the entered birthdate is equal to or greater than the 'Required Age', the visitor is shown the site. If the birthdate is less than the 'Required Age', the visitor is redirected to an Exit URL. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--The type of age verification to display within the popup.-->
<!--Options include 'Enter/Exit' and 'Birthdate'.-->

[ pum_age_form type="enterexit | birthdate" ]

[ Back to top ]

2.  'Required Age' (integer) -- The age required to enter the web site.  When the 'Type' option is set to 'Birthdate', the shortcode checks that the visitor's 'Required Age' is equal to or greater than the set value.  Plugin default: 21.

Shortcode attributes (visible from the editor 'Text' tab):

<!--The minimum age required to enter the web site. An integer value.-->

[ pum_age_form required_age="{integer}" ]

3.  'Enable lockout?' (checkbox) -- This feature applies only to the 'Birthdate' option described above.

When the checkbox is unchecked, a visitor is allowed only one attempt to submit their birthdate. If the visitor's age is less than the 'Required Age', they will be redirected to the 'Exit URL'.  

When the checkbox is checked, a visitor may submit their birth date up to the number of attempts set in the 'Lockout Try Count' field.  Default: 'unchecked' (visitor allowed one attempt to submit their birthdate).

Shortcode attributes (visible from the editor 'Text' tab):

<!--Enable site lockout when the 'Birthdate' option is selected.--> 
<!--Plugin default: 'unchecked' (only one attempt allowed to--> 
<!--submit birth date that meets 'Required Age')-->

[ pum_age_form lockout_enabled ]

[ Back to top ]

4.  'Lockout Try Count' (integer) --The number of verification attempts allowed before a visitor is locked out of the site. 'Enable Lockout?' checkbox must be checked to use this feature. Default value: 3.

Shortcode attributes (visible from the editor 'Text' tab):

<!--Age verification attempt lockout count. Integer value.-->
<!--Feature applies only when 'Birthdate' type is selected.--> 
<!--'Enable Lockout?' checkbox must be checked to use this feature-->

[ pum_age_form lockout_count="{integer}" ]

5.  Exit URL (string) -- Enter a URL to redirect a visitor to if they select the 'Exit' button.  Applies to both 'Enter / Exit' and 'Birthdate' type.  Default URL: http://www.disney.com.

Shortcode attributes (visible from the editor 'Text' tab):

<!--Redirection URL. Applies to 'Enter / Exit' and 'Birthdate' type.-->
<!--Default URL: "http://www.disney.com"-->  

[ pum_age_form exit_url="{http://www.disney.com}" ]

[ Back to top ]

'Appearance' option settings tab

1.  Form Layout (menu option) -- This option positions the 'Enter / Exit' (EE) buttons and 'Birthdate' (BD) field both horizontally and vertically within the popup. Menu options include: 

• Standard; 
• Vertical; 
• Inline; and 
• Stacked. 

Plugin default: Standard.

The following table summarizes the button and field positions within the popup. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Layout the form in either horizontal or vertical position.-->
<!--Plugin default: 'Standard'. No shortcode attribute is set when--> 
<!--'Standard' is selected.-->

[ pum_age_form form_layout="vertical | inline | stacked" ]

[ Back to top ]

2.  Form Alignment (menu option) -- This option positions the 'Enter / Exit' buttons and 'Birthdate' field within the form layout set above.  Menu options include: Center; Left; Right.  Plugin default: Center.

Note:  As of version 1.2.4 of the AVM plugin, the Birthdate field does not reposition itself in the Popup Editor when form alignment is set to either 'left' or 'right'. However, the field does render properly when the popup is viewed on the front end.    

Shortcode attributes (visible from the editor 'Text' tab):

<!--Align the form within the previously selected position.-->
<!--Plugin default: 'Center'-->

[ pum_age_form form_alignment="center | left | right"]

[ Back to top ]

3.  Disable HTML 5 Date Input (checkbox) -- This feature applies only to the 'Birthdate' type option chosen from the 'General' option tab.

Some browsers do not support the HTML5 date input into form fields (Internet Explorer, IE Mobile, Safari, older versions of Firefox).  This feature disables the HTML5 date input for browsers that support this feature.  Default: 'unchecked'; feature is enabled by default.

Figure 3a.  The 'Birthdate' field type as it appears in the Popup Editor. Use this field type for browsers that support the HTML5 date input  (checkbox = 'unchecked' ).

Figure 3b.   The 'Birthdate' field type as it appears in the Popup Editor. Use this field type for browsers that do not support the HTML5 date input (checkbox =  'checked'  ).

Shortcode attributes (visible from the editor 'Text' tab):

<!--Disable the date input field for browsers that do not support-->
<!--HTML5 date input.-->
<!--Plugin default: 'unchecked'. 
<!--Attribute appears in shortcode when checkbox='checked'.-->

[ pum_age_form disable_date_input ]

[ Back to top ]

4.  Disable Labels ( checkbox ) -- This feature applies only to the 'Birthdate' type option chosen from the 'General' option tab.  'Enter / Exit' type buttons do not include any field labels.

Disables the display of 'Birthdate' field labels.  Default: 'unchecked'; labels are displayed by default.

Note:   As of version 1.2.4 of the AVM plugin, the Birthdate field labels continue to appear in the Popup Editor after the 'Disable Labels' checkbox is checked.  However, the labels do not display when the popup is viewed on the front end. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Disables 'Birthdate' field labels when selected.-->
<!--Plugin default: 'unchecked'; labels are displayed.-->
<!--Attribute appears in shortcode when checkbox='checked'.-->

[ pum_age_form disable_labels ]

[ Back to top ]

'Labels' option settings tab

A.  Type='Enter / Exit' or 'Birthdate' on 'General' option tab.

1.  Enter Button ( field ) -- Label for the enter button.  This button label is used for both the 'Enter' button (Type = 'Enter / Exit' ) and the birth date submit button. Plugin default: 'Enter'. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Customized label for the 'Enter' button.-->
<!--Applies to both type="enterexit" and type="birthdate"-->
<!--Plugin default label: 'Enter'.-->
<!--Shortcode attribute appears only when a custom label is entered.-->

[ pum_age_form label_enter="{custom-label}" ]

[ Back to top ]

B.  Type='Enter / Exit' only on the 'General' option tab.

2.  Exit Button ( field ) -- Label for the exit button.  This custom button label applies when 'Type= 'Enter / Exit' is set on the 'General' option tab.  Plugin default: 'Exit'. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Customized label for the 'Exit' button.-->
<!--Applies when type="enterexit".-->
<!--Plugin default label: 'Exit'.-->
<!--Shortcode attribute is set only when a custom label is entered.-->

[ pum_age_form label_exit="{custom-label}" ]

[ Back to top ]

C.  Type='Birthdate' only on the 'General' option tab.

3.  Birth Date ( field ) -- Label for the single birthdate field.  Appears above the birth date field.  The 'Disable HTML 5 Date Input? option on the 'Appearance' tab must be unchecked to render a custom label.  Plugin default label: 'Please enter your birth date.'

Shortcode attributes (visible from the editor 'Text' tab):

<!--Customized label for the 'Birthdate' field type.-->
<!--Plugin default label: 'Please enter your birth date.'
<!--Shortcode attribute is set only when a custom label is entered.-->

[ pum_age_form label_birthdate="{custom-label}" ]

4.  Month ( field ) -- Label for the month field.  The 'Disable HTML 5 Date Input? option on the 'Appearance' tab must be checked.  Plugin default: Month.

Note:  As of version 1.2.4 of the AVM plugin, the custom field labels for the 'Month' attribute do not appear in the Popup Editor. However, the custom label does display in the popup on the front end. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Shortcode attribute is set only when a custom label is entered.-->
<!--'HTML 5 Date Input?' checkbox on 'Appearance' tab must be checked.'
<!--Plugin default: Month.-->
<!--Shortcode attribute is set only when a custom label is entered.-->

[ pum_age_form label_month="{custom-label}" ]

[ Back to top ]

5.  Day ( field ) -- Label for the day field.  The 'Disable HTML 5 Date Input? option on the 'Appearance' tab must be checked.  Plugin default: Day.

Note:  As of version 1.2.4 of the AVM plugin, the custom field labels for the 'Day' attribute do not appear in the Popup Editor. However, the custom label does display in the popup on the front end. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Shortcode attribute is set only when a custom label is entered.-->
<!--'HTML 5 Date Input?' checkbox on 'Appearance' tab must be checked.'
<!--Plugin default: Day.-->
<!--Shortcode attribute is set only when a custom label is entered.-->

[ pum_age_form label_day="{custom-label}" ]

6.  Year ( field ) -- Label for the year field.  The 'Disable HTML 5 Date Input? option on the 'Appearance' tab must be checked.  Plugin default: Year.

Note:  As of version 1.2.4 of the AVM plugin, the custom field labels for the 'Year' attribute do not appear in the Popup Editor. However, the custom label does display in the popup on the front end. 

Shortcode attributes (visible from the editor 'Text' tab):

<!--Shortcode attribute is set only when custom label entered.-->
<!--'HTML 5 Date Input?' checkbox on 'Appearance' tab must be checked.'
<!--Plugin default: Year.-->
<!--Shortcode attribute is set only when a custom label is entered.-->

[ pum_age_form label_year="{custom-label}" ]

[ Back to top ]