Using with date_popup Form API element

Pop-up calendar widget for Date fields is not the only thing provided by the Date Popup module. It actually defines new form element first and then uses it when defines Pop-up calendar widget.

Form API in Drupal 8

The Drupal 8 Form API is largely similar to the Drupal 7 Form API. The forms are still represented with nested render array structures and there is a separate validation and submission step. There are some new (HTML 5) elements available and the integration of these components into the rest of the Drupal system changed a bit.

In Drupal 8, Forms are defined by implementing the \Drupal\Core\Form\FormInterface and the basic workflow of a form is defined by buildForm, validateForm, and submitForm methods on the interface.

New (HTML 5) elements

Check out system_element_info() for all the core provided elements. There are new HTML 5 elements like '#type' => 'tel', '#type' => 'email', '#type' => 'number', '#type' => 'date', '#type' => 'url', '#type' => 'search', '#type' => 'range', etc. Using these elements as opposed to requesting data in plain textfields is preferable because devices can pull up the proper input methods for them, such as when a telephone number is requested, the dialpad would show up on a device.

Comparison of Form Building Modules

Drupal has a lot of modules aimed at helping site builders and users add forms to their sites. What follows is a rough comparison of 4 of them. If there are any I've missed, please add them.


Webform is a module designed to allow you to add custom forms to the front-end of your site. Each form is stored against a node, so you add new forms to your site as if you were adding content. It's useful for things like Survey websites or just where you want a couple of forms that differ from the standard contact form.


  • Webform has been around for a long time, its very well established and has a big following.
  • Webform can make a wide variety of forms with lots of different elements available.
  • Webforms inherit all the cool access stuff that nodes have.


  • Webform submissions are stored in their own custom way - not using any of the standard drupal API's.
  • Drupal 7 has lots of cool Field Types available in contrib that webform cannot utilise.
  • There is little or no integration with alot of modules because the submissions do not use entities.
  • Webform cannot (without some magic) be used to edit nodes or comments.

Using form_alter to change the default value of a date

If you need to set a default value for an exposed views filter, you can do it like this:

this example code will set a ranged date to have a default value of -30 days for the start date, and today for the end date

Forms API - Modify Forms with hook_form_alter()

Drupal 7 forms that modules create can be changed by other modules and even themes with the help of Drupal FAPI hooks system. See Drupal 7 Hooks for a list of Drupal system hooks. The hook that allows to edit the existing forms is hook_form_alter. See the hook_form_alter() documentation at Drupal API site.

The syntax is hook_form_alter(&$form, &$form_state, $form_id).

In this hook call, $form is the array of form elements (see Drupal 7 Form API Overview article). $form_state has the keyed array of the state of the form, that can change on form submission or in multi-step forms. And an important parameter is $form_id, which has in it the unique name of the form. Drupal core will cycle through all the registered forms, passing their initial array, state, and unique id to this hook function.


Creating a builder function to generate a form

Form workflow usually follows these stages:

  1. Declaration of a form and its elements in a function
  2. Modification of existing forms with the FAPI hook system
  3. Theming of forms
  4. Form validation and submission

Forms are represented as arrays in form builder functions. Each item within the $form array on corresponds either to a form element (an input or other HTML on the rendered form) or an element property (meta-data used by FAPI during the rendering or processing of elements). A property has a key name that begins with a "#", while an element does not.


In this example, we have a module named mymodule and we want to declare a form builder function in it. The form declaration function receives at least two parameters:

  • $form - An array of elements and element properties
  • &$form_state - An array containing information about the current state of this form while a user is filling it out and submitting it. Importantly, this includes the values that the user may have entered into the form.

This simple form has a text field for the user name and a submit button.

* Create a new form


Subscribe with RSS Subscribe to RSS - form api