Use these Drupal modules to make your website accessible to everyone.
As website accessibility continues to be a growing concern, website owners and developers need to ensure that their websites comply with the Americans with Disabilities Act…
Did you know “form fatigue” is a thing?! It’s a feeling of exhaustion when you have to fill out too many forms. But forms are an integral part of a website and no site owner can (or should) do without them. So how can you make sure your website helps reduce form fatigue? Easy! Keep it simple and short, offer clear and concise instructions, break up long forms, and use autofill. Most important of all, make sure you’re offering a breezy user experience to fill them out.
Drupal’s Form API offers a way to create easily customizable and themeable forms to blend well with any website. It provides developers with a set of functions and APIs to create, validate and process forms in Drupal. Take a deeper dive into the amazing Drupal Form API and find out how you can implement it in your next project.
As you know, forms are a crucial part of every website because they allow users to interact with them by submitting data. Using Drupal's Form API, developers can create unique forms for various purposes, including contact, login, and registration. A few reasons why you should consider Form API:
There are various kinds of forms that are often used in Drupal. Each contains a base class that you can extend in a unique module of your own design.
First, identify the type of form you need to build:
Any form that has FormBase in its hierarchy must implement the following methods since FormBase implements FormInterface.
To create a generic custom form with the Form API, you'll need to define a function that returns an array of form elements inside buildForm(). The key of each element is the name of the form element, and the value is an array of properties that define the element. For example, to create a text field, you would define an element like this:
$form['emp_name'] = [
'#type' => 'textfield',
'#title' => $this->t('Enter Name'),
'#required' => TRUE,
];
Form API also provides a way to validate user input. You can add validation functions to your form definition that will be called when the form is submitted. If a validation function returns an error message, the form submission will be prevented and the error message will be displayed to the user.
To add a validation function, you will need to implement a validateForm().
When a form is submitted, Drupal calls a submission function that you define. The submission function can perform any necessary processing of the form data, such as saving it to the database
To define a submission function, you will need to implement a submitForm()
To integrate this form into a Drupal site's URI structure, use a route like the following:
example.form:
path: '/example-form'
defaults:
_title: 'Example form'
_form: '\Drupal\example\Form\ExampleForm'
requirements:
_permission: 'access content'
The _form key tells the routing system that the provided class name is a form class to be instantiated and handled as a form.
Follow these easy step to begin the process of creating a custom form with Drupal’s Form API:
Here is a complete example of an employee registration form:
Folder structure:
1. employee_registration.info.yml
name: Employee Registration Form
type: module
description: Custom module for implementing custom employee registration form.
core_version_requirement: ^9 || ^10
package: Custom
2. src/Form/Registration.php
<?php
namespace Drupal\employee_registration\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Implements a custom form.
*/
class Registration extends FormBase {
/**
* {@inheritdoc}
*/
public function getFormId() {
return 'employee_registration_form';
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state) {
$form['emp_name'] = [
'#type' => 'textfield',
'#title' => $this->t('Enter Name'),
'#required' => TRUE,
];
$form['emp_no'] = [
'#type' => 'textfield',
'#title' => $this->t('Enter Employee Number'),
'#required' => TRUE,
];
$form['emp_mail'] = [
'#type' => 'email',
'#title' => $this->t('Enter Email ID'),
'#required' => TRUE,
];
$form['emp_phone'] = [
'#type' => 'tel',
'#title' => $this->t('Enter Contact Number'),
];
$form['emp_dob'] = [
'#type' => 'date',
'#title' => $this->t('Enter DOB'),
'#required' => TRUE,
];
$form['emp_gender'] = [
'#type' => 'select',
'#title' => $this->t('Select Gender'),
'#options' => [
'Male' => $this->t('Male'),
'Female' => $this->t('Female'),
'Other' => $this->t('Other'),
],
];
$form['submit'] = [
'#type' => 'submit',
'#value' => $this->t('Save'),
'#button_type' => 'primary',
];
return $form;
}
/**
* {@inheritdoc}
*/
public function validateForm(array &$form, FormStateInterface $form_state) {
if (strlen($form_state->getValue('emp_phone')) < 10) {
$form_state->setErrorByName('emp_phone', $this->t('The phone number is too short. Please enter a full phone number.'));
}
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state) {
// Processing form data.
$this->messenger()->addMessage($this->t("Employee Registration Done!!"));
foreach ($form_state->getValues() as $key => $value) {
$this->messenger()->addMessage($key . ': ' . $value);
}
}
}
3. employee_registration.routing.yml
employee_registration.form:
path: '/registration-form'
defaults:
_title: 'Employee Registration'
_form: '\Drupal\employee_registration\Form\Registration'
requirements:
_permission: 'access content'
Result:
Form API lets you create complex and customized forms with validation and processing functions in Drupal. When you use Form API, you can be sure that your forms are consistent and easy to use for your users. Looking for a Drupal agency to help you build a user-friendly experience for your audience? Talk to our Drupal experts today!
Author: Nitin Lama
Meet Nitin Lama, a backend Drupal Developer at Specbee who believes progressing one day at a time could go a long way. Swimming is his hobby, but he’s a huge music lover and enjoys producing and exploring new music. Music and cooking act as therapy for him. Space and tech are his best conversation starters when meeting new people. If dreams came true, he’d be traveling to a Voyager station!
Email Address Subscribe Leave this field blank Drupal Drupal Module Drupal Development Drupal PlanetLeave us a Comment
Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology
ExploreA Drupal powered multi-site, multi-lingual platform to enable a unified user experience at SEMI
ExploreGreat Southern Homes, one of the fastest growing home builders in the US, sees greater results with Drupal
Explore View all Case StudiesToday we are talking about Open Source in K-12 Education with Stu Keroff.
For show notes visit: www.talkingDrupal.com/394
TopicsStu Keroff - @studoeslinux
HostsNic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Kat Shaw - drupal.org/u/katannshaw @katannshaw
MOTW CorrespondentMartin Anderson-Clutz - @mandclu H5P Provides a toolset for adding HTML5 rich content to your site: interactive videos, presentations, quizzes, games, and more.
Journalism, in essence, is the job of painting a picture in the readers’ minds. Unlike actual painting, we don’t use colours. Instead, languages, words and letters fill our palette. We use it to report the facts that lie before us to a broader audience. The process of creating a news story is indeed complex. It requires us to go through layers of verification, self-doubt and delivering near-perfect write-ups within the deadline. If the work fails to entice pleasure or provide enjoyment, it becomes a meaningless burden.
At TheDropTimes (TDT), our journalistic work revolves around Drupal. Day in and day out, we fix our eyes on Drupal-related developments around the globe. We know there is a thriving community waiting for more news about Drupal. That’s the first stimulus of pleasure in reporting—Drupal is not just software. Drupal is a microcosm of human endeavour. The Free and Open-Source platform stands in the middle, surrounded by an ecosystem relentlessly working to improve it. The freedom that Drupal hands down to its users is yet another pleasure trigger. Who in the world dislikes space? Liberty opens the skies and lets magic rain. The same is happening with Drupal. In short, though reflecting upon the jargon-rich Drupal is a challenge for the soft-hearted, it gives us meaningful pleasure—the pleasure of reporting Drupal.
Check out the hand-picked stories from the past week:
To start with, TDT has launched a new series of blogs on its behind-the-scene tales. The first of the series, written by Vimal Joseph, throws light on the technology that powers TDT. Read how Drupal and Thunder distribution light up TheDropTimes.
Dries Buytaert, Drupal’s founder, has published a new blog post about the evolution of Drupal’s composability. This article introduces the readers to Dries’ blog and points out how Drupal will provide an ‘App-Store’ like experience. Dries’ earlier blog post was a myth-buster questioning the assertion that Static Site generators are faster than Content Management Systems.
To know about the automation of an e-commerce order on Drupal, read our take on the blog published by ComputerMinds. This article will be helpful for anyone interested in ‘Microsites’ developed by LocalGov Drupal and its ability to handle multiple sites. Also, see why Danny Bluestone thinks Drupal is the best enterprise choice.
The Drop Times is now a media partner for upcoming events like the Stanford WebCamp, Drupal Developer Days, Vienna and DrupalCamp Ruhr.
Drupal4Gov is hosting an in-person half-day event on the 18th. DrupalJam has opened the call for speakers. Drupal Diversity and Inclusion Camp dates are declared. The Melbourne Drupal Group is organizing another meetup on 13 April 2023. Florida DrupalCamp organizers have announced the dates for the 2024 edition of the camp.
Please read the article about Drupal Associations’ call to find community at DrupalCon Pittsburgh. Drupal Swag Shop is pursuing promoting sustainability through its products.
SpecBee’s new blog post offers readers a comprehensive guide to understanding display modes and their applications in Drupal. To clear any doubts regarding adding a JavaScript Library to an Emulsify component, refer to this tutorial. Any Drupal developer who wants to take their skills to the next level must not miss this online training scheduled on the 11th. A11yTalks has announced its upcoming meetup on 12 April 2023 at 6:00 PM EDT. The topic of the meetup is ‘Shifting Left: How CMS Accessibility Can Help.’
Global digital transformation services and product engineering company, EPAM, has been named a Top IT Sourcing Vendor in the Nordics by the independent research organization Whitelane Research. The Australian Web Industry Association has declared the finalists for the Australian Web Awards 2023. Morpht and other Drupal-based service providers have secured a place in the final list. Read the article to know more about the awards and the finalists.
A group of developers seeks responses from the Drupal community regarding the Field UI. Don’t forget to fill it out and help them improve Field UI’s performance.
Sincerely,
Thomas Alias K.
Sub-Editor