Affiliate Disclosure: Some links on this site are affiliate links, meaning I may earn a commission if you make a purchase through them—at no extra cost to you.

Get Piotnet Forms

How To Create A Website Contact Form That Sends A Query To A Department The User Chooses From A Dropdown Field

Want to create a user-friendly contact form that routes inquiries to specific departments based on user selection? This guide shows you how to build a dynamic contact form using Elementor (free or Pro) and the Piotnet Forms plugin. You’ll learn how to use a dropdown field to direct emails to the correct recipients, streamlining your workflow.

TL;DR

A single contact form with a department dropdown improves user experience and simplifies email management.

This guide uses the standalone Piotnet Forms plugin with Elementor (free or Pro).

You'll create a form with fields for name, email, department (dropdown), and message.

You'll learn two methods: a simple button setup and a more elegant version with dynamic button text.

The dropdown selection determines the email recipient.

A honeypot field helps prevent spam.

A well-designed contact form is crucial for any website. Instead of having multiple forms for different departments, a single form with a dropdown menu to select the relevant department offers a cleaner, more user-friendly experience. This tutorial will demonstrate how to create such a form.

Why This Form Rocks

  • No Email Chaos: Inquiries are automatically routed to the correct department.
  • Neat Division: Each team receives only relevant emails.
  • Even Load: Workload is distributed more evenly.
  • One Form to Rule Them: Easier management and maintenance.

The Tools You’ll Need

  • WordPress (self-hosted): The foundation (wordpress.org).
  • Page Builder Framework (Optional): A lightweight theme; any Elementor-compatible theme will work.
  • Elementor (Free or Pro): Either version will work; we won’t be using Pro-specific features for the core functionality.
  • Piotnet Forms (Standalone): The *standalone* Piotnet Forms plugin (paid) is required for its advanced features, especially the conditional logic and email routing.

It is assumed you have WordPress installed with Elementor and the *standalone* Piotnet Forms plugins installed.

Setup: Piotnet and Page

Before building the form, let’s do some quick setup.

Piotnet Forms Settings

After installing and activating Piotnet Forms, you might want to explore its settings. Go to “Piotnet Forms” in your WordPress dashboard. For this tutorial, you don’t *need* to enable any specific features beyond the core form functionality, but feel free to explore the options.

Page Setup

Open the page where you want to add the contact form (usually your “Contact” page) in the Elementor editor. For a clean layout, you might want to set the page template to “Elementor Full Width” or “Elementor Canvas” (click the gear icon in the bottom-left corner of the Elementor editor, then choose the desired layout from the “Page Layout” dropdown).

Add a Section and Heading (Optional)

For visual organization, add a new section (click the “+” button) with a single column. You can also add a heading widget to label your form (e.g., “Contact Us”).

The Form: Fields First

We’ll build the core form fields that will be used in both versions of the form (simple and elegant).

Remember, every field *must* have the same “Form ID”.

Name Field

Drag a “Field” widget (from the “Piotnet Forms” section) into your section. Configure it as follows:

  • Form ID: `simple_form` (or any ID you choose, but be consistent)
  • Field ID: `sub_name` (unique for each field)
  • Type: Text
  • Label: Name
  • Placeholder: Your Name (optional)
  • Autocomplete: On (optional)
  • Max Length: 50 (optional – limits the length of the input)
  • Required: On (if you want to require this field)

Email Field

Duplicate the “Name” field. Edit the duplicate:

  • Form ID: `simple_form`
  • Field ID: `sub_email`
  • Type: Email
  • Label: Email
  • Placeholder: Your Email (optional)
  • Required: On
  • Required Mark: On

Honeypot Field (Spam Prevention)

Duplicate the “Email” field. Edit:

  • Form ID: `simple_form`
  • Field ID: `honeypot`
  • Type: Honeypot
  • Label: (Leave this blank)
  • Show Label: Off
  • Autocomplete: Off
  • Required: Off

This creates a hidden field that helps prevent spam.

Department Dropdown

Duplicate the “Honeypot” field. Edit:

  • Form ID: `simple_form`
  • Field ID: `department`
  • Type: Select
  • Label: Choose a Department
  • Show Label: On
  • Required: On
  • Required Mark: On
  • Options: Enter your department options and their corresponding email addresses, separated by pipes (|). Example: `Sales|sales@yourdomain.com`, `Accounting|accounting@yourdomain.com`, `Returns|returns@yourdomain.com`

This is the crucial field that will direct the email to the correct recipient.

Message Field

Duplicate the “Department” field. Edit:

  • Form ID: `simple_form`
  • Field ID: `message`
  • Type: Textarea
  • Label: Your Message
  • Placeholder: How can we help? (optional)
  • Required: On
  • Rows: 5 (or adjust as needed)

Simple Send Button (Version 1)

This version uses a single, straightforward submit button.

Add the Button

Drag a “Submit” widget (from “Piotnet Forms”) below the “Message” field.

  • Form ID: `simple_form`
  • Remove Empty Fields: On (optional – cleans up the email)
  • Button Text: Send
  • Icon: (Optional – add an envelope icon or other suitable icon)

Configure Email Action

Select the “Submit” button. In the sidebar, click “Actions After Submit” and add an “Email” action. In the “Email” settings:

  • To: `[field id=”department”]` (This is the *crucial* part – it uses the value from the dropdown field)
  • From Name: Site Admin (or your preferred sender name)
  • From Email: Your admin email address (or a dedicated form email address)
  • Reply-To: `[field id=”sub_email”]` (So you can reply directly to the user)
  • Subject: New Contact Form Submission (or similar)
  • Message: You can customize the email body. Use shortcodes like `[field id=”sub_name”]`, `[field id=”sub_email”]`, and `[field id=”message”]` to include the submitted data.

Add a Custom Message (Optional)

In the “Actions After Submit” settings, you can also add a “Message” action to display a custom success message after the form is submitted (e.g., “Thank you! We’ll be in touch soon.”).

Elegant Send Button (Version 2)

This version uses conditional logic to display different submit buttons based on the department selected, providing a more refined user experience.

Duplicate the Form

Duplicate the entire section containing the first form. This creates an exact copy.

Change the Form ID

*Crucially*, change the “Form ID” of *every* field in the *duplicated* form, including the submit button(s). Use a different ID (e.g., `elegant_form`). This prevents conflicts between the two forms.

Modify the Dropdown

Edit the “Department” field in the *duplicated* form. Remove the email addresses from the “Options” field. Now, the options should be *just* the department names (e.g., “Sales”, “Accounting”, “Returns”).

Edit the Send Button(s)

We’ll now create multiple submit buttons, each configured for a specific department and displayed conditionally.

Delete the existing submit button. Add a new “Submit” button.

  • Form ID: `elegant_form` (the new Form ID)
  • Button Text: Send to Sales Department
  • Actions After Submit > Email > To sales@yourdomain.com
  • Conditional Logic: On
  • Show if: `[field id=”department”]` **equals** `Sales`

Duplicate this button twice. Edit the duplicates:

Second Button:

  • Button Text: Send to Accounting Department
  • Actions After Submit > Email > To accounting@yourdomain.com
  • Conditional Logic > Show if: `[field id=”department”]` **equals** `Accounting`

Third Button:

  • Button Text: Send to Returns Department
  • Actions After Submit > Email > To returns@yourdomain.com
  • Conditional Logic > Show if: `[field id=”department”]` **equals** `Returns`

This creates three submit buttons, but only one will be visible at a time, based on the user’s selection in the “Department” dropdown.

Testing

Thoroughly test both versions of your form. Submit test messages for each department to ensure they are routed to the correct email addresses.

Conclusion

You’ve now created a dynamic contact form that intelligently routes inquiries based on user selection. This improves both the user experience and your internal workflow. The simple button method is quick and easy, while the elegant button method provides a more polished and professional feel. Choose the version that best suits your needs and enjoy a more organized inbox!

Latest Posts