FAQs

How to create a contact form in Joomla or WordPress using Chronoforms 8

Posted

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 use ChronoForms8 in WordPress. We’ll also introduce ChronoMails, an extension for advanced email management.

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

Creating a Contact Form in Joomla with ChronoForms8

Follow these steps to set up a custom Joomla contact form using ChronoForms8.

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.

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).

Configuring the Send button with an icon in ChronoForms8

  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.

Adding Email action to Submit event 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.

Email action configuration in ChronoForms8

  1. Click Quick Save to save your form.
  2. 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 from the ChronoForms8 downloads.
  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.

Tip: Ensure your WordPress site has proper SMTP settings (see below) to avoid email delivery issues.

Configuring SMTP for Reliable Email Delivery

To ensure your Joomla or WordPress contact form sends emails reliably, configure SMTP settings for your hosting provider (e.g., GoDaddy or Hostinger). Incorrect SMTP settings can prevent emails from being delivered.

GoDaddy SMTP Setup

For Joomla, configure SMTP in Global Configuration:

  1. Go to System > Global Configuration > Server > Mail Settings.
  2. Set Mailer to SMTP, Host to smtpout.secureserver.net, Port to 587 (TLS), and enter your email credentials.
  3. Test the setup using Joomla’s “Send Test Mail” feature.

For WordPress, use the WP Mail SMTP plugin:

  1. Install and activate WP Mail SMTP.
  2. In WP Mail SMTP settings, enter GoDaddy’s SMTP details (Host: smtpout.secureserver.net, Port: 587, TLS).
  3. Send a test email to verify.

Hostinger SMTP Setup

For Joomla:

  1. In Global Configuration, set Mailer to SMTP, Host to smtp.hostinger.com, Port to 587 (TLS), and add your credentials.
  2. Test email delivery.

For WordPress:

  1. Configure WP Mail SMTP with Hostinger’s settings (Host: smtp.hostinger.com, Port: 587, TLS).
  2. Verify with a test email.

We tried both Godaddy and Hostinger and we find that Hostinger business email is the better deal, Use this link to get %20 discount

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 us 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.