Got a Joomla site that needs a form? Planning to use the CoffeeCup Form Builder to create it? Prefer to contain it all within your own server rather than taking advantage of the S-Drive features? Then this article is for you. Just follow these instructions and you'll have your form up and running no time!

Step 1:

First thing to do is to Export your form from the Form Builder using the Export method for putting the form on your own server. Once you've gotten to the end of the export procedure it will give you the code to place on your website page. Use this exact code in your Joomla page with alterations only to 4 areas where the paths to the files are concerned.

You will need to add the complete pathway in the code to reflect the location of your files. This will create direct links rather than relative one. In the code example below you would add to the 4 Green highlighted locations: (including the trailing forward slash)

The Yellow highlighted parts are just to help you see what part of the code you are editing:

Keep the form builder open so you can copy the code in just a few minutes, or if you have a good text editor you prefer you can paste the code into it for use later too, either way. When you paste the script into the Article page you are planning to add it to just edit those pathways as mentioned above.

Step 2:

Now upload "the contents" of the folder that the Form Builder gave you when you exported your form. Do not upload the folder that ends in the words _exported, only upload what is "inside" that folder.

Upload these files to whatever directory you want them in making sure that the pathway in your article script matches the location you put the files. I would suggest right in your default website directory so that if at some point you decide to remove the Joomla system from your server, you won't lose your form files too. So upload them to the root directory of your website where your main index.html home page resides.

Step 3:

The next thing to do is log in to your Joomla Administration window and go to the Global Configuration setup. To do that go to the menu at the top of the Joomla window and choose “System” then “Global Configuration” and click it.

Step 4:

Once in the Global Configuration area look down the list of settings of the default Site tab till you see the "Default Editor *" setting and choose the "Editor -CodeMirror" choice in the drop down menu and then Save & Close your settings.

Step 5:

Now at the top of the page choose the Content menu then choose Article Manager directly and click it.

Create a new article, or edit an article you were planning to put the form on and go into the edit mode to insert your code.

In the article editor you will see that it is fully code based at the moment so if you're comfortable with it being code then you won't need to change it back. (If you're not you can always change that Global Configuration setting for the Default Editor back to the TinyMCE choice once your form is fully working.) Paste your code into the article making your pathway changes here if you haven’t already done so in a different text editor.

Step 6:

Save your Article and check your live article page to see that the form shows up now!

Additional Instuctions:

If you find it's not working, be sure you:

  • Changed your Default Editor of the Global Configuration
  • Uploaded the files to the right location
  • Edited the 4 areas in the script so the pathways to the files are correct.