Getting started: Step by step

In this article we will explain step by step on how to create Joomla articles using Form2Content. As an example we will be creating a simple BLOG. The example will work for both F2C Lite and Pro!

Image gallery

Form2Content Content Type Manager
Set the category in the content type settings
The Form2Content Template Manager
It is important to understand that we will be making 100% Joomla articles. These articles will show in the Joomla article manager. If we want to see them in the front-end of the website you will have to add Joomla native navigation i.e. make a menu item to com_content, for instance a category blog link.

There are several steps involved. The first and most important is to think about what you want to create. In this example we will be making a blog. For each blog article I want my user to be able to add an introduction text, the article text, a source URL and an image. I will be saving the articles in a Joomla category.

Step 1: Where will we save our Joomla articles?

With Form2Content we will be creating Joomla articles. These need to be saved in a category in order to be able to show them on the website. In the Joomla category manager, create a category called Blog articles.
Joomla back-end admin menu: content >> category manager

Step 2: Define a new Content Type called Blog articles.

Our type of content we will be generating in this case are blog articles. In the Content Type we will define default settings and values. Think of where to save the articles, what the title of the form is, who has permissions to add or edit the articles. In the Joomla back-end navigate to the Form2Content Content Type Manager.
Menu: components >> Form2Content (pro) >> Content type manager

Create a new F2C Content type by clicking on NEW. Call it Blog articles and save it immediately!

If you have F2C Pro: Re-open your content type Blog articles  and go the the (Section/)Category selection. Select for the default category the one you created in step 1 and save & exit!

We will come back later to provide the (display) settings for the front-end form and link to our custom template.
We recommend that whenever a new Content Type is created it is immediately saved after it has been given a name. This way your default templates and settings are saved correctly.

Step 3: Think about the fields we need and add them to the submission form

In order to create the Joomla article we will be collecting data using a form. The first step is to think which fields we need.
In the Content Type Manager click on the fields button    (second column) next to the just created content type: Blog articles.  This will bring you to the field manager (image 2, but empty).

For our example we will add the fields below. Please follow the links for more information on the settings of the individual fields.

Intro text (text area field type with max. 200 characters) Field name = intro_text
Main text (text area field type with max. 1000 characters). Field name =main_text
Intro image (image field) Field name = intro_image
Source url (text box field) Field name = source_url

For the image field, set the image size and make sure you have set the output to RAW! 
In F2C Pro you can also define the thumbnail size.

Having added the custom fields to your form, it is time to create the layout of the article.

Step 4: Create a custom Article template

The Form2Content Article Templates are used to make sure all articles look the same and that the data submitted in the forms ends up in the Joomla article.

Article Templating is where the real power lies:

  • Define the layout in normal, simple HTML.
  • Add the placeholders through so called "template parameters" in the layout.
  • Add possible content effect though plugin syntax. Think of tabs, sliders, Google maps, modals, slideshows etc.
  • Add logic using our simple Smarty Templating system. Think if/than/else options.

In this example we want to create a layout for the article in the Joomla category blog view (intro template) and a layout for the full article (main template).

Part 1) Copy the default article templates and re-name them. This is easiest done using FTP (folder: media/com_form2content/templates) but can also be done via the Template manager in the back-end (download and upload the templates).

Part 2) Change the layout using html, Joomla plugin (code), CSS and the F2C template parameters. Editing templates can be done in any text or html editor.

Step 5: Link to the custom article template

Since we created our own article layout (templates) we need to make sure that the articles are created using our custom templates. In the F2C Content Type Manager, edit the previously defined Blog articles type.

Advanced article parameter settings: Because in our example we do not want to show the introduction (intro template content) in our article view, we need to set 'display intro text' to hidden.

Finish by clicking on save!

Step 6: Test: Create an article via the back-end F2C Article Manager

Go to menu: components >> Form2Content (pro) >> F2C Article Manager

The F2C Article manager is almost identical to the Joomla one but instead of displaying a WYSIWYG editor when editing an article we display your custom form.

Part 1) Click on NEW and select from the drop-down the content type you want to create an article for.
Part 2) Fill out the form (article content), upload images etc.
Part 3) Check that the F2C template selection are pre-filled in the head of the article. If not you can add them here but don't forget to set them in the Content Type Configuration.
Part 4) Select a Joomla category where the article will be saved
Part 5) Save and publish.... only on publish will an actual new Joomla article be created.

Possible errors (on save and on publish): No category selected, no templates selected (on publish), Smarty errors in your template (might result in blank screen if you don't have error reporting).

Check: It's always possible to go to the Joomla article manager (JAM) and find the F2C created article. Please note that when you edit the article in the JAM, the editor can make changes to the html. Simply re-publish the article in the F2C article manager to undo any changes.

Step 7: Display the created Joomla articles

Since F2C creates Joomla articles in Joomla categories the easiest way to display them is to create a menu link (category blog layout) to the category where you save your articles.

The number of articles (and names) are unknown, you cannot link to the articles themselves untill they have been created! That's why a category blog layout menu link is easiest to use. Now the articles will just appear as they are created (with F2C).

Step 8: Create a menu link to the front-end F2C article manager

In both F2C Lite and Pro we can make a menu link to the F2C Front-end article manager. In general but especially F2C Pro, the front-end article manager is simplified making article submission even more easy. You also don't have to give visitors/clients back-end permission.

We recommend 'registered' user permission for F2C front-end article manager. If you wish to provide guest access we suggest you use Captcha (Pro only) and default unpublised settings.

F2C Cheat-sheet

An overview of all template parameters (placeholders for your form data). These are used in your F2C intro and main template to parse the data from your submission forms into the Joomla article.



Form2Content, a Joomla CCK Documentation © 2010 - 2015 Open Source Design | Powered by Form2Content