How to create a Joomla contact form using Chronoforms 8 in 3 minutes

Adding a contact us form in Joomla or WordPress is straightforward with ChronoForms8, a versatile form builder that creates custom forms with email functionality. This step-by-step guide shows you how to build a Joomla contact form that emails form submissions to the site admin, and how to use ChronoForms8 in WordPress too. We’ll also introduce ChronoMails, an extension for advanced email management.

For a detailed overview of ChronoForms8, check this official tutorial.

5 Steps to set up a Joomla contact form using ChronoForms8

Step 1: Install ChronoForms

Make sure that you have ChronoForms 8 Joomla form builder installed

Step 2: Create a new form in ChronoForms 8

In the ChronoForms8 forms manager, click New to create a new form.

How to create a Joomla contact form using Chronoforms 8 in 3 minutes  image 1

  1. Enter the form title (e.g., "Contact Form") for admin identification.
  2. Set a unique form alias (e.g., "contact-form").
  3. Click Save to enable Quick Save and Preview features.

Step 3: Add few fields to your form

ChronoForms8 form creation interface showing title and alias fields

  1. In the "Load" event of your form’s Page, drag fields from the Views box on the right.
  2. Add four elements: two Text fields (for Name and Email), one Textarea (for Message), and one Button (for Send).
  3. Hover over the Email field, click the Edit icon to configure it.

Editing Email field settings in ChronoForms8

  1. Change the field label to "Email".
  2. Set the field name to a readable value, e.g., "email".
    Tip: Use human-readable field names to easily retrieve data using ChronoForms shortcode syntax, like {data:email}.
  3. Add two validation rules: ensure the field is not empty and contains a valid email address.

Email field validation settings in ChronoForms8

  1. Open the Button settings and change the label to "Send".
  2. Enhance the button by adding a "paper-plane" icon from the Font Awesome 6 free icons library.
  3. Adjust the button color for better visibility (optional).

Step 4: Setup the contact form Emails and Confirmation Message

  1. Switch to the "Submit" event of your page to handle form submission.
  2. Drag an Email action from the Actions box to the "Submit" event.
    Drag a Message view from the Views box to display a "Thank You" message after submission.

Configuring the Send button with an icon in ChronoForms8

  1. Open the Email action settings.
  2. Enter the destination email address (e.g., your admin email).
  3. Set the email subject, using shortcode {data:name} to include the Name field value.
  4. In the email body, use shortcodes like {data:field_name} for individual fields or {email:data_table} for a formatted table of all form data.
  5. (Optional) Add {data:name} in the Reply Name field to auto-populate the sender’s name in replies.
  6. (Optional) Add {data:email} in the Reply Email field to auto-populate the sender’s email in replies.

Adding Email action to Submit event in ChronoForms8

Step 5: Save and test the form

  1. Click Quick Save to save your form.
  2. Click Preview to test the form.

Email action configuration in ChronoForms8

Tip: Use ChronoForms shortcodes like {data:field_name} to dynamically insert field values from the "Load" or "Submit" events of the same or previous pages.

Using ChronoForms8 for a WordPress Contact Form

ChronoForms8 is also compatible with WordPress, allowing you to create a contact us form with similar functionality.

  1. Install the ChronoForms8 WordPress plugin
  2. Activate the plugin and navigate to the ChronoForms8 dashboard in your WordPress admin panel.
  3. Follow the same steps as above to create a form, add fields (Name, Email, Message, Send button), and configure the Email action.
  4. Embed the form on a WordPress page using the ChronoForms8 shortcode (e.g., [chronoforms8 alias="contact-form"]).
  5. Test the form to ensure it sends emails correctly.

Enhancing Forms with ChronoMails

ChronoMails, a new extension for Joomla, enhances email functionality with custom templates, email logging and newsletters.

Conclusion

ChronoForms8 makes it easy to add a contact form in Joomla or WordPress. By following this guide, you can create a custom form, configure SMTP for reliable email delivery, and explore ChronoMails for advanced features. Test your form thoroughly and check DNS settings to ensure emails reach their destination.