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

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.

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

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

7. Change the field label to "Email".
8. 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}.
9. Add two validation rules: ensure the field is not empty and contains a valid email address.

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

Step 4: Setup the contact form Emails and Confirmation Message

13. Switch to the "Submit" event of your page to handle form submission.
14. 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.

15. Open the Email action settings.
16. Enter the destination email address (e.g., your admin email).
17. Set the email subject, using shortcode {data:name} to include the Name field value.
18. 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.
19. (Optional) Add {data:name} in the Reply Name field to auto-populate the sender’s name in replies.
20. (Optional) Add {data:email} in the Reply Email field to auto-populate the sender’s email in replies.

Step 5: Save and test the form

21. Click Quick Save to save your form.
22. Click Preview to test the form.

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.