Website themes are pre-made designs for website content management systems or “CMS” like Drupal, WordPress, and Joomla. If you are looking for a secure, flexible, and scalable Enterprise-ready CMS, Drupal is the best choice. With the 20 top Drupal themes we researched for you it will be easy to get started with Drupal 9. 

 

Using a good Drupal theme as a starting point can give your project a head start. Some Drupal themes are highly opinionated and designed for specific use cases like e-commerce webshops or magazine-style websites. Other themes in our top 20 are less opinionated and architected more like a framework. 

Here are the best Drupal 9 themes:

 

1. DXPR Theme

Time is of the essence. With DXPR Theme, you will build powerful marketing content faster. The DXPR Settings Dashboard gives you every customization you need to create a website that exceeds expectations. DXPR theme is installed on more than 2000 sites, and you’re going to love it too.

 

DXPR Theme is the fastest and easy-to-use low-code theme that Drupal site builders deserve! Furthermore, thanks to the tight integration with the DXPR Drupal Layout Builder, this theme can be part of a state-of-the-art digital experience platform. 

 

This theme deserves the #1 spot because it has the highest number of customization options and features, and that’s how this theme will save you time and money. DXPR Theme is really more of a low-code theming platform than a theme. It’s based on Bootstrap 3, but a Bootstrap 4 update is coming in Q1 of 2022. 

DXPR Theme (Free)

Framework: Bootstrap 3 (Bootstrap 4 update coming soon)

 

2. Tico Theme

Tico theme is a professional and modern business Drupal theme with an eye-catching look. Most suitable for any website for personal or business use. Tico is simple to use and highly customizable. It’s designed with user-friendliness in mind. Tico sports a distinctly unique, modern look. It has a super powerful theme control panel with many useful options and tools to manage your site: Block builder, customize, sliders, etc. Tico theme is built with Gavias Block Builder. The drag-and-drop builder allows you to create professional blocks in just some simple clicks. Besides, with over 19 widgets integrated, building content has never been this easy. Tico theme uses the latest web technologies: Drupal 9.x, Bootstrap 3, SASS, HTML5, CSS3, Font Awesome 4

Tico theme (48,- USD)

Framework: Bootstrap 3

 

3. TheMag Drupal Theme

TheMAG Drupal theme lets you create a modern magazine website with a lot of ease. It is excellent for sites that want to rake in ad revenue or profit from content. This bestseller theme is perfect for blogging, journalism, or entertainment sites.

TheMAG comes with lots of features and is fully compatible with Drupal Thunder distribution. It utilizes and extends the powerful and unique Drupal Layout Builder that lets you create complex layouts and pages with a few clicks.

Video Review

TheMag Theme ($54,- USD) 

Framework: Bootstrap 4

 

4. Jango Theme

 Jango is an ever-growing multipurpose theme for Drupal 7 and 9. It is powered by visual shortcodes and a layout builder.

Jango is a flexible theme that will simply be able to support every site. Such as portfolios, blogs, corporate, product showcases, landing pages, and many others. By utilizing 300+ components, you can mix and match any element together.

The Jango theme was fired and designed with creative and modern web trends. It provides the most reliable, smooth, clean, and intuitive user experience. Jango is bundled with a completely responsive design and is suitable for all popular internet browsers and devices. Jango is genuinely a theme prepared to launch upon buying.

Video overview

Jango Theme ($59- USD)

Framework: Bootstrap 3

 

5. Pivot Theme

Pivot is the most sold theme on ThemeForest. Pivot is a fully featured multi-proposed, responsive, and Bootstrap-based HTML5 Theme, which is suited for Business, Education, Hospitals, Corporate, and Portfolio type websites. 

Pivot includes the variant page builder through which you can build refreshing and confident appealing pages. It provides pre-build necessary pages like login, error, pages, and coming soon pages. 

 

Here are some best features.

• MailChimp & Campaign Monitor Integration

• Contact form with different variations and validation.

• 14 Color schemes, fewer files are included for each scheme

• Social media sites feed.

• Variety of pages for login, Errors, Coming soon, etc.

Pivot Theme ($48- USD)

Framework: Bootstrap 3

 

6. Progressive Theme

Progressive is a visual shortcode-based theme. Most suitable for those who need a content-full website. This is available for both Drupal 7 and 9 versions. It provides 200+ interactive web elements, and 50+ pre-build stunning pages, usable for a variety of businesses. Livicone and mega sliders are included for free. You can create animated layer-based sliders.

The progressive theme has support for e-commerce and is the best choice for online stores. It is using Ubercart for Drupal 7 and Drupal Commerce for Drupal 9. You can sell your services, and products and it is also comfortable for paid membership websites.  

Progressive Theme ($59- USD)

Framework: Bootstrap 3

 

7. Inston Theme

Inston is a new, modern, and professional business theme. Inston is a super Drupal 9 theme specially built for freelancers, designers, artists, and all types of agencies. The template is ideal for showcasing your work or projects in the best manner possible. In the Inston package, five different homepages are available, and easily customizable.

You can modify it with a few clicks to fit according to your needs. Inston is a great candidate for any kind of website. You can either use it for personal or business purposes. Inston is very easy to use and highly customizable. Designed with user-friendliness in mind. Inston supports a unique, modern look. This Drupal theme has a powerful control panel with sets of useful options and tools to manage your website. 

 

The Inston theme is built with Gavias content builder. This basic drag-and-drop builder allows you to create a professional block in just a few clicks. Besides, with over many widgets, integrated, building content is never more natural. Inston theme applies the latest web technologies Drupal 9, THML 5, CSS 3, Bootstrap 4, SASS, and Font Awesome 5.

Inston Theme (43,- USD)

Framework: Bootstrap 4

 

8. EM Theme

 Em is a premium theme for Drupal 9, using thunder for publishing with an outstanding design and impressive features. Em is ideally suited for blogs, magazines, and news publishing websites. Making a content-rich website responsive for all devices is difficult. On the EM theme for Drupal 9, your site will look beautiful on every device.

 

You can use predefined layouts or simply drag, drop, and arrange everything to customize it down to your own taste. You can use different designs for each of your posts. Choose from 5 predefined layouts or create your own with only a few clicks. It gives a unique accent to the articles and makes them stand out with different styles. EM has support to reuse the existing media files and libraries like images and videos that you have previously used on your site. You can also start your E-shop on your website using EM. It is fully compatible with Drupal commerce.

EM Theme (59,- USD)

Framework: Bootstrap 4

 

9. Enar Drupal Theme

 Enar is a modern, responsive, and Multi-Purpose Drupal 9 Theme. It is Created with the Bootstrap framework. Enar has great designs for the website of Creative Corporate, corporations, company profiles, personal portfolios, and more. You can create an impressive website or blog in minutes. Everything is possible with Enar.

It includes 10+ ready-to-use homepages with awesome design, unique concepts, scalable, responsive, amazing flexibility, premium plugins, useful shortcodes & many More.

Enar Drupal theme (58,- USD)

Framework: Bootstrap 3

 

10. Maarif Drupal Theme

Maarif is a fully responsive, unique & modern-designed Drupal 9 Theme. This theme can be used for car servicing, car repairing, car washing, auto shopping, mechanic shop, batteries shop, tire/wheel shops, and multipurpose businesses. The code is well-commented, so one can find it very easy to customize. It also includes detailed documentation where everything is described how to customize each template with screenshots. The developer tried to give an attractive look to this theme to gather more traffic on your website.

Maarif Drupal Theme (43,- USD)

Framework: Bootstrap 4

 

11. Pillar Theme

 Pillar is a rugged, responsive multipurpose Drupal 9 theme built with Bootstrap. Pillar embeds reusable HTML and modular CSS first, blending modern styling with clean markup everywhere in each template in the pack. take your startup business website to the next level, show off your one-page portfolio with smooth parallax, boost your blog, and amp up your multi-page corporate or mobile app website. The paragraph builder takes the pain out of building a website. It has an exclusive page builder to save time. Pillar forms the ideal starting point for Drupal projects of any kind.

Pillar Theme (48,- USD)

Framework: Bootstrap 3

 

12. Kunco Theme

 Kunco is best for charity crowdfunding and fundraising websites. It is a clean, modern, super flexible, and responsive Drupal theme. It comes packed with powerful features and functions. Kunco theme is best suited for charity organizations such as NGO non-profit donation and fundraising organization websites.
Users can customize it with the facility to fit their requirements. Kunco theme is built with a famous and flexible Gavias builder. Astonishing drag-and-drop builder permits us to build professional blocks, and pages in a few simple clicks. Furthermore, it contains over 35+ widget integrations. Preparing and writing the content is not easy work to do. Kunco theme implemented and applied the latest technologies keeping in view the latest version of Drupal, which is Drupal 8.7.x, SASS, HTML5, CSS3, Font awesome.

Kunco Theme (56,- USD)

Framework: Bootstrap 3

 

13. Consulta Drupal Theme

Consulta Drupal theme is Perfect for Finance, Consulting & Business. Consulta is best suited for corporate websites like financial advisors, accountants, consulting firms, etc. This is a business template that is helpful for online presence for corporate businesses and financial firms. 

Consulta is fully responsive and retina ready, having 7+ headers and mega menus. It includes 11 pre-build readymade homepages you just have to include your own content. It has great SEO support (integration with most SEO Plugins)  

Consulta Drupal Theme (50,- USD)

Framework: Bootstrap 4

 

14. Facdori Theme

Facdori is the most reliable Drupal 9 Theme for industrial & factory businesses and companies. The theme is also ideal for construction, industry, architecture, engineering, manufacturing, building services, and other construction or industry-related services. The theme has its own super powerful theme control panel with many useful options and tools to manage your site: Block builder, customize, sliders, etc. Facdori Theme is built with Gavias Content Builder; the amazing drag-and-drop builder allows you to build professional blocks in a few clicks. Facdori theme applies the latest web technologies: Drupal 9.x, Bootstrap 4, SASS, HTML5, CSS3, Font Awesome 5.  

Facdori Drupal Theme (43,- USD)

Framework: Bootstrap 4

 

15. Rogan Theme

 Rogan is a multipurpose Drupal 9 theme for robust, eye-catching, and high-performance websites. The theme includes 7 home pages and 66 multipurpose demos and variants. This website has been developed using feature-rich plugin ideas and designs for a modern website. In this theme, the purchaser can find striking designs that best suit his needs. If you like Drupal and seeking a modern, clean, and flexible theme then Rogan is one of the topline recommendations for you to pick. This theme is adequate for corporate-level organizations, agencies, and any type of business. To display and share their company history, services, portfolio, and projects most creatively and professionally.

Rogan Drupal Theme (48,- USD)

Framework: Bootstrap 3 and 4

 

16. IBlue Drupal Theme

IBlue is a Responsive Drupal 9 clean and Professional Theme. It comes with over ten home pages and many more inner pages. It is decorated with awesome slideshows and color variations. Easy-to-customize and fully featured page design. This template is created for all sorts of businesses such as corporate, business, portfolios, hosting, creative, blogs, construction, and more.

Iblue Drupal Theme (49,- USD)

Framework: Bootstrap 3 and 4

 

17. Stack Drupal Theme

Stack is a completed multipurpose Drupal 9 theme built with reusability and modularity at the core. Combining contemporary styling with clean markup, Stack forms a good starting point for many types of websites. They are boasting over 140 demo pages, 270 customizable interface blocks, and a plethora of carefully crafted base elements. Quality and quantity in equal measure.

Using the Paragraph Builder Stack theme includes 240+ interface blocks in the huge collection of customizable elements. This modular system enables site builders to build their own blocks quickly and easily, leaving more time for layout and interface experimentation. Stack never uses inline styles, junk classes, or layout-specific stylesheets.

Stack Drupal Theme (48,- USD)

Framework: Bootstrap 3

 

18. BizReview Directory Listing Drupal Theme 

On ThemeForest, BizReview is the best-selling theme for directories. ThemeForest review team selected it as a featured theme. There are no hidden charges, and no extra fees to utilize features. All are available on the demo. You can create an interactive online directory portal with comprehensive searching, many map layers, attractive markers, and much more. A variety of tools are available for advertising. PayPal is also integrated into this theme. 

BizReview Theme (58, - USD)

Framework: Bootstrap 3

 

19. Wosh Theme

Wosh is a multipurpose Drupal 9 theme with e-commerce integration using Drupal commerce and featuring different product types, Product reviews, product attributes, carts, and all you need for your next online commerce shop.

 

This responsive e-commerce template built with bootstrap 4 will be ideal for any web developer to customize and make their own site become one of the top online shopping sites since this theme has a great combination of a clean, modern, minimalist design and many powerful features.

 

It has different header and footer options as well as unlimited color styles. Wosh is packed with various features and options to make a complete website, such as landing pages, sale promotions, sales products, etc. Whatever products you are selling, will catch your viewer’s interest at first sight.

Wosh Theme ($49- USD)

Framework: Bootstrap 4

 

20. VoltBuzz Drupal Theme

VoltBuzz- is a stylish and professional Drupal 9 theme for SEO and digital marketing. All kinds of digital marketing services Websites like SEO Services, online marketing, digital agencies, Social Media Marketing, and any other marketing strategies based agency can use it. This theme is easily customizable, fully responsive, and supported in all new browsers and devices. 

VoltBuzz Drupal theme (43,- USD)

Framework: Bootstrap 4

Should you use these Drupal themes on your next Drupal 9 project?

Here are some of the advantages of using one of the below top Drupal 9 themes:

• All top Drupal themes are SEO friendly

• You will get a great mobile responsive design with all Drupal themes

• Easily customize these themes with theme settings

• Theme owners provide updates to enhance website functionality and maintain browser compatibility so you won’t have to

For good measure we’ll also list a few disadvantages to consider:

• With feature-rich themes, you are increasing the technical debt in your project

• The more opinionated a theme is the harder it will be to customize the theme. For example, if your theme is an ecommerce theme it might be harder to make it work for a new magazine section on your website. Choose a less opinionated theme if you plan to grow your site beyond its initial scope.

Websites: if you build them, they will come. Well, only if you have high-quality content, that is.

When it comes to search engine optimization (SEO), gone are the days when you could “cheat” the system by strategically inserting keywords into titles and the openings of paragraphs. Today’s SEO is far smarter than it was a decade ago, as it now has an eye for high-quality content rather than simple keyword stuffing.

This is good news for content creators. Now more than ever, high-quality content means your audience will find you in the first results of any search engine. However, it does mean fiercer than ever competition for producing the best possible content on topics relevant to your business

New Content vs. Optimized Legacy Content

More than 50 billion pages of content currently exist on the Internet. Search engines are tasked with sorting through these billions of web pages to bring us the most relevant, useful results – in a fraction of a second. Pages are scanned for relevance and usability as well as expertise of sources and indeed freshness of the content.

Search engines reward websites that both produce regular new content and update old content. This doesn’t mean you can change one word in a post and expect to be rewarded for it. Google’s own Search Quality Rating Guidelines state that “a document having a relatively large amount of its content updated over time might be scored differently than a document having a relatively small amount of its content updated over time.”

At Evolving Web, we publish a new blog post every week on average. There are very good reasons to do this from an SEO standpoint. Search engines reward sites that regularly produce new content, as they are deemed to be more up-to-date and relevant.

This is not to say that you can simply flood the web with third-rate blog posts and expect to be rewarded; as previously mentioned, today’s SEO discriminates for quality. However, a content strategy that prioritizes regular new content is an excellent way to ensure your site ranks well.

That said, creating fresh content isn’t always the best solution. Let’s say you have a year-old blog post that has long performed well, but that has recently lost its Page 1 Google ranking.

In this case, it’s probably more advisable to freshen it up with new information than to create an entirely new post on the same subject.

Like any good investment, high-quality content appreciates over time through visibility and links. In this situation, creating an entirely new blog post about a topic you’ve previously covered in a format that has performed well risks undermining your existing content while creating a now obsolete page – all the while making extra work for yourself.

When strategizing new content, it pays to examine what you’ve already created, and what has performed well in the past – and see what can be simply optimized rather than created fresh.

When to Optimize and When to Start Afresh

Evolving Web has worked with numerous clients to develop effective content strategies that strike a balance between new and optimized “evergreen” content. One such client is the Canada Foundation for Innovation (CFI), a non-profit corporation that invests in research infrastructure at Canadian universities, colleges, research hospitals and other research institutions.

The CFI publishes regular news posts, roughly averaging a post a month. These posts represent a mix of “corporate news” – typically consisting of announcements of new research funding and programming – as well as editorial content that highlights everything from the depth of Canada’s research talent pool to the CFI’s role in alleviating labour shortages by encouraging female participation in STEM fields.

These types of editorial posts, mixed in with current affairs updates, represent content that can be optimized and repurposed. In the case of the latter story (which also appeared in the Hill Times), the topics of labour shortages and female participation in STEM look to remain salient for many years to come, although the specific statistics will change year by year, making for a perfect candidate for optimization.

Other pieces of content might be less clear-cut than this. While a topic like female participation in STEM is bound to remain relevant for the foreseeable future, the topic of labour shortages could vary considerably, depending on what current needs are. Such changes might necessitate an entirely new article or just an adjustment of the existing content.

So how do you decide which to do? As a general rule, if you have to change more than 50% of the content, it’s better to start afresh. At over 50% different, you’re creating fundamentally new content, and it should be presented as such. If it’s a less than 50% transformation, it’s advisable to optimize the original content, thereby retaining its existing SEO traction.

Both new content and legacy, optimized content enrich a site from an SEO standpoint. However, optimizing content is a particularly good time investment as search engines have to do less work to process the content and promote it.

How to Identify Content that Needs Updating

When it comes to old content, performing semi-regular content audits can help you identify stale and underperforming pages that could benefit from updating.

However, even well-performing pages might benefit from being optimized. Here are some questions to ask when considering whether to update a piece of website content:

1. Does the content receive relevant traffic?

2. Does it need to be updated due to new developments?

3. Is the page still ranking on different keywords? Is it losing or gaining in ranking?

4. Are there other good keywords related to the topic that can easily be included in the content?

5. What are other top-ranking content providers offering on the subject? Are they doing a better job addressing the topic?

6. Can I realistically improve, modify or add to the content without disturbing the user experience?

7. Is the topic critical to your business goals, hence worth the effort?

Data on how pages are performing is available through Google Search Console and tools like Screaming Frog and Semrush. When performing a content audit, pages should be divided into three categories:

1. Top-performing pages (i.e. pages that show up on page 1 of search results)

2. Pages with potential for better results (i.e. pages that show up on page 2 of search results)

3. Low-performing pages that are in neither of these categories

The pages in the first two categories should be the focus of your activity. The second category of web pages represents prime content for optimization, but the first category is also well worth paying attention to, as work may be needed to ensure that it maintains its high ranking.

As for the low-performing pages, some may still benefit from updating. Others may benefit from a recommendation and a link by way of a new post that may revitalize neglected content. While not as valuable as inbound links from an SEO perspective, strategic internal linking is a great way to point Google and site visitors to the most popular or important topics and is therefore a good SEO strategy.

Keeping Content Fresh

At Evolving Web, we build websites with the objective that they remain relevant for years. But while much of this has to do with design and functionality, a website’s continued relevance owes much to a solid content strategy. Are you offering the best, most up-to-date possible content on your subject matter? Ask yourself this question regularly.

If you’ve got great topics that people out in the world care about, you have the potential to produce great content – whether that content is new or revised. Great topics can easily be milked for multiple posts, highlighting different aspects of that topic, and there’s every reason to continue to produce new pages of material.

Just don’t neglect the old stuff. If you’re a subject matter expert, you doubtless have superb content on your site that could be performing better for you. A little optimization can go a long way.

//--> //-->

+ more awesome articles by Evolving Web

Today we are talking about WebOps Enabled Accessibility with Tearyne Almendariz and Blake Bertuccelli.

For show notes visit: www.talkingDrupal.com/371

Topics

• What is WebOps Enabled Accessibility
• Who should be concerned about it
• Describe a few use cases
• What types of tests are good to perform
• If Accessibility is “built-in” why do I need to test for it
• How much accessibility is content related
• Where do you run the tests
• Are they pass / fail or percentage based
• What tools are most common
• How does Pantheon support WebOps Accessibility
• Equalify.app

Resources

• What is WebOps
• An open source project that opens the internet for all
• Equalify.app
• International Accessibility Laws
• Certification Link
• Native Web Components and Accessibility
• Training from Harvard
  • https://accessibility.huit.harvard.edu/training
  • https://accessibility.huit.harvard.edu/calendar/upcoming/das-events/accessibility-training-events
• Training from DoJ
• Brian Charlson Keynote
• IAAP Certifications
  • https://www.accessibilityassociation.org/s/accessible-document-specialist
  • https://www.accessibilityassociation.org/s/certified-professional
  • https://www.accessibilityassociation.org/s/wascertification
• Accessibility testing on commit
• Equalify Github repo
• UK gov tool audit
• Accessibility statement on Pantheon

Guests

Blake Bertuccelli-Booth - Equalify.app @bbertucc

Hosts

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Tearyne Almendariz - @tearyneg

MOTW Correspondent

Martin Anderson-Clutz - @mandclu

Entity Comparison

• Brief description
  • Generate a configurable comparison table for two or more Drupal entities: products, events, people, etc
  • Not dependent on Commerce, but should be compatible
• Brief history
  • Created in 2017
• Current version
  • Current 4.0 release created in Aug 2022, ready for Drupal 10, and has security coverage
• Actively maintained
• Number of open issues
  • 3 open, 2 have patches
• Usage stats
  • 292 sites
• Module features and usage
  • Generates “Comparison” configuration entities, which specify which entity type and bundle will be used
  • Automatically creates a view mode for the selected bundle
  • Fields set to display will be included in the comparison table
  • Two custom blocks: one to show the link to add to or remove an entity from the comparison (via AJAX), and one to show a link to the comparison
  • Link for toggle of an entity’s inclusion is also available as a field

The Drupal 9 Webform Module – A Brief Tutorial Suresh Prabhu 31 Oct, 2022 Subscribe to our Newsletter Now Subscribe Leave this field blank

You have seen them, you have used them and now you will learn how to easily build them in Drupal. Because collecting form data is so important for any organization, it is crucial to have a flexible, customizable, and feature-rich form system in place.

And what’s better than our very own Webform module? The Drupal 9 Webform module is a contributed module and is one of the most powerful and flexible modules in Drupal. It is an open-source module used for building forms and managing submissions. Drupal Webform has also made it to our list of top Drupal modules that you absolutely need for your next Drupal project! Learn more about the adaptable module in this Drupal 9 webform tutorial.

Webform Logo derived from Drupal.org/Webform

Why use the Drupal Webform Module?

Drupal Webform is a highly versatile module used to build forms and extract information from users. For example, you can use the Drupal Webform module to create surveys, contact forms, and feedback forms. After submission, this module will allow sending emails to the user and can send notifications to the administrator regarding the submission. There are options to view the submission, publish it as a node, page, or block and export the results into a CSV file.

• Drupal Webform module is open source, which means it is free and you only need time to set up and configure the forms.
• It lets you perform form validations through hooks, Webform handlers, or the Drupal Webform Clientside Validation module. This needs the Clientside Validation module to be installed. 
• These Webforms are flexible and allow for customization of fields used in the forms.
• It provides many valuable options in a single installation like sending notifications and emails to the user and the administrator.
• Drupal Webforms makes it easy to export the results of the submission. Users can view the result of the submitted form in the admin interface and can also export the result in CSV format by clicking a single button.

For a deeper look into the features of the Webform module, check out this article.

Getting started with the Drupal 9 Webform module

The Drupal community has given us some phenomenal modules and Drupal Webform is certainly one of them. Jacob Rockowitz, the builder and maintainer of the Webform module, had once discussed with us about Webform and his contribution to the Drupal community. “Everyone has a personal groove/style for building software. After 20 years of writing software, I have come to accept that I like working towards a single goal/project, which is the Webform module for Drupal. At the same time, I also have learned that building open source software is more than just contributing code; it is about supporting and creating a community around the code.”

A big thank you to Jacob and other contributors to the Webform module for giving us an extremely valuable module.

Now, let’s get started with installing the Drupal 9 webform module and creating Webforms.

Install and enable the Drupal Webform module

Download the Drupal 9 Webform module from here and enable it.

 

To enable the Webform, go to Extend and in the Webform category, you will see a Webform along with the checkbox (as shown above). To work with Drupal 9 Webforms enable Field API, System module, and User module. Without enabling these three modules, Webform cannot be enabled.

There are various options under Webform that provides specific functions. Enable them as per your requirements.

Create a new Webform

To create a new Drupal 9 Webform, enable Webform UI and Webform Access. Webform UI provides a good user interface for building and maintaining webforms. Webform Access controls the webform nodes. Enable the Webform Node before enabling Webform Access. Then go to Structure -> Webforms.

 

Here are some options for Webforms.

• In the first tab, Forms, you will find a list of Webforms created. By default, there is always a Contact form available.
• In the Submissions tab, you can view the forms submitted by the users.
• Options tab provides a predefined reusable set of values that are available for the radio buttons, checkboxes, and menus.
• In the Configurations tab, general settings of the webforms are provided.
• In the Access tab, you can create a group of users and set permissions to the group.
• In the Add-ons tab. You will see a list of modules and plugins that can be used to improve the features of the Webforms.

 
To create a new Webform:

1. Click on Add Webform.
2. Now a tab opens with a title, description, category, and status.
3. Add a title to the Webform and a short description about the form.
4. Under Status, you will see two options: open and closed. This means if the status is ‘open’, the form is available to the user else it's closed. 
5. After editing all the options click on Save.

Adding Fields to the Drupal 9 Webform

When you click on Save, a page opens with the title of the Webform (here: Registration).

 

• To add fields to the Webform, click on the +Add element button.
• You will now see a pop-up with the list of fields that can be used in the Webform.

 

 

• To preview the elements, click on Show Preview in the top right corner. To add the element, click on the Add element button of the respective element. Now a pop-up opens up on the right side of the page..

 

• You will now see options for editing the title and many advanced settings for the field. After you are done making all the settings changes, click on the Save button. Click on the Required checkbox for all the mandatory fields in the Webform.

 

• You can view the Webform created by clicking on the View tab on the top. The Submit button is created automatically upon adding an element to the Webform.
• Test tab provides testing to the Webform created. The values to the form fields are auto-filled with random values.
• In the Result tab, the values of the submitted form can be viewed. There are three options under the result tab.

 

1. A list of all the submitted forms under the Submission tab.
2. Submitted results can be downloaded in 4 formats - Delimited text, HTML tables, JSON document, or Yaml document under the Download tab.
3. You can clear the submitted forms in the Clear tab of results.

• Settings tab has the general settings of the Webforms which can be changed according to the requirement of the user.
• The configuration of the Drupal Webform can be downloaded from the Export tab. The configuration is displayed and can be downloaded by clicking the Download button at the end of the page. It is downloaded in Yaml format as the Yaml config file can be easily imported to another Drupal instance.

Adding Content to the Drupal Webform

As soon as the Drupal 9 Webform Node module is enabled, a content type with the name ‘webform’ is created. It has fields like title, body, and Webform. The Webform has a dropdown with all the created Webforms.

To add content to the Webform, go to Content > Add content > Webform. As mentioned, there will already be a title and body present. You will find a dropdown labeled Webform, which has the Title names of all the web forms created.

 

Right next to that, there is another option called ‘Webform settings’.

Under Status, there are three options, Open (to keep open to users), Closed (to close the form for users), and Scheduled (it will provide a date and time field and according to the date and time mentioned, the form will be kept open to the users to fill).
You can also provide default data by filling the Default submission data field with an available token. A token can be browsed by clicking on You may use tokens. Examples to write the token can be viewed by clicking on the Example link. You can view all the submitted forms under the Result tab.

Adding the Drupal 9 Webform as a Field in Content Types

Now let’s add the Drupal Webform in a content type.

• Go to Structure > Content types > Manage fields of the content type for which the form is required.
• Click on Add field. In Add a new field, select ‘Webform’. Under the ‘References’ section, give a label to that field and click ‘Save and Continue’.
• Within Field settings, you can give the number of values allowed to the field and click on ‘Save field settings’.
• You can select the default form from the default value or else click on ‘Save settings’.
• Now go to Contents > Add content and select the content type which has a field referring to the Webforms.

• Select the form from the dropdown which is required for this content. The submitted form can be viewed in the Result tab of that content.

Adding Captcha to Drupal Webforms

Many websites today use Captcha to verify users. Before submitting a form, it provides a question and asks for a response from the user. This prevents bots from overloading the servers by making form submissions and email submissions (mostly multiple times).

Drupal Webform lets you add the Captcha element while creating the web form. Drupal Webform captcha requires you to enable the Captcha module.

Steps to add Captcha in forms:

• Download and enable the Captcha module. You will also need to enable the Image captcha module to get the image option in Captcha.
• Go to Configuration > People > CAPTCHA module settings to configure the captcha module.
• Navigate to Structure > Webforms.
• Click on the build of the form to which the Captcha is required.
• Click on Add element and expand Advanced elements. On expanding, the list of advanced elements can be viewed. Click on Add element of CAPTCHA to add the captcha.

 

• Clicking on Add element will open a settings window on right. Check on the box Admin mode so that the admin can debug and view the captcha.
• The Challenge type gives you 2 options - Math and Image. You can select any one of your choices. Then click on Save and on Save elements. If you cannot see the image option here, you need to enable the image captcha module.
• Add the field in the content type of the field type Webform and refer to the form for which the captcha is added.
• Now go to Content > Add content > and content type which has a field referred to the form.
• Fill in the title and save the content. Now when you view the content, the form along with the captcha is published. Before clicking on the submit button, the captcha field should be filled, or else the form will not get submitted and gives an alert message.

The use of forms on websites is indispensable today, whether it is for contact or feedback. Building forms in Drupal are now made easy using the Drupal Webform module, which has many significant features and can be customized according to the needs. With Webforms, the forms are more flexible, and functional and can be completely integrated into your Drupal website. We hope this Drupal 9 Webform tutorial was helpful in learning more about this amazing module. Need help in creating intuitive forms using the module? Contact our expert team of Drupal developers now!

Drupal 9 Drupal 9 Module Drupal Development Drupal Planet

Leave us a Comment

 

Recent Blogs

Image

The Drupal 9 Webform Module – A Brief Tutorial

Image

How to React Quickly in Drupal

Image

Configuring the Drupal 9 Metatag Module - A Brief Guide

Need help in creating intuitive forms in Drupal? TALK TO US

Featured Success Stories

Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9

View all Case Studies

Day 2 Day 2 was another busy Drupal day! We started with the keynote, Sarah-Jane Peterschlingmann (Managing Director and owner of ATech) talking about leading talented teams. She had some great insights around what makes talented people happy in an organisation. She also presented some questions you should be asking at an organisation-wide level to gauge happiness. Using Drupal as a content store for Service NSW apps By Michael Caddy Michael provided some insights into Service NSW and its digital journey. Service NSW provides 1300 services, with many transactions now digital. It’s seen significant growth in the past 2-3 years and currently gets 4-7 millon site visitors per month. The system uses Drupal 9 (was Drupal 7 but now Drupal 9) and also React, Java and APIs.

This is the second in a series of “Camp Debriefs” by the Drupal Event Organizer Working Group. In this debrief, Fei Lauren (feilauren) interviews Matthew Saunders (MatthewS)  about DrupalCamp Colorado 2022. If you would like your Drupal event to be featured in a Camp Debrief, contact the EOWG.

How did you learn about Drupal, and what drew you in?

Matthew had already established a career in tech when he stumbled into the Drupal community over 15 years ago. He was working in the non-profit sector building custom PHP and MySQL solutions. In an effort to branch out and consider the potential for new tooling, he was asked to organize a Think Tank involving a variety of tech professionals and areas of expertise. 

“We all just got together to talk about where this crazy thing The Internet was headed.”

Enter Drupal, stage left.

“I sat there sort of in amazement as they went through Drupal, 4.5.1 or 4.5.2… I thought to myself looking at this, wow, I never have to write another authentication system ever again!”

Not long after that, Matthew was attending the first DrupalCon in Barcelona. He was able to meet and share ideas with Dries, Moshe and some of the other folks who are known as the “Elder Statesmen”, so to speak. Drupal has been a hub of his career ever since.

What are you most proud of? 

Two things. Well, technically three. 

 Matthew was on the team that moved Examiner.com from ColdFusion to the soon to be released Drupal 7. At the time, it was the largest Drupal 7 migration in the history of Drupal. 

“I think we ended up writing about 18% of Drupal 7”

Matthew also sat on the Drupal Association Board of Directors for about two and a half years. But there is another important accomplishment in his career that he is also extremely proud of - the reason we are all here, reading this blog - his work in establishing DrupalCamp Colorado.

How was DrupalCamp Colorado born? 

Originally, it was never meant to be such a large event. It wasn’t even meant to be a web camp. It was a meetup hosted by an agency in Boulder. 

“It was a bunch of nerds sitting around a table showing each other things that they'd worked on and you know, having a couple of cold adult beverages and eating pizza.”

Four or five months later, the casual meetup turned into a very small web camp with only about 20 attendees. The camp grew from there until 2011. DrupalCamp Colorado’s organizers were also part of the organizing committee for DrupalCon, so when Denver was announced as the host to DrupalCon 2012, a lot of people tuned in. That year there were about 600 attendees at DrupalCamp Colorado. The following year, DrupalCon Colorado had about 1400 - and it was the last community-driven DrupalCon. Professional consultants have been involved ever since.
 
Building momentum like that is no small feat, how did it happen so quickly?

20 attendees to 600 is no small feat, but it didn’t happen overnight. 

“It was 6 or 7 years to get up to that point. And fortunately… many of us were working for Examiner at that point, so we had some pretty remarkable resources behind us. And a whole lot of support in people like our CTO, Michael Meyers.” 

Matthew also mentions how many organizers were putting in full time hours in order to hit deadlines successfully. I think an important takeaway for new organizers is that a successful event with 20 attendees is still a successful event.

What would you say are the most impactful things that we, as newer organizers, could be doing to help breathe life into our initiatives, into our camps, into our events?

“A big part of it is early planning.”

Especially when working to establish a new camp, many volunteers and attendees will likely learn about it by word of mouth. Leaving lots of time for people to plan and promote is really important. 

Finding a venue is also challenging, but again, working with potential venues is much easier to do when there is a lot of lead time. You are much more likely to get something inexpensively or even free if you give the venue lots of time to plan. Try reaching out to a charter school, Matthew suggests, as most of what they do is already community driven. But schools in general have fewer rooms occupied in the summer, and all the equipment a camp might need is already in place. 

What are some of the things that were initially a struggle, but are now not an issue at all? 

There are so many resources that exist on drupal.org - use a recipe!

Hearing this answer, it certainly doesn’t seem like rocket science. But just like following a recipe in a kitchen, the first time can still be challenging – that’s okay. A recipe still gives you a significant boost. Don’t try and reinvent wheels if you don’t have to!  
Once you get used to following a recipe that works for your event, “you don't even have to think about it at the end of it. You've got a camp that is just gonna run itself because you've broken it up into bite size chunks”. 

Okay so, maybe it doesn’t really run itself but it’s difficult to argue the benefit of knowing the steps and making sure you have all the ingredients lined up in advance.

For you, what is the best part about organizing? 

Matthew offers two things. 

“We always have a really good party at the end, and it's sort of a it's sort of a release for all of the for all of the organizers” 

And the second is a bit more of a ubiquitous reply among organizers - “the camp is a way of giving back”. 

2022: The great hybrid challenge - tell us more about how this went.

Hopin,  Zoom, StreamYard – there are so many tools out there, what has worked for you?
“Don't try to do it with Zoom or something like that. Make sure that you're using a tool like Hopin”. 

Hopin is expensive at a glance, but there are things that can be done to bring that cost down. As of now, they sell annual subscriptions which can be quite costly. But you can pay monthly and pause your subscription. There may also be potential to collaborate with other Drupal web camps and events to lower the impact on a single event (as long as there is a single admin coordinating). 

Even if you do pay for an entire year (somewhere in the range of $1000), they also provide a lot of features out of the box - including the ability to offer virtual spaces for any of your potential sponsors. Such as any that might be willing to cover the cost of Hopin. 

Additionally, Hopin provides other features that really add up. A “ready made” structure for virtual events out of the box with automatic recordings for sessions means less work before and after the event. The friendly scheduling interface for users and presenters means everyone knows where they need to be while the event is running. Registrations are easier too, they even offer payment handling. 

If you have ever organized a camp or any large event, you know how much work it is. So this next piece of advice is important. Matthew warns, “Expect to have twice as much work. You're doing two events. We used Hopin, but we also had our physical venue.”. It’s twice as much work but you don’t have to schedule full days - they tried out half days it helped a bit, he reports. 

But is it worth it? I guess that depends on resources, but if the option is within reach it certainly seems so.

“We actually ended up with some amazing content last year and it's because our participants ranged from all over the world. We ended up with several people from India who presented. We ended up with lots of local people. We ended up with people from all over the United States, Canada, all over Europe.”

Attendee engagement. One of the most ubiquitous challenges of hybrid events. What can you share with us about how you have addressed this? 

When we talk about hybrid challenges, many of us might imagine trying to solve problems that help restore engagement to where it was previously. Matthew’s insights really illustrate how important it is to consider our definitions of “inclusiveness”.

“I would not have been able to attend. I can’t attend events. I am really glad you did this.” 
Resident of Alaska

With people pouring in from all over the world, it’s not just a matter of keeping the doors open for those who live in and around Colorado. Hybrid events provide an opportunity for inclusiveness that can’t otherwise exist. With 12 attendees who were in India including two speakers, the question Matthew and many other organizers seem to be asking is not should our events continue to be hybrid or remote. It’s how do we keep improving the hybrid model, and what other advantages exist?  
 

Ajax Dialogs in Drupal are a good way of presenting content to a user without them having to navigate away from the page they are looking at.

This is useful when presenting a list of items or a link to something like a terms and conditions page. Users can click a link and view the content as a dialog box.

Creating dialogs in Drupal is built into the platform and are powered through the jQuery UI dialog component.

Drupal provides a way to create the following types of dialogs.

• Normal dialogs - The dialog shows on top of the content on the page. It is possible to show multiple dialogs on the page at the same time.
• Modal dialogs - The dialog creates an overlay that disables other elements on the page. Only one modal dialog can be shown on the page at once.
• Off-canvas dialogs - The dialog slides in from edge of the browser window. This is useful if you want to show lots of content and is also a better option for showing dialog boxes on mobile views.

There are a number of ways in which dialogs can be created, but there is very little documentation on the subject.

This article will cover how to create different types dialogs in Drupal and in a few different ways, including how content editors can easily add dialogs into content with little programming knowledge.

Creating Dialogs Using PHP Classes

Ajax dialogs are generated in Drupal using a number of PHP classes. The different classes are used to generate different types of dialog. First, let's look at generating a normal ajax dialog box.

Read more.

Akhil's DrupalSouth 2022 presentation was on day 1 of the event. Speaking in the main room, he took attendees through the process of getting CivicTheme up and running.      View presentation description on DrupalSouth website

The city of Lutsk in northwestern Ukraine has seen its fair share of upheaval and bloodshed over the course of its long history. Located near the borders of Poland and Belarus, it has been invaded and occupied by numerous outside forces over the centuries – most recently by Nazi Germany and the Soviet Union – before finally becoming part of an independent Ukrainian state in 1991.

Today, this city of roughly 217,000 has a different claim to fame – as the Drupal Capital of Ukraine, with numerous developers working in the city. And despite the war that has enveloped much of the country, Lutsk continues to thrive as a local hub for Drupal developers, bringing in important foreign capital for a country facing difficult times.

DevBranch team joined the initiative called "The Marathon in New York No One Wants to Run". More about the marathon here

Between seven and ten Drupal-based development companies are situated in Lutsk at present. Among the most prominent and prolific is DevBranch, which has 49 employees, mostly Drupal developers. In addition to serving clients directly, DevBranch partners with agencies from across Europe and North America – with Evolving Web being among their key partners since 2019.

DevBranch team

Ivan Doroshenko is among the DevBranch developers who work closely with Evolving Web. A graduate of Lutsk National Technical University with a master’s degree in automated management of technological processes, Ivan began working for DevBranch shortly after graduation as a Drupal developer and contributor and has been working for Evolving Web from his Lutsk base for three years.

“At this moment, we have a team of three DevBranch members working for Evolving Web,” says Ivan of the partnership.

“The partnership started before the war and has remained strong. Some of our fellow companies lost business due to clients being scared off by the war, but fortunately, that hasn’t been our situation.”

DevBranch team in DrupalCamp London, 2020

Ivan notes that the “Drupal Capital of Ukraine” moniker his hometown possesses – a factoid that even the city’s Wikipedia page asserts – is indeed factually accurate.

DevBranch running team won a team relay in Ivano-Frankivsk Half-Marathon

“It started as a local meme among our DevBranch team in the late 2010s. Then we actually counted the number of firms located here and realized it wasn’t just a meme but a statistical fact, so we started promoting it.” 

An Uneasy “Normal”

Being situated in the far western region of Ukraine, Lutsk has thus far been minimally impacted by the Russian invasion, although the city did suffer two Russian missile strikes in March 2022, one of which killed two Ukrainian military members and wounded six others when an air base in the city was attacked.

Ivan says life during the conflict was extremely stressful in the early days, but that life is now mostly normal.

“During the first days of the war, it was very hard to work. I couldn’t focus. But after a couple of weeks, things got back to “normal”. In general, the city was affected, with many people moving to Poland and elsewhere in Europe during the early days. But these days people are returning home and in general, things are back to normal. Restaurants and cafés are open again, and most local businesses operate normally.”

Just a photo at the office in ammunition

Normal, however, doesn’t mean detached from the conflict that continues to inflict suffering on thousands of Ivan’s compatriots to the east and southeast. Many local businesses are prioritizing supporting the war effort, either through volunteer work or charitable donations. Meanwhile, children are required to carry emergency supplies in their school backpacks should they be caught in an air raid. 

Air raid sirens are also a regular reminder of the war embroiling the country, although Ivan says he and his colleagues barely notice them anymore.

Work continues to keep Ivan busy in these calm but uncertain times. Current projects on his plate include work for the City of Hamilton, Sollio Cooperative Group, York University and McGill University. With the normal rhythms of the year disrupted for so many Ukrainians, he worked straight through the summer, only recently taking a short break.

“In Ukraine, there was no spring and no summer this year,” he explains. “In August I realized summer was almost over so I took time off to go to the lake and tried kayaking for the first time in months.”

The Road Ahead

While life may have returned to more-or-less normal for Ivan and his fellow Lutsk-based developers, he is likewise aware that things could change for the worse at any time and that things are bound to get more difficult as fall turns to winter.

“I am preparing myself for the worst,” he says.

“Winter is going to be hard. Things are going to be complicated. Our energy supply has been undermined by direct Russian attacks on critical infrastructure. Our economy has declined and will continue to drop. And of course, much of the country is now occupied, whole areas have been destroyed. In the end, I’m confident that we’ll get our territories back but it’s not going to be easy.”

Ivan expresses gratitude to Evolving Web and other DevBranch partners from overseas who have not only stuck with their Ukrainian collaborators but also contributed to the Ukrainian cause in a number of important ways.

“Our partners have been very understanding from the beginning. They understood that we wouldn’t always be available for meetings, due to all of us being involved in local volunteer efforts. Our clients have not only stayed with us during the war, but many have donated money to defence funds that support military units. Our partners never gave up on us, and for that I’m grateful.”

Volunteer activities Volunteer activities

For those eager to help the Ukrainian cause, Ivan says several good charities are out there. The best known of these is the Come Back Alive foundation, which was founded back in 2014 when Russia first invaded Crimea and war erupted in the Donbas region. Through international donations, Come Back Alive purchases equipment that helps save military lives, including thermal imaging optics, quadcopters, cars, and security and intelligence systems.

Other organizations doing similar work in Ukraine include the Serhiy Prytula charity foundation, which, like Come Back Alive, directly funds military equipment such as communication and optical devices, drones, UAVs, transport and tactical medicine. Another group recommended by Ivan is Hospitallers, a volunteer organization of paramedics also founded back in 2014 that provides invaluable frontline medical support.

“Any contribution helps,” says Ivan. “Even your support on social media helps, as people see this. It’s been deeply gratifying to see the support from Evolving Web and elsewhere.”

Meeting with Alex in Kyiv

+ more awesome articles by Evolving Web

Folks often ask us, “What are the things that can make website redesign and rebuild projects more expensive?” The quick answer: things that take up a lot of time. The longer answer: over many years and hundreds of projects, we can tell you exactly what the biggest cost drivers usually are. Here are our top 5 hits: Design & Development Stakeholder Wrangling, Internal Capacity, & Timeline Content Migration CMS: Drupal vs WordPress Transactional vs Consultative Partnerships There are ways to save time and cost in some of these areas; others can’t be cut. Let’s dive in and explore each a bit more.