Skip to content

dart-creations.com

Advertisement
Home arrow Joomla arrow Joomla Tutorials arrow Custom Joomla Forms

Print E-mail
Monday, 03 March 2008

Implementing Custom Joomla Forms

One hot topic on the Joomla Forums has always been implementing custom Joomla forms . Forms allow you to quickly and easily get information from your users. Joomla makes use of a number of forms to implement certain functionality, however it is not easy to implement Joomla forms . The following tutorial explains how to create your own Joomla forms pages. 

Implement your form

The first step when implementing a form, is creating the form itself. This seems like a pretty obvious step, however to do this in Joomla, you need to create a new article. Once you create the article, you need to create to insert the form code into the HTML. Well this is easier said than done. Each time you go into HTML mode of the WYSIWYG editor, enter the form code, and the article is saved, the form code is lost! The problem is that the editors strip the form code. Therefore, to create the form , you need to disable the WYSIWYG editor, and choose the No Editor option. This is done via Site > User Manager, click on Administrator (or the backend user you are using) and choose No Editor in the Editor options.

Step 1 - Creating the Form - Subscribe to Newsletter Example 

Once this has been done, you can now edit the Raw HTML, and once saved, the form tags remain there. So let's say you want to implement a Subscribe to Newsletter form.

<form action="#" method="post" ><div class="box">
                    <table width="400" border="0" cellpadding="3" cellspacing="0">
                      <tr>
                        <td colspan="2">Fields marked with an asterisk (<span class="fieldRequired">*</span>)
                          are required. </td>
                      </tr>
                      <tr>
                        <td colspan="2" height="10"></td>
                      </tr>
                      <tr>
                        <td align="right">E-mail<span class="fieldRequired">*</span>: </td>
                        <td> <input name="email" type="text" size="40" class="formField" />
                        </td>
                      </tr>
                      <tr>
                        <td align="right">First name<span class="fieldRequired">*</span>: </td>
                        <td><input name="firstname" type="text" size="40" class="formField" /></td>
                      </tr>
                      <tr>
                        <td align="right">Last name<span class="fieldRequired">*</span>: </td>
                        <td><input name="lastname" type="text" size="40" class="formField" /></td>
                      </tr>
                      <tr>
                        <td colspan="2" height="10"></td>
                      </tr>
                      <tr>
                        <td colspan="2">
                          <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                              <td width="251" align="right">
                                <input type="submit" name="subscribe"/></td>

                              <td align="right"> </td>
                            </tr>
                          </table></td>
                      </tr>
                    </table>

                </form> 

The form above simply asks for an email address, a name and a firstname.

Step 2 - Processing the Subscription Form

The second crucial step is processing the form. To do this, we will make use of a plugin which allows us to execute arbitrary PHP code. The plugin is the Jumi plugin. Install and enable this plugin. Once the plugin has been enabled, create a 2nd article. This article will include a php file which will process the subscription form. The article should contain the following code:

{jumi [forms/subscribe.php]}

 You now need to create the PHP file which will process the form. Create a directory named forms in the root of your Joomla installation, and create the following code in subscribe.php file in the forms directory. (Remember to create an empty index.html file in the directory to avoid snoops). Also make sure you have the if( ! defined( '_VALID_MOS' ) && ! defined( '_JEXEC' ) ) defined, or you will be exposed to hack attacks.

<?php
if( ! defined( '_VALID_MOS' ) && ! defined( '_JEXEC' ) )
{
  die( 'Direct Access is not allowed.' );
}
else
{
$email=$_POST['email'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$to=" This e-mail address is being protected from spam bots, you need JavaScript enabled to view it ";
$message="A Subscription Form has been submitted.\n\n$firstname $lastname just filled in the website Subscription form.\n";
$message.="First Name: $firstname\n";
$message.="Last Name: $lastname\n";
$message.="Email: $email\n";
    if(mail($to,"Subscription Form",$message,"From: $email\n")) {
    echo "Thank you for submitting a Subscription form.";
    } else {
    echo "There was a problem sending the mail. Please check that you filled in the form correctly, or submit the information via the Contact Us page. Thank you.";
    }
}
?>

 So what have we got here? This PHP code reads the inputs from the form code in Step 1, and sends an email to the email address specified in the to variable with the information collected. If the mail is successful, it outputs a success and thanks message to the user, otherwise, it outputs and error message.

Step 3 - Joining the Subscription to the Processing

Ok, we we've written the form , and the processing code. Now how do we pass control from the form to the processing page? We need to find the address of the processing page. This can be done by creating a temporary menu item link to the article we have just created. This will then provide us with the menu item link which will be something similar to the following:

index.php?option=com_content&view=article&id=10&Itemid=11

You now need to insert this code into the action part of the original form you have written. So you need to change

<form action="#" method="post" >

to

<form action="index.php?option=com_content&view=articl&id=10&Itemid=11" method="post" >         

This  code will submit the form to the processing page you have created, the articles executes the PHP, and you get an email notifying you that  you have a new subscriber!

Hope this tutorial helps! You can tweak the tutorial to create your own forms, just change the forms and add the relevant input processing to the PHP file and you'll be good to go.

Problems - Form Spamming

Unfortunately, in this day and age, form spamming is all the rage. The above might subject your website to form spamming. To ensure that spammers are not using your site for sending out spam, you'll need to implement the recommendations of the following article: Preventing spam when using PHP's mail function. Or as always I'd recommend taking the easy way out.

The easy way out - Joomla Forms Component

The Joomla forms component, is definetely the best forms component around. Instead of working through all the stuff mentioned above manually, just design your form through the backend interface, publish to a page and start receiving form submissions. Especially when you have a large number of forms , this component will be priceless.

Comments
Add New Search RSS
samik dutta  - this is really very helpful   |116.193.142.xxx |2008-08-23 22:47:52
thanks a lot ....... it works ....... :-)
norm  - displaying results   |70.44.160.xxx |2008-08-27 04:06:00
how can you get your results to display in an iframe?
Brad   |99.168.76.xxx |2008-09-09 03:46:58
Does it post it to the site? or just email it to the admin.
bharat  - include file   |210.211.166.xxx |2008-10-07 06:52:10
how can we use include file(i.e css file and javascript file )with this
method?
i want to apply javascript check on my form and also the look and feel
of my form according to my self but this should be in an external file not on
the same form file.

any help? please
bharat  - for include file with jumi   |210.211.166.xxx |2008-10-07 09:17:33
Hi,Friends,

Some time before i puted a query that how can we add a include
file(i.e css or js file) with jumi and really i am happy that i got he
answer.

This is as below.
1. worked as same as tutorial
2.make your css
file(here default.css
3. make your js file(javascript file)(here
function.js)
4.put these file in forms folder
5. pass as 2nd and 3rd argument as
in step 2 i.e {jumi [forms/subscribe.php] [forms/default.css]
[forms/function.js] }

And the thing will display as you want.

with
thanks
bharat bhushan
O'Neil  - Awesome theme   |72.252.124.xxx |2008-10-18 22:44:42
Yow. Tough!!. This component has made my Saturday morning. It has saved me so
much time.

It works perfectly. Thank you for this tutorial.
Allen  - Excellent!   |24.233.213.xxx |2008-10-23 22:47:36
This solved my problem with an html page. Thank you, thank you!
Antinoos  - Registered access   |82.241.222.xxx |2008-10-25 23:51:30
Hello,
thank you for this tutorial. I tried all forms component and I have the
same problem witj joomla 1.5. after few tried, when I want to allow only
registered users to see the form and fullfil it, the component begin to have
strange reactions. For artforms, after few tries I can't connect to mod_login
anymore, with an error 404. With other components, the email confirmation is not
sent. I can't understand why those problems occur with the access level. It
seems that it has not yet resolved. I don't know if your tutorial can allow me
to manage registered accesses and if possible to do with your method.

Regards
Ravindra Agarwal  - nice logic   |59.162.255.xxx |2008-11-08 12:33:43
Its a good logic to insert a form in joomla code by hinding WYSIWYG editor, but
it is not a good way too do this.
Can anybody tell me how can do with using
Joomla in proper way

Thanks
Write comment
Name:
Email:
 
Website:
Title:
UBBCode:
[b] [i] [u] [url] [quote] [code] [img] 
 
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Please input the anti-spam code that you can read in the image.

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

Last Updated ( Thursday, 03 July 2008 )
 

Sponsors

Let us help you!

Do you feel frustrated after spending hours trying to setup Joomla? We at DART Creations can help you quickly setup your website. What you get is a professionally setup website, which you can easily maintain! Click here to contact us!

Your Ad Here

Ad Space for Sale.
125,000+ page views a month.
Advertising Rates

Login Form






Lost Password?
No account yet? Register

Buy us a beer!

If we've helped you, consider buying a beer. It will inspire us to keep on giving! Cheers! (€3)






Powered By PageCache
Generated in 3.12438 Seconds