Categories

Featured templates

Joomla 3.x. How to add a new field in TM AJAX Contact Form module

Andre Flores September 15, 2015
Rating: 5.0/5. From 2 votes.
Please wait...

Hello! This video tutorial shows how to add a new field in TM AJAX Contact Form module in Joomla 3 templates.

Joomla 3.x. How to add new field in TM AJAX Contact Form module

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”:

joomla3_add_new_field_in_tm_ajax_contact_form_module_1

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.

  1. Navigate to Extensions ->Module Manager tab:

    joomla3_add_new_field_in_tm_ajax_contact_form_module_2

  2. 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:

    joomla3_add_new_field_in_tm_ajax_contact_form_module_3

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

  4. Click on the module title to open it for editing:

    joomla3_add_new_field_in_tm_ajax_contact_form_module_4

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:

joomla3_add_new_field_in_tm_ajax_contact_form_module_5

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:

joomla3_add_new_field_in_tm_ajax_contact_form_module_6

You can see new empty field is appeared now:

joomla3_add_new_field_in_tm_ajax_contact_form_module_7

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”:

joomla3_add_new_field_in_tm_ajax_contact_form_module_8

You should also choose whether the field is required or not required by setting appropriate option. Let’s make the subject field not required:

joomla3_add_new_field_in_tm_ajax_contact_form_module_9

You probably noticed theBootstrap 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:

joomla3_add_new_field_in_tm_ajax_contact_form_module_10

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:

joomla3_add_new_field_in_tm_ajax_contact_form_module_11

Scroll the page up and click the green “Save” button at the top left of the screen to apply changes:

joomla3_add_new_field_in_tm_ajax_contact_form_module_12

Navigate to your contacts page and refresh the page to see changes. The “Subject” field is successfully added:

joomla3_add_new_field_in_tm_ajax_contact_form_module_13

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:

Joomla 3.x. How to add new field in TM AJAX Contact Form module

Best Joomla Themes
This entry was posted in Joomla! Tutorials and tagged AJAX, contact, field, form, joomla, new. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket