We already have an email box on the website. If you go the the page "Contact" you will see such a form:

In the backend the content element that creates this form look like this in the Page module:

By the way, notice the "Thank you" page that is a sub page to the "Contact" page!

Now, edit the element. This is the form you see:

The content is apparently even more "code-style" than with the "Table" type content element! But as usual - click the wizard icon and you can edit the content with a tool that makes it all much easier!

As you can see the codes are transformed into this nice form. Here each field in the form is created by visual controls. For a field you need to enter a label of course (#1) and a field type (#2). These are the visible parts. You also have to give the field an internal name (#3) which is the one that will be shown in the email the recipient gets. In the case of "Input field" types you can also enter a default value (#4).

For all email forms there are three common values to be set: The name of the send button (#5), the subject line of the email being sent (#6) and finally the email address of the person that should receive the email (#7). This person is normally you! Or whoever on your team that is supposed to respond to feedback.

Adding a selector box

Now, let’s try to add a select box where people can select an item to receive. In "FC Bigfeet" we have year calendars, the club magazine and pencils that we send to people.

Simply select the "Selector box" type:

Then the "Refresh without saving" button (which does not save the content - just posts the content and redraws the form!)

Then enter this information:

The label is obvious (#1). The field name "item_to_send" (#2) is not visible on the web page but as I wrote before - that is the name the email recipient will see to identify this selection! Finally each value you want in the select box is a line in this text field (#3) - as simple as that. Save the content from the wizard and view the page:

It's that easy!

A few notes

Now, in the backend the new selector box was added in the lines of code in the "Configuration" field:

If you are curious about it try to look at the line and you might actually figure out the syntax of creating form fields without the wizard:

When you lose your patience you can seek help in the TSref document where a section tries to describe the details. But be forewarned - this is the low level technical matters that you are not used to yet!

Another important thing is the "Jump to page" - this field simply tells TYPO3 which page to jump to when the form is submitted.

In other words - when the user has filled in the form and pressed the "Send form!" button he will be shown this page which contains... an ordinary page content element with this greeting:

Quite simple - right? Very flexible.

Troubleshooting

On windows servers there is a good chance that the mail function will not work. If you send the form and get an error message from PHP then you are most likely without an smtp-server or whatever PHP needs to send mails. On UNIX this is normally working out of the box.

The next project is to implement a search box. That is even more easy and one has already been created on the page "Search":

The element itself is extremely simple:

Basically its only the content element type set to "Search" - that's all. In this case there is also a "Send to page" field but not used. Does the same as the "Jump to page" field for email forms - it tells the element which page should receive the search request (which must contain another "Search" content element in order to show results!). If not given the current page will. This is quite normal with search boxes.

Conducting a search

When searching for the word "results" two pages come up:

Try to click "Report results" title:

You are then directed to the page and the search words are nicely colored in red. Cute isn't it...

Indexed searching?

The default search element you are using here is searching directly in page and page content element records. This is efficient enough for many smaller websites.

If you need professional rated searching in indexed content you can get that as well. In fact you can get anything for which an extension has been written (more about that later). For now you can try http://typo3.org as an example of the indexed search engine that TYPO3 offers:

The result set will display something like this:

Notice how the results are nicely organized in sections and sorted by their percentage of relevance.

The extension doing all this has the extension key "indexed_search" and the manual with more information about it can be found here.

A guest book is also a very simple thing to add. However stuff like a guest book, message board, news module etc is normally provided as extensions - and extensions need to be installed first. They might even need to be imported from the online repository, TER (TYPO3 Extension Repository) if they are not available on the server yet.

To install an extension like the guest book you simply go the Extension Manager (EM) and click the add icon:

In the view "Loaded extensions" you can see the list of installed (loaded) extensions:

Inserting the guest book on a page

As with the email form and search box a guest book - and normally any other web application (called a "plugin" in TYPO3 terminology) - is inserted by a page content element acting as a placeholder for the functionality:

The "Insert plugin" type is the main selector and secondarily the "Plugin" selector box is used to determine the plugin type. The options reflect (some of) the installed extensions:

We already have a general guest book - now let’s create one for the "Team pages" section which requires login by username and password:

Go to the Page module, click the "Team pages" page title in the page tree and select "New page" wizard (see previously):

Enter a page title:

Save and close. Then create page content:

Select plugin "Guestbook":

And now, just guess how easy it is to insert news and message boards... :-)

And save the form you get:

Notice the "CODE" field - this contains some text codes which make the guest book appear - a good reason for using the "New content" wizard to insert the element since they are preset then!

Of course you can enter a title and other content elements to the page - but the main function is the insertion of this element:

And - voila! - the guest book is there! (I filled in a test entry here...)

Where is the guest book content stored?

If you want to manage your guest book - for instance remove unserious entries like mine above - then you simply go to the Page module for the page and you will see all guest book elements listed in addition to the normal page content elements:

Wonder how to edit it? Just click the icon of the guest book  entry (remember - beware of consistent concepts!):

The same is true for the message board (as we use it). But not every plugin lists its elements in the Page module, so ultimately we should generally use the List module for management of elements if we want a common approach:

This brings me to the main point here - guest book entries are also just database elements in TYPO3 like pages, page content element, users etc; we can edit them, hide them, delete them and copy/paste them around with the already known set of tools in the system - consistent concepts... you will love them soon!

I'll not spend much time on the site map inserted - you know the principle already. A content element of a certain type with some additional settings applied:

Just notice the "Starting point" field - that determines from which page the site map is drawn! Likewise other "Menu type" settings uses this value. Instead of site map you can also insert other kinds of "link lists" based on the page structure and content elements on pages:

You are invited to play around with this now. Remember - when you need help it’s right at your fingertips:

The news plugin used on the website is from the "mininews" extension. So make sure that is installed (Extension Manager):

Since it already was installed we can now investigate how this plugin has been used. The important difference from the guest book is that the mininews plugin is inserted both on the front page (teasers) and on the news page (archive + details view)! The point is that the front page shows the latest three news items:

And by clicking the "[more...]" link the user is directed to the News page where the full story is shown:

The content elements in the backend

On the front page you will find this content element in the bottom of the page if you look at the page with the Page module:

The content is:

Notice that first of all the "Listing mode" - a selector box specifically provided for the plugin element - is set to "Frontpage teaser" so the teaser and not the archive is inserted. Secondly the "Starting point" field is used to point to the page where the archive - which will list the full story - is found!

On the "News" page a similar element is inserted! Just the "Listing mode" field is different:

And where are the news element stored?

Well, think back to the guest book: News elements are elements like any other database element TYPO3 handles. The best way to get a complete overview of the elements found on a page is by the List module. Let’s try that:

And how to edit one?

And create a new?

The Screenshots speak for themselves I think...

News workflow

Now, what if I like another person to write the news articles for me? And what if I want to review the news articles before they get published? Can TYPO3 do that?

This is a situation that calls for a "workflow". Later in this tutorial exactly that is described for a simple situation like the one we need here. So hang on.