How to create a website contact form that sends a query to a department the user chooses from a dropdown field

Impress website visitors with this small touch by giving them a contact form they can choose a department from. Take it a step further by having the send button's text change according to the department chosen.
Share on email
Share on whatsapp
Share on linkedin
Share on reddit
Share on facebook
Share on twitter
This content is FREE. But when you buy through my referral links I earn commission.
Table of Contents

A website contact page is a great way to get your target market to connect with your company.

But instead of having a contact page filled with contact forms for every department in your company, you could have a single form with a dropdown field from which a website visitor can choose a department they’d like to reach.

It’s much simpler and much less intimidating to a website user.

Perhaps you run a small outfit and think it unnecessary to be pedantic about a contact form.

But small details go a long way towards making you look professional and towards helping you keep your sanity.

Here are some benefits if you create a form using the method explained in this tutorial:

  • Keeps a single email address from getting clogged up.
  • Neatly divides website queries according to the correct department.
  • Spreads the load evenly.
  • Requires keeping track of only a single contact form.

If that sounds attractive, dive in with me and let’s build a contact form that works great and looks professional. It’s an easy process. Just follow along step by step.

I’m building the same form, two ways. Read on to see the difference.

The tools you’ll need

You’ll need some tools for this to work:

  • WordPress.
    • This is the self-hosted version of WordPress, not wordpress.com.
  • Page Builder Framework.
    • Strictly speaking, you don’t need Page Builder Framework, but it’s my theme of choice. I use the free version, but it’s available in a pro version too.
  • Elementor.
    • You need Elementor for Piotnet to work. Although Elementor comes in a Pro version, the free version is fine for the purpose of this tutorial.
  • Piotnet.
    • Probably one of the greatest form builders you’ll ever see.

The setup

I’m assuming you’re running a WordPress website with the Elementor and Piotnet plugins installed and activated.

We’ll be creating two versions of the same form: one with a utilitarian button, the other with an elegant button.

I’ve created the two versions of this form on my test site, test.blom.media, at test.blom.media/contact.

Let’s set up Piotnet, followed by the page housing the forms.

Piotnet settings

Once Piotnet is installed you’ll see a new menu item inside the WordPress admin, in the left hand sidebar, called Piotnet Addons.

Click on it to open the Piotnet settings page.

You’ll notice that none of Piotnet’s features are active out of the box. We’ll change that.

None Of Piotnet's Features Are Active When You First Install The Plugin
None Of Piotnet’s Features Are Active When You First Install The Plugin.

I’m activating all Piotnet’s Pro features, even though many of them aren’t needed for form creation. However, I’m hoping to write many tutorials in future on Piotnet’s other features, so I thought I’d activate them now.

Click The Enable All Button To Enable All Of Piotnet's Features
Click The Enable All Button To Enable All Of Piotnet’s Features.
Click Save Settings To Ensure The Change Takes Effect
Click Save Settings To Ensure The Change Takes Effect.
All Of Piotnet's Pro Features Are Activated
All Of Piotnet’s Pro Features Are Now Active.

Piotnet is now ready to be used for advanced form creation.

You’ll notice some features are still disabled after clicking the Enable All button and saving the settings.

For those features, download the free version of Piotnet.

But since this tutorial is only concerned with building an advanced form I won’t be installing the free version of Piotnet now.

Page setup

Since Piotnet requires Elementor to be active, let’s activate and set up Elementor for the contact page.

This tutorial is not about designing a page using Elementor, so I’m only setting up the page as much as is needed to get going with the Piotnet forms tutorial.

You might cringe at the clashing colors or size of certain elements, but it’s not important to edit those now, even though Elementor makes it child’s play to do so.

Open the contact page

Since we’re adding the forms to the contact page, let’s open the contact page for editing.

You must be logged into your WordPress dashboard and be on the Pages screen.

On the Pages screen, click on Edit underneath the title, Contact.

Click On Edit To Open The Contact Page To Edit
Click On Edit To Open The Contact Page To Edit.

Once the page is open, and since we need Elementor for Piotnet to work, click on the Edit with Elementor button. This opens the page in Elementor.

The default editing screen for the contact page from now on will be Elementor, until you change it, which is not a good idea, since you might lose style edits.

Click On Edit With Elementor
Click On Edit With Elementor.
The Page Opens Inside Elementor Editor
The Page Opens Inside Elementor Editor.

Change the default page layout

Page Builder Framework (my go-to WordPress theme) allows you to set the page layout for each page you’re building.

I prefer a full width layout (a layout that removes the sidebar) 90 percent of the time.

Page Builder Framework makes it easy to change a page’s layout.

Let’s do it before we carry on with the form.

Click the small gear icon in the bottom left hand corner of the editor.

Click The Gear Icon In The Bottom Left Hand Corner Of The Screen
Click The Gear Icon In The Bottom Left Hand Corner Of The Screen.

From the dropdown menu, select Elementor Full Width.

Set The Page Layout To Elementor Full Width
Set The Page Layout To Elementor Full Width.
Click The Update Button
Click The Update Button To Save All Changes.

Your page layout will now stretch the full width of the screen.

Remember, some themes and plugins add their own padding, Elementor being no exception. You can set an Elementor section full width, according to the theme’s width, and if you want, add padding too, or set it to a specific maximum width.

I won’t be going into Elementor layouts in this tutorial. I might in future, in which case you should sign up for my newsletter.

Add a section

Before you’re able to add Piotnet form fields, or any other Piotnet or Elementor elements, you need to add a section to the page.

A section is a block into which you place widgets.

In The Center Of The Page, Click On The Plus Button To Add A New Section
In The Center Of The Page, Click On The Plus Button To Add A New Section.

Now choose the number of columns you’d like the section to contain. For the purpose of this tutorial I’ll use only a single column.

Under Select Your Structure, Click On The Single Rectangle Layout
Under SELECT YOUR STRUCTURE, Click On The Single Rectangle Layout.

Add a heading

This is optional, but I’m adding a heading to make it clear what this section is about.

Interestingly, when you add an Elementor heading, it defaults to an H2 heading, which is strictly speaking, horrendously wrong, since the top-most heading on a page should be H1.

But I digress.

Let’s add a heading.

Click the nine-dot menu to bring up a list of elements (or widgets) in the left hand sidebar.

Click The Nine Dot Menu In The Top Right Hand Corner Of The Left Hand Sidebar
Click The Nine-Dot Menu In The Top Right Hand Corner Of The Left Hand Sidebar.

Choose the heading element from the sidebar and drop it into the new section.

Hover Over The Heading Element, Hold Down Your Left Mouse Button And Drag The Heading Over Into The New Section
Hover Over The Heading Element, Hold Down Your Left Mouse Button And Drag The Heading Over Into The New Section.
Drag The Heading Element Into The New Section And Drop It In
Drag The Heading Element Into The New Section And Drop It In.

I’ll change the heading text to show users what this section is about.

Highlight The Heading Text
Highlight The Heading Text.
Change The Heading Text
Change The Heading Text.

The section where the first form goes is now set up. Let’s move on to building a useful WordPress contact form.

The form

A website form is made up of a number of fields and a send button.

We’re building the contact form in two flavors: one contains a simple, utilitarian send button, the other an elegant button that changes text according to the department chosen by the person using the form.

In this case, even though we’re building two flavors, the form’s fields remain identical for both forms.

The difference only comes in with the button.

Let’s add the fields first, then the button.

Add the fields

Let’s start by adding all the fields for the form.

We’ll add a name field, email field, Honeypot field (for battling spam), a department dropdown field and a message field.

Piotnet lets you build seriously advanced forms, so stay tuned for future tutorials, but we’ll keep it simple for this tutorial.

Click The Nine Dot Menu Again
Click The Nine-Dot Menu.
Scroll Down In The Left Hand Sidebar Until You See PAFE FORM BUILDER Elements
Scroll Down In The Left Hand Sidebar Until You See PAFE FORM BUILDER Elements.

Name field

The first field we’re adding is the name field, which makes sense, since you want to know who’s contacting you.

Drag The PAFE Form Field Into The New Section Underneath The Heading
Drag The PAFE Form Field Into The New Section Underneath The Heading.
The PAFE Form Field Inside The New Section, Underneath The Heading
The PAFE Form Field Inside The New Section, Underneath The Heading.
Give The Form A Form ID. All Fields Of A Specific Form Must Share The Same Form ID
Give The Form A Form ID. All Fields Of The Same Form Must Share The Same Form ID.
Add A Field ID. This Should Make Sense In Terms Of The Type Of Field It Is
Add A Field ID. This Should Make Sense In Terms Of The Type Of Field It Is. In This Case, sub_name Refers To The Submitter’s Name.
Choose The Type Of Field. Since This Is For The User's Name, Keep It A Text Field
Choose The Type Of Field. Since This Is For The User’s Name, Keep It A Text Field.
Add A Label. This Shows Above The Field And Indicates To The User What They Must Add Inside The Field.
Add A Label. This Shows Above The Field And Indicates To The User What They Must Add Inside The Field.
Add A Placeholder. This Goes Inside The Form Field. It's Optional
Add A Placeholder. This Goes Inside The Form Field. It’s Optional.
The Autocomplete Ensures That This Field Can Be Filled By Something Like Chrome's Autocomplete, Which Makes Filling In The Form Quicker For The User
The Autocomplete Ensures That This Field Can Be Filled By Something Like Chrome’s Autocomplete, Which Makes Filling In The Form Quicker For The User.
Add A Maximum Length To The Field So Someone Can't Accidentally Or Maliciously Add A Thousand Characters To The Field
Add A Maximum Length To The Field So Someone Can’t Accidentally Or Maliciously Add A Thousand Characters To The Field.
Click The Update Button To Save Your Changes
Click The Update Button To Save Your Changes.

You now have a name field in your WordPress form, thanks to Piotnet Addons For Elementor!

Email field

It also makes sense to receive the user’s email address. In fact, you might want to set up your form to capture a phone number too, but we’ll leave that for another Piotnet tutorial.

We won’t create the field from scratch. We’ll simply duplicate the name field. That ensures the copied field retains the Form ID, which is crucial for the working of the form.

Hover Over The Blue Edit Button Of The Name Field
Hover Over The Blue Edit Button Of The Name Field.
Right Click On The Blue Edit Button And Click Duplicate To Make A Copy Of The Name Field
Right Click On The Blue Edit Button And Click Duplicate To Make A Copy Of The Name Field.
You Now Have Two Form Fields, But They're Exactly The Same. We Need To Change The Second One. We'll Make It An Email Field
You Now Have Two Form Fields, But They’re Exactly The Same. We Need To Change The Second One. We’ll Make It An Email Field.
Make Sure The Second Field Is Selected By Clicking On Its Blue Edit Button
Make Sure The Second Field Is Selected By Clicking On Its Blue Edit Button.
Make This An Email Field And Give It A Field ID Of sub_email
Give It A Field ID Of sub_email.
Change The Field Type To Email
Change The Field Type To Email.
Change The Label To Email To Make It Clear To The User What They Must Put Into The Field
Change The Label To Email To Make It Clear To The User What They Must Write Inside The Field.
Change The Placeholder Text
Change The Placeholder Text. In this case we’ll make it: Your email address, please.
Make This A Required Field So The User Must Add Their Email Address
Make This A Required Field To Force The User To Add Their Email Address.
Flip The Switch For The Required Mark To Show
Flip The Switch For The Required Mark To Show.
Click The Update Button To Save The Changes
Click The Update Button To Save The Changes.

Now you’ve got the user’s email address too.

Honeypot

We’ll use the honeypot function to prevent bots from completing the form. This should help reduce form completions by spam bots.

Like with the other fields, we’ll not create the field from scratch, but duplicate an existing one.

A note on the honeypot field: you won’t see it on the front end of the website. The whole point is that it’s not visible to human users.

Let’s add a Honeypot.

Right Click The Email Field's Blue Button
Right Click The Email Field’s Blue Edit Button.
Click The Duplicate Button
Click The Duplicate Button.
Click The Duplicate Email Field's Blue Edit Button To Ensure It's Active
Click The Duplicate Email Field’s Blue Edit Button To Ensure It’s Active.
Change The Text To Reflect The Field's Type
In The Left Hand Sidebar, Change The Text For The Field ID To Reflect The Field’s Type. In this case: honeypot.
Change The Field Type To Honeypot
Change The Field Type To Honeypot.

With the next few settings you’re disabling a bunch of things to ensure nothing related to the Honeypot field shows up on the form.

Remove The Label Text
Remove The Label Text.
Disable The Label For This Field
Disable The Label For This Field.
Disable The Autocomplete Option
Disable The Autocomplete Option.
Click The Update Button To Save All Changes
Click The Update Button To Save All Changes.

You now have one more locked door for a spammer to try and pry open.

Department dropdown

Now let’s add a dropdown with our imaginary company’s three departments:

  • Sales
  • Accounting
  • Returns

I also created three email addresses for the purpose of this tutorial:

  • sales@
  • accounting@
  • returns@

We’ll check at the end of this tutorial if the form sends to each email address correctly.

You can add more departments if you want and change it to whatever you wish. You can even use a single email address for more than one department.You can also CC or BCC email addresses. All of this is possible with Elementor and Piotnet, but that’ll be for another article.

Let’s add the department dropdown field.

Like with the previous field, we’ll make a copy of an existing field and change some details.

Right Click The Honeypot Field's Blue Edit Button
Right Click The Honeypot Field’s Blue Edit Button.
Click The Duplicate Button
Click The Duplicate Button.
Change The Field ID To Department
In The Left Hand Sidebar, Change The Field ID To: department.
Change The Field Type To Select
Change The Field Type To Select.
Add The Label, Choose a department
Add The Label, Choose a department.
Switch On The Show Label Option
Switch On The Show Label Option.
Make This A Required Field So The User Is Forced To Choose A Department
Make This A Required Field So The User Is Forced To Choose A Department.
Switch On The Required Mark Option
Switch On The Required Mark Option.

In the next step you need to add a pipe character. It’s also known as a vertical bar, like this: |.

Just in case the image doesn’t make it clear, you need to add the department name, followed by a pipe (vertical bar), followed by that department’s email address.

Here’s an example:

  • Sales|sales@yourwebsitename.com
Add Your Departments Into The Options Section. After Each Department, Add A Pipe Character, Followed By The Email For That Department
Add Your Departments Into The Options Section. After Each Department, Add A Pipe Character, Followed By The Email For That Department.
Click The Update Button To Save Changes
Click The Update Button To Save Changes.

Now it’s easy for the user to get hold of the correct department in your organization.

Message field

Now let’s add a message field so the user can explain their need.

Again, we’ll simply duplicate an existing field and change the settings.

Right Click On The Select Field's Blue Edit Button
Right Click On The Select Field’s Blue Edit Button.
Duplicate The Field
Duplicate The Field.
Change The Field ID To Message
In The Left Hand Sidebar, Change The Field ID To: message.

The next setting (textarea) ensures you give the user enough room to explain their need or problem. You could always choose a standard text field, but then the user won’t be able to expound.

Change The Field Type To Textarea
Change The Field Type To Textarea.
Change The Label To Your message
Change The Label To: Your message.
Change The Placeholder Message To Something More Appropriate. In This Case, We're Making It, How can we help?
Change The Placeholder Message To Something More Appropriate. In This Case: How can we help?
Make Sure The Field Is Set To Required And The Required Mark Is Active
Make Sure The Field Is Set To Required And The Required Mark Is Active.
Increase The Number Of Rows To Make The Textarea Wider
Increase The Number Of Rows To Make The Textarea Larger.
Click The Update Button To Save All Changes
Click The Update Button To Save All Changes.

Now the user can explain their want or need to you in their own way. That means your form is market oriented.

The bulk of the form is now done.

The send button

We’re going to look at two ways to add a send button: a simple, utilitarian way and an elegant way.

The utilitarian button contains a standard call to action, while the elegant button changes text based on the department the user chooses from the department dropdown field in the form.

In terms of looks it’s not a major change but I think you’ll agree it’ll make your company look more professional if you add this little touch.

Simple send button

Let’s do the utilitarian way first.

Add the button

Click The Nine Dot Menu To Reveal All Elements
Click The Nine-Dot Menu To Reveal All Elements.
Scroll Down Until You Find The PAFE FORM BUILDER Submit Button
Scroll Down Until You Find The PAFE FORM BUILDER Submit Button.
Drag The Submit Button Into The Page And Drop It Underneath The Select Field
Drag The Submit Button Into The Page And Drop It Underneath The Select Field.
The Button Is Now Visible Below The Text Area
The Button Is Now Visible Below The Text Area.
Get the department dropdown shortcode

Now you need the shortcode Piotnet automatically creates for the department dropdown field.

That means you need to open the settings for the dropdown field.

Click On The Blue Edit Button For The Department Selection Field
Click On The Blue Edit Button For The Department Dropdown Field.
Highlight And Copy The Shortcode
Highlight And Copy The Shortcode.
Add the shortcode to the button

Now go back to setting up the button.

Click On The Send Button's Blue Edit Button
Click On The Send Button’s Blue Edit Button.
Add The Form ID
Add The Form ID.
Enable The Setting To Remove Empty Form Input Fields From A Form That's Sent
Enable The Setting To Remove Empty Form Input Fields From A Form That’s Sent. This just cleans up the email you receive from the form.
Change The Button Text To Something More Sensible
Change The Button Text To Something More Sensible, Like: Send.
Click On The Select Icon Field
Click On The Select Icon Field.
Choose An Icon To Add To The Button
Choose An Icon To Add To The Button.
Click On The Email Box
Click On The Email Box.
Paste The Shortcode You Copied From The Department Select Field Into The To Field
Paste The Shortcode You Copied From The Department Select Field Into The To Field.
Personalize The From Name Field
Personalize The From Name Field.
Ensure Your Email Fields Contain The Correct Email Addresses
Ensure Your Email Fields Contain The Correct Email Addresses.
Click The Update Button To Save Changes
Click The Update Button To Save Changes.
Add a custom message

This is an optional step, but will add yet another layer of professionalism to your form.

Click On The Custom Messages Box
Click On The Custom Messages Box.
Add A Personalized Success Message
Add A Personalized Success Message.
Click The Update Button To Save Changes
Click The Update Button To Save Changes.

The simple, utilitarian form is ready for use.

Test the simple option

Sending a message to each department reveals that the simple utilitarian form indeed works fine.

The Messages From The Piotnet Form In My Gmail Inbox
Messages From The Utilitarian Piotnet Form In My Gmail Inbox.
The Message To The Sales Department
A Message To The Sales Department Sent From The Utilitarian Form.
The Message To The Accounting Department
A Message To The Accounting Department Sent From The Utilitarian Form.
The Message To The Returns Department
A Message To The Returns Department Sent From The Utilitarian Form.

Elegant send button

Now it’s time to build a form with a more classy send button, which to the untrained eye looks no different from the utilitarian button.

And although it looks like a single button, we’re actually setting up a button for each department that only shows when a user chooses that button’s department from the dropdown list.

In other words, only the sales send button will show if the sales department is chosen from the dropdown, while the same applies to any other button and its corresponding department available in the dropdown field in the form.

The user doesn’t know there are three buttons. To them it looks like it’s a single button the text of which changes according to their department preference.

Copy the form

Instead of starting from scratch or copying only a field or two from the old form, we’re going to copy over the whole section containing the form we created above, change the title, edit the form’s details and edit and duplicate the send button.

Duplicate the main section

We’ll start by making a copy of the whole section containing the current form.

Right Click On The Top Section's Blue Button
Right Click On The Top Section’s Blue Button.
Duplicate The Section
Duplicate The Section.
Change the heading

Let’s change the heading so there’s a clear distinction between the headings for the two forms.

Scroll Down To The Duplicated Section's Heading
Scroll Down To The Duplicated Section’s Heading.
Highlight The 1
Highlight The 1.
Change The 1 To 2
Change The 1 To 2.
Change the background color

This is optional, and in fact, useless as far as the forms go, but makes it easier to distinguish between the two sections.

Click On The New Section's Blue Button
Click On The New Section’s Blue Edit Button.
In The Left Hand Sidebar, Click On The Style Tab
In The Left Hand Sidebar, Click On The Style Tab.
Click On The Brush Icon For Background Type
Click On The Brush Icon For Background Type.
Click Inside The Little Transparent Box In Line With Color
Click Inside The Little Transparent Box In Line With Color.
Choose A Color. In This Case I'm Making It White
Choose A Color. In This Case I’m Making It White.
Click The Update Button To Save Changes
Click The Update Button To Save Changes.
Edit the Form ID

This is an essential step. Not really if you only have a single contact form on your website, but for the forms in this tutorial to work correctly this is a must.

Here’s why…

Say you’re using Piotnet to create two or more forms on a single page on your website.

You do exactly what I do, which is make a copy of the first form from which to create the second one.

But you forget to edit the second form’s Form ID.

Piotnet won’t see two forms, like you do.

Piotnet sees all fields with the same Form ID as part of the same form.

So let’s change the Form ID for the second form’s fields to avoid crossing wires with the first form.

Click On The Name Field's Blue Edit Button
Click On The Name Field’s Blue Edit Button.
In The Form ID Field, Change The Input To elegant_form
In The Form ID Field, Change The Input To: elegant_form.
Click On The Email Field's Blue Edit Button
Click On The Email Field’s Blue Edit Button.
In The Form ID Field, Change The Input To Elegant Form
In The Form ID Field, Change The Input To: elegant_form.
Click On The Honeypot Field's Blue Edit Button
Click On The Honeypot Field’s Blue Edit Button.
In The Form ID Field, Change The Input To Elegant Form
In The Form ID Field, Change The Input To: elegant_form.
Click On The Department Dropdown Field's Blue Edit Button
Click On The Department Dropdown Field’s Blue Edit Button.
In The Form ID Field, Change The Input To Elegant Form
In The Form ID Field, Change The Input To: elegant_form.
Click On The Message Field's Blue Edit Button
Click On The Message Field’s Blue Edit Button.
In The Form ID Field, Change The Input To Elegant Form
In The Form ID Field, Change The Input To: elegant_form.
Remove the pipe characters and email addresses

In the dropdown field for the first form, in order for the form to work, we needed to add the department, followed by a pipe character, followed by an email address for that department.

In the dropdown field for the form with the elegant button you MUST remove the pipes and email addresses, so only the department names remain.

Remove The Pipe Characters And Email Addresses From The Options Field
Remove The Pipe Characters And Email Addresses From The Options Field.

Edit the Send button

Now it’s time to adjust the send button of the second form.

We’re turning this into the elegant send button mentioned at the beginning of the article. It looks similar to the standard, utilitarian button, but changes text according to the department chosen from the dropdown.

But here’s a secret…

It’s not a single button. We’re creating three buttons, one for each department, and setting up the form to show the correct button for the department chosen by the user from the dropdown menu. So at any given time, one button is active, while two other buttons are hidden.

Click On The Send Button's Edit Button
Click On The Send Button’s Edit Button.
Adjust the Form ID

This is an important step. This ensures that this send button works only for this form.

In The Form ID Field, Change The Input To Elegant Form
In The Form ID Field, Change The Input To: elegant_form.
Add a specific call to action

Although it’s fine to use Send as a call to action for the utilitarian form, we want to make the elegant button live up to its name.

So we’ll change the button text accordingly.

Change The Button's Text To Send To Sales Department
Change The Button’s Text To: Send to Sales Department.
Add the correct email address

With the utilitarian form we added all the email addresses to the form’s dropdown field.

Then we added a single button and used a shortcode generated by the dropdown field to have the message delivered to the correct department.

In the case of the elegant button we use only ONE email address per button. (Remember, we’re adding three buttons and showing only the correct one for a chosen field.)

Scroll Down To The Email Box And Open It
Scroll Down To The Email Box For The Send Button And Open It.
In The To Field, Add The Appropriate Email Address For This Button
In The To Field, Add The Appropriate Email Address For This Button. In The Sales Department’s Case, It’s The sales@ Email Address.
Make Sure The Rest Of The Fields Contain The Correct Email Address And Name
Make Sure The From Email, From Name And Reply-To Fields Contain The Correct Email Address And Name.
Get the dropdown field shortcode

We need the shortcode generated by the department dropdown.

We’ll use it for setting up the send button’s conditional logic.

Click On The Department Dropdown
Click On The Department Dropdown.
Highlight And Copy The Shortcode For The Dropdown Field
Highlight And Copy The Shortcode For The Dropdown Field.
Add conditional logic

It’s Piotnet’s conditional logic that gives us the ability to change the button.

In this case, we’re telling the button to show only when the condition we prescribe is met. You can set up multiple conditions, but for the purpose of this tutorial we only need a single condition.

It’s like telling the form, “if the user selects the Sales department from the dropdown list, show only the Send to Sales Department button.”

Click On The Button's Blue Edit Button
Click On The Send Button’s Blue Edit Button.
Scroll Down And Open The Conditional Logic Box
Scroll Down And Open The Conditional Logic Box.
Enable Conditional Logic For The Button
Enable Conditional Logic For The Button.
Click On The Blank Box Below Easing
Click On The Blank Box Below Easing.
Click On The Send Button's Blue Edit Button
Click On The Send Button’s Blue Edit Button.
Paste The Department Dropdown's Shortcode Into The Field That Reads, Show The Submit If
Paste The Department Dropdown’s Shortcode Into The Field That Reads: Show The Submit If.
Change The Comparison Operator To Equals
Change The Comparison Operator To: equals.
Inside The Value Field, Type The Word, Sales, As Per The Corresponding Department Found In The Dropdown
Inside The Value Field, Type The Word: Sales. This Corresponds To The Department Found In The Dropdown.

Duplicate the Send to Sales Department button

Since we’re creating three buttons, it makes sense to duplicate the existing button, then change the details where necessary.

Right Click The Send Button's Blue Edit Button
Right Click The Send Button’s Blue Edit Button.
Duplicate The Button
Duplicate The Button.
Click The Duplicate Button's Blue Edit Button To Ensure You're Editing The Right Button
Click The Duplicate Button’s Blue Edit Button To Ensure You’re Editing The Right Button.
Edit the button text

Obviously, the text for the button for the accounting department must be different.

Change The Text To Send To Accounting Department
Change The Text To: Send to Accounting Department.
Change the email address

Since we want this button to send to a different email address, we must adjust the email setting.

Scroll Down To The Email Box And Open It
Scroll Down To The Email Box And Open It.
In The To Field, Add The Appropriate Email Address For This Button
In The To Field, Add The Appropriate Email Address For This Button. In This Case It’s The accounting@ Email Address.
Make Sure The Rest Of The Fields Contain The Correct Email Address And Name
Make Sure The Rest Of The Fields Contain The Correct Email Address And Name.
Edit the conditional logic

We want this button to appear for a different condition than the previous button.

Scroll Down And Open The Conditional Logic Box
Scroll Down And Open The Conditional Logic Box.
Click On The Conditional Box
Click On The Conditional Box.
Change The Value To Accounting, As Per The Accounting Option In The Dropdown Field
Change The Value To: Accounting, As Per The Accounting Option In The Dropdown Field.
Click The Update Button To Save All Changes
Click The Update Button To Save All Changes.

Duplicate the Send to Accounting Department button

We need one more button. Therefore we’ll duplicate the Send to Accounting Department button.

Right Click The Accounting Send Button's Blue Edit Button
Right Click The Accounting Send Button’s Blue Edit Button.
Duplicate The Button
Duplicate The Button.
Edit the button text
Click On The Duplicated Button's Blue Edit Button
Click On The Duplicated Button’s Blue Edit Button.
Change The Button Text To Align With The Corresponding Department
Change The Button Text To Align With The Corresponding Department. In This Case: Send to Returns Department.
Change the email address
Scroll Down To The Email Box And Open It
Scroll Down To The Email Box And Open It.
In The To Field, Add The Appropriate Email Address For This Button
In The To Field, Add The Appropriate Email Address For This Button. In This Case It’s The returns@ Email Address.
Make Sure The Rest Of The Fields Contain The Correct Email Address And Name
Make Sure The Rest Of The Fields Contain The Correct Email Address And Name.
Edit the conditional logic
Scroll Down And Open The Conditional Logic Box
Scroll Down And Open The Conditional Logic Box.
Click On The Conditional Box
Click On The Conditional Box.
Change The Value To Returns, As Per The Dropdown Field's Corresponding Value
Change The Value To Returns, As Per The Dropdown Field’s Corresponding Value. In This Case: Returns.
Click The Update Button To Save All Changes
Click The Update Button To Save All Changes.

You now have a form the send button of which changes based on the department chosen from a dropdown field.

Test the elegant option

With the utilitarian form you only need to check whether the form sends to the right department.

With the elegant form, you need to see whether the button changes according to the dropdown, as well as send to the correct department.

The dropdown fields and buttons

From these screenshots you’ll see the dropdown fields correspond to the correct buttons.

The Accounting Dropdown Item Shows The Send To Accounting Department Button
The Accounting Dropdown Item Shows The Send To Accounting Department Button.
The Returns Dropdown Item Shows The Send To Returns Department Button
The Returns Dropdown Item Shows The Send To Returns Department Button.
The Sales Dropdown Item Shows The Send To Sales Department Button
The Sales Dropdown Item Shows The Send To Sales Department Button.
The emails

The form sends to the correct email address for each department.

Emails Sent Through The Elegant Piotnet Forms In My Gmail Inbox
Emails Sent Through The Elegant Piotnet Forms In My Gmail Inbox.
A Message To The Sales Department Sent From The Elegant Form
A Message To The Sales Department Sent From The Elegant Form.
A Message To The Returns Department Sent From The Elegant Form.
A Message To The Returns Department Sent From The Elegant Form.
A Message To The Accounting Department Sent From The Elegant Form.
A Message To The Accounting Department Sent From The Elegant Form.

In conclusion

There you have it: a website form that sends a message to an email address based on a department chosen from a dropdown field.

And you have two button options too: a simple submit button that shows only a standard message or a submit button that changes text according to the department chosen from the dropdown.

It’s easy to do and will add a pleasant touch to your website visitors’ experience when they complete the form.

For more tutorials, add your email to the subscribe form in the footer of this page.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Get WordPress tutorials and online marketing tips delivered to your digital door

Scroll to Top
I won't spam you and you can easily unsubscribe any time you wish.