How to Create a Joomla Contact Form

How to Create a Joomla Contact Form

This tutorial will show you how to create a Joomla contact form.

We're going to show you two different approaches:

  1. Using the default Contacts components, so you can create a Joomla contact form without installing any extra extensions.
  2. Using the powerful Shack Forms extension, so you can take advantage of extra features for your Joomla contact form.

Option #1. Use the Default Contacts Component

Let's start with the Contacts component that's available in every Joomla site. This approach is easy to use and doesn't require you to install anything new. The downside is the default component doesn't have many features and doesn't save form submissions.

Now here's the test version of that tutorial:

  • Go to Components > Contacts > Contacts.

Navigating to the Joomla contact form

  • Click the green "New" button.
  • Enter your name in the Name field.
  • Enter your email address. 
  • Enter any other details you want on the contact form.
  • Click the "Save & Close" button when you've finished.

create new contact

  • I would also recommend clicking the "Display" tab and changing the "Display Format" to "Plain". This will give the best layout for your form.

display format plain

Next, let's going to make sure that people can see the contact form.

  • Go to Menus > Main Menu > Add New Menu Item.

add new menu item for a Joomla contact form

  • Set a "Menu Title" for your contact form. This is what people will see in your site's navigation:

Adding a title to a Joomla contact form

  • Click "Contacts" and choose "Single Contact":

Adding a title to a Joomla contact form

  • Now we're going to choose the contact form we created. Click "Select" next to "Select Contact".

Select a Joomla contact form

  • Choose the Joomla contact form you created earlier:

select contact

  • Click the "Save & Close" button.
  • Visit the front of your site and you'll see the "Contact Us" link.

Active Joomla menu link for a Joomla Contact Form

  • Click the "Contact Us" link and you'll see your completed Joomla contact form:

final result for your joomla form


Option #2. Use a Joomla Forms Extension

Shack Forms is the best Joomla extension for flexible and stylish Joomla forms. 

Let's show you how to create a contact form with Shack Forms. The form will feature only three fields, collecting a name, an email address, and a message. 

  • Install Shack Forms.
  • Go to Extensions > Modules.
  • Create a new "Shack Forms" module.
  • Set the "Status" to "Published"
  • Choose the "Static" option when you're creating your Shack Form. This is the "Layout" option on the first screen of Shack Forms.

static Joomla Contact Form

Good job! You are done with the basic module settings. Now you will move to creating the contact form itself.

  1. Click the Fields tab
  2. Click the Add new field button

The Add new field button in a Joomla Contact Form

To create your first field, choose these options:

  • Field label: Your Name
  • Field type: Text
  • Required: Yes

> Your Name field settings for a Joomla Contact Form

  • Click "Add new field" button once again
    • Field label: Your Email
    • Field type: E-mail
    • Required: Yes

Your Email field

  • Click "Add new field" button once again
    • Field label: Your Message
    • Field type: Textarea
    • Required: Yes

Your Message field for a Joomla Contact Form

  • Click "Save"
  • Once you save a form in the Static position, go to a Joomla article.
  • Click the "Module" button in the Joomla text editor. If you're not using the default editor, you can still use a very similar approach using Joomla's module syntax.

Joomla contact form module

  • Click the green button for the module you created:

module placement for a Joomla contact form

  • The module will now be placed into the article, using a shortcode. 

loadmodule for a Joomla contact form

  • Save the article and visit the front of your site. You will be able to see your new form live on your site:

whole site Joomla contact form


Summary

If you want to a simple Joomla contact form, use the core Contacts component.

If you want more advanced features, or need to store the messages sent to you, then give Shack Forms a try.


More Useful Joomla Contact Form Tutorials


 What's Next?

Save $1,000's when you sign up to Joomlashack's Everything Club.

You will get access to all our 32 extensions, and legendary support!

  Click here to join the Everything Club