The Hot Simple Contact module lets you create the forms for your website. After adding the user inputs to collect data from your visitors and setting a few parameters, your form is ready. The form data that you collect from the form will be emailed to the specified e-mail address. A custom anti-spam protection is included to protect your form from spam bots and fake submissions. The form is compatible with Bootstrap.
This module is pre-installed and used on many of our Joomla templates packages. However, it can perfectly work with any other template that supports Bootstrap. The Joomla contact form module is developed using modern code without unnecessary Javascript. This module relies on modern browser features regarding the required field checking, e-mail formatting checks, numerical value checks, display of user-friendly calendar, and so on.
The example form above is from the Model Portfolio Template for Joomla.
Module Properties
You can use multiple module instances on the same page (multiple forms). However, in this case, make sure all of them have a different Module Class Suffix parameter.
By default, the field names are displayed as form labels. However, if you disable the Display Labels parameter, the placeholder texts will be used instead.
The Required Field Label indicates the specific label that will be added to all required fields (the fields that must be filled up before the form submission).
Finally, in the Text Before The Form and Text After The Form you can add any text or any custom HTML that will be displayed above the form (above the first form field) and below the form (below the submit button).
Form Fields — User Inputs
Using the Hot Simple Contact Joomla module, you can add various user inputs to your form. All types of commonly used user inputs are supported. Each of these user inputs represents a field in the form and one piece of data that you can collect from the visitors of your website. Here's the list of user inputs supported by this Joomla contact module:
- Input Text - The most commonly used form field. It's a single-line form field that your visitor can fill up with any text.
- E-mail - It's similar to the input text, but this field can accept only a valid e-mail address. It uses native browser validation to check the proper e-mail address formatting. If a form contains this field, the form submission will be blocked until the proper e-mail address is entered into this field.
- Number - This field can accept numbers only and it will prevent entering other characters (letters or special characters). For example, it's appropriate for phone numbers.
- Date - If you need to include a date in your form, you can use this form field rather than using an input text field. This field type includes a small user-friendly calendar of date selection. This calendar comes natively from browsers without any additional Javascript code that slows down your website.
- Textarea - This field can accept any text from your website visitors in multiple lines. It's appropriate if you want to collect shorter or longer textual messages from your visitors, such as questions, explanations, etc.
- Select - If you need to ask clients to select one of two or more of the predefined options, you can use this field type. The options are entered into the module parameters as field values, one option per line.
- Checkbox - This form field allows your visitors to check if they agree with something or not. This is often used as a confirmation of acceptance of terms and conditions but can be used for different purposes as well.
Each user input that we listed above has specific parameters you should define. Depending on these parameters, the form field will be displayed on the form in one way or another. So, these are the parameters available for each form field:
- Name - Each field should contain a descriptive name. This name will be used on the form to explain client what should be entered into this field. Also, the submitted data will be e-mailed to the website owner under this name.
- Required - This option indicates if this user input is required or not. If it's required, the form can't be submitted until this field is empty.
- Value(s) - The predefined value of the form field. If the value is defined, it will be automatically entered but can be changed by the website visitor. You can leave this parameter empty for most use cases. However, you should enter the options for the Select form field here. This parameter should not be mixed up with Placeholder.
- Placeholder Text - This is the text that explains what should be entered into the form field. This text is not an actual value of the field. It's used just for a description of the field.
- Width - By default, the field will use 100% width of the form container. However, you can reduce this value here to 50%, 33%, 25%, or 16%. It will make two or more fields share the same horizontal row.
The example form above is from the Hair Salon Template for Joomla.
Form Submission
When the form is properly filled up and all required fields have values, it's ready for submission. The form will be submitted when the user clicks the submit button. This button can have custom text and width.
Additionally, as a part of the form submission process, you can add an anti-spam question and an appropriate answer. This question can be anything you imagine, for example, a simple mathematical equation or logical question, such as "How many eyes does a man have" or "How many fingers are there on the hand". The real person will easily answer the question, but spam bots will be challenged to submit the form. So, using this kind of protection will reduce the amount of spam you are receiving.
After the Form Submission
Once the form has been submitted successfully by a website visitor, the informational message will be displayed on the screen. Under the "E-mail Settings" tab in the Hot Simple Contact Joomla module parameters, you should specify the e-mail address where the form data would be delivered. After each successful form submission, the owner of this e-mail address will receive a message from the website with all field names and field values listed.
The example form above is from the Business Joomla Template.