How to Get Form in Front End

A form to the site front end allows users to submit information that can be saved to the database or sent to emails. For example, front-end forms in Joomla are used to create article (com_content), contact form (com_contact), user registration form (com_users).

To create a form on the front-end, you need:

  1. xml file for the form
  2. view file - which is called "form".
  3. layout file, associated with the form view - which is called "edit".
  4. model file - which is also called "form", to align with the view.
  5. controller file

Then, you need to handle the HTTP POST requests when the user submits the form.

This functionality is similar to adding form in the back-end. Also, refer to JForm class of Joomla to display form in the layout file.

Classes

  • The model will extend JModelAdmin which supports forms, and saving records to the database. Even though it's called JModelAdmin, it is still available within the site part.

  • The controller will extend JControllerForm which includes the cancel() and save() methods.

1. XML Form

First, create a new form (add-form.xml) in the forms subdirectory in the site models directory.

site/models/forms/add-form.xml

2. View File

The view file is located at:

site/views/form/view.html.php

The view file calls the model file for the form.

public function display($tpl = null)
{
// Get the form to display
$this->form = $this->get('Form');

// Call the parent display to display the layout file
parent::display($tpl);
}

It will look for the function getForm() in the model file.

3. Model File

The model is almost same as the admin equivalent. It is located at:

site/models/form.php

public function getForm($data = array(), $loadData = true)
{
// Get the form.
$form = $this->loadForm('com_helloworld.form', 'add-form', array('control' => 'jform', 'load_data' => $loadData));

if (empty($form))
{
$errors = $this->getErrors();
throw new Exception(implode("\n", $errors), 500);
}

return $form;
}

The first argument in the loadForm() is the name which is set to component_name.view_name. The second argument is the source of form which is the name of XML file.

4. Layout File

The layout file is located at:

site/views/form/tmpl/edit.php or site/views/form/tmpl/default.php

You display the actual form in this file:

echo $this->form->renderFieldset('fieldset_name'); 

You also need to pass the task (controller.task) for handling the form. For example,

<input type="hidden" name="option" value="com_contact" />
<input type="hidden" name="task" value="contact.edit" />

This will run the edit() function in the subcontroller file contact.php. The file is located at the directory: site/controllers.

5. Controller File

As in the admin case, you need to create a new controller in the /controllers subdirectory. In this file, you need to define the methods used for the processing of the form.

public function save($key = null, $urlVar = null)
{
$app = JFactory::getApplication();
$input = $app->input;
$model = $this->getModel('form');

// get the data from the HTTP POST request
$data = $input->get('jform', array(), 'array');

return true;
}

The $data is array that contains the information submitted by the user.

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive