home > content management systems (CMS) > joomla!

Create a Contact Form for Joomla!

The tutorial we have written below outlines the steps for adding an email form to your Joomla! website.

1. Create Your Form HTML

Before working on the Joomla side, it is important to first generate some form HTML code. The best way to create this code is via a free service called myContactForm.com. The steps for doing this are outlined here.

2. Login to your Joomla! Adminstration Panel

a. Go to your Joomla web site and login to the administration panel.

Login to Joomla

3. Configure Joomla! to Allow Form HTML in Articles

a. Click the Article Manager button

Click the Article Manager Button

b. Click the Options button in the top right corner

Click the Options Button

c. Click the Text Filters tab

Click the Text Filters Tab

d. Scroll down to Super Users and under the Filtering Type selection box select No Filtering

Select No Filtering for Super Users

e. Select the Save and Close button

Select Save and Close

3. Create a new Article and Embed the Form HTML

Below we are outlining the steps for adding an email form to a new article. Note that you could use a very similar process to add an email form to an already existing article.

a. Click the New Article button

Create a New Article

b. Click the Edit HTML Source button

Click the Edit HTML Source Button

c. Paste the form HTML into the HTML Source Editor window (CTRL+V or Right Click and Select Paste). If you do not have your form code created and copied, please read this tutorial to learn how to do so.

Paste in Your Form HTML Code

d. Click the Update button

Click the Update Button

e. Click the Save and Close button

Click the Save and Close Button

4. Test Your Form

Open a web browser and go to the web page containing your form. Fill out the form and press the submit button to test it.

Common Problems Encountered by Users:

The web page is showing a bunch of HTML instead of a form.

When this occurs, it is caused by the form HTML being pasted into the Article Text of your web page using plain text formatting instead of HTML formating. When inputting the form code, make sure you enter it into the Edit HTML Source page.

Click the Edit HTML Source Button

I submit the form and get a form location error.

If you are using myContactForm.com, you will need to login and make sure that you've set the Form Location setting to the proper URL for your form.

a. Login to myContactForm.com

b. Click the Edit Button

c. Click the Basic Form Information Button

d. Enter all variations of the URL where the form will appear. Typically this is the full URL of your web form with and without the www subdomain. You can also use wildcards (*) in this setting. For examples using http://www.mydomain.com/* would allow the form to be placed on any page uploaded to mydomain.com.

e. Click