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:
- 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.
- 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.
- Probably one of the greatest form builders you’ll ever see.
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.
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.
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.
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.
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.
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.
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.
From the dropdown menu, select Elementor Full Width.
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.
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.
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.
Choose the heading element from the sidebar and drop it into the new section.
I’ll change the heading text to show users what this section is about.
The section where the first form goes is now set up. Let’s move on to building a useful WordPress contact 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.
The first field we’re adding is the name field, which makes sense, since you want to know who’s contacting you.
You now have a name field in your WordPress form, thanks to Piotnet Addons For Elementor!
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.
Now you’ve got the user’s email address too.
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.
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.
You now have one more locked door for a spammer to try and pry open.
Now let’s add a dropdown with our imaginary company’s three departments:
I also created three email addresses for the purpose of this tutorial:
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.
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:
Now it’s easy for the user to get hold of the correct department in your organization.
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.
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.
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
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.
Add the shortcode to the button
Now go back to setting up the button.
Add a custom message
This is an optional step, but will add yet another layer of professionalism to your form.
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.
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.
Change the heading
Let’s change the heading so there’s a clear distinction between the headings for the two forms.
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.
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.
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.
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.
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.
Adjust the Form ID
This is an important step. This ensures that this send button works only for this 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.
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.)
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.
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.”
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.
Edit the button text
Obviously, the text for the button for the accounting department must be different.
Change the email address
Since we want this button to send to a different email address, we must adjust the email setting.
Edit the conditional logic
We want this button to appear for a different condition than the previous button.
Duplicate the Send to Accounting Department button
We need one more button. Therefore we’ll duplicate the Send to Accounting Department button.
Edit the button text
Change the email address
Edit the conditional logic
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 form sends to the correct email address for each department.
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.