Hello! This video tutorial shows how to add a new field in TM AJAX Contact Form module in Joomla 3 templates.
Every Joomla 3 template has a contacts page with the contact form included.
Usually contact form has standard fields, e.g. “Name”, “E-mail”, “Phone” and “Message”:
You may want to add your own fields to the form for your site visitors to fill in.
Let’s learn how to do that.
The tutorial assumes you are already logged into your Joomla administration panel.
Navigate to Extensions ->Module Manager tab:
On the right hand side of the appeared page click on the items counter button and choose “All” option to have all the modules available displayed on the page:
Now that all the modules are visible on the page, use the CTRL+F/CMND+F key (Windows OS/Mac OS) to search for “TM AJAX Contact Form” text.
Click on the module title to open it for editing:
The TM AJAX Contact Form editing interface is opened in front of you.
Now, click on the Module Settings tab to open the page with contact form main settings:
The first thing you see is “Pretext” field, below is available contact form fields – this is where you should perform the changes.
Click on the “plus” (+) icon next to the field you would like to add the new field after. Let’s say you want to add “Subject” field after the “Phone” field:
You can see new empty field is appeared now:
Fill in the “Label” and “Name” fields and set the “Type” option for the newly added form field – in our case it should be “text”:
You should also choose whether the field is required or not required by setting appropriate option. Let’s make the subject field not required:
You probably noticed the “Bootstrap Size” option that also needs to be set.
By configuring this option you will set the field size – by choosing 12 you will mean that the field occupies the whole contact form container width just like the “Message” field does:
Number 4 means the field will occupy the third part of the form container, number 3 – the forth part and so on.
Let’s set the field to occupy the whole container width by choosing 12:
Scroll the page up and click the green “Save” button at the top left of the screen to apply changes:
Navigate to your contacts page and refresh the page to see changes. The “Subject” field is successfully added:
This is the end of the tutorial. You have learnt how to add new field in TM AJAX Contact Form module in your Joomla 3 template.
Feel free to check the detailed video tutorial below: