Mambotastic - The Mambo And Joomla Users Portal

If you've ever wondered how you can create interactive forms, read on, this article is dedicated to Art*Forms, an extremely useful Mambo extension which allows you to create specific forms to allow your users to communicate with you via your website and automatically email the communication  to your pre-determined email address.

To install Art*Forms, first download it from the link below. Go to you Mambo administration console menu and click Components, Install/Uninstall.

 

You will be presented with the component upload page, browse to you downloaded component package, if you used the link above to download the component, then the file will be named something like 'ArtForms20b51[1].zip'.

Click 'Upload File & Install' and you will be presented with the screen below.

 

Click 'Continue' and you will be directed to a page which shows the component in the component list. You have successfully installed Art*Forms.

Click Components, Art*Forms, Edit Forms, then click the 'New' icon and you will be presented with the page below.

 

This page allows you to dynamically assign fields and settings for your Form.

To assign the settings, lets start with the Form title, in this instance we'll call the Form 'Upload Image'.

Following that there is a WYSIWYG HTML editor,if you have installed it, if not an html box. In the box type the instructions you want  your user to follow when uploading files to you website.

After this, enter the message to be displayed to your user once the file has been uploaded to you site.

Assign the email settings you want for this form. In this instance, in the 'TO' field, enter your email address, it can be any email address so long as its valid. Note, you can also include CC and BCC fields if required, but that is not neccessary for this example.

Finally specifiy them email format, whether it should be HTML or Text, select HTML in this instance Click the 'Email Attachment tab.

 

Set the 'Allow File Upload and Email attachment?' to 'Yes', and then click the checkboxes next to the file types you wish to allow for upload. The file types are listed below.

Set the 'Allowed Filesize in bytes' field to 50000, this field limits the size of the upload to 50000 bytes or (50K).

Then click the 'Formfields' tab, this is where you define the fields you require in your form.

  

In the first field enter 'Email Address', and in the required column, select 'mandatory' from the dropdown list. In the 'Validate' column, select 'email', this will then force the user to enter a validate email  format.

In the second field enter 'Image Type', and in the required column, select 'mandatory' from the dropdown list. In the 'Field Type' column,  select 'dropdown' and in the 'Values' column, enter 'jpeg;png;gif;bmp', this will populate the drop down list with the different values.
{mosgoogle center}
Now click 'Save' in the top right hand corner of the page, but copy the 'Link' column value for this form, as we are going to use this to link to this particular form.

In the 'Edit Forms'  list, click the 'Published' column next to the form you have just created to ensure it is displayed.

We now need to create a menu to link to the form, there are a number of ways to display a form, but in this case we will link it directly to a menu option in the main menu.

Click the Menu, mainmenu option in the Administration Console menubar. Click 'New' in the top right hand corner of the page, Click ' Link - URL' in the selections displayed, then click 'Next' in the top right hand corner of the page.

In the 'Add Menu Item' page,   create a name for the menu item, call it 'Image Upload' for the purposes of this excercise, then in the 'URL' section paste the url you copied previously from the ArtForms list. Then click 'Save' on the top right hand corner of the page, the default values for displaying the linked page are sufficient for this example.

You have now created a new menu in the 'Main Menu' section of you website, if you now 'Preview' the site, you will see this new menu item, if you click it, then your form will be displayed,  it should look something like this....