Generating form's HTML

Form's HTML is generated using render method of \Ip\Form object. That means you have to create a form object first, then add some fields, and, finally, render a form.

 Create and render a form

// Create a form object
$form = new \Ip\Form();
// Add a text field to form object
$field = new \Ip\Form\Field\Text(
        'name' => 'firstField', // HTML "name" attribute
        'label' => 'First field', // Field label that will be displayed next to input field
$formHtml = $form->render();
return $formHtml; // Output a string with generated HTML form


Fieldsets can be used to group form fields, by drawing a box around the related elements.

Group input fieldS using fieldsets

    $form->addFieldset(new \Ip\Form\Fieldset('My fieldset 1'));

    $form->addFieldset(new \Ip\Form\Fieldset('My fieldset 2'));

Forms in admin / public interface context

Forms have different look, texts and error messages in admin and public interfaces. E.g., your website might be translated to many different languages, while administration user interface is likely to be in website editor's native language. Also, due to ImpressPages nature, you might see widget admin forms mixed with website's public forms. When you create \Ip\Form object, ImpressPages tries to guess in which context you are creating the form. In case autodetection fails, you can set the right environment manually: 

Set form's environment TO ADMIN

<?php $form->setEnvironment(\Ip\Form::ENVIRONMENT_ADMIN); ?>

Set form's environment TO PUBLIC

<?php $form->setEnvironment(\Ip\Form::ENVIRONMENT_PUBLIC); ?>

Overriding form's default HTML

You can override HTML for all forms by overriding view files in override/Ip/Form/publicView and override/Ip/Form/adminView directories. 

Or pass a custom view file to a specific theme:

$view = ipView('view/customFormView.php');
$formHtml =  $form->render($view); ?>

Setting field layout

Each in put field  on ImpressPages is surrounded by some additional HTML which gives freedom to style form using CSS. Label, error, notes, etc. are printed alongside. You can control it by overriding form's view files (see above) or use field layout. There are three layouts available:

  • \Ip\Form\Field:LAYOUT_DEFAULT
  • \Ip\Form\Field:LAYOUT_NO_LABEL
  • \Ip\Form\Field:LAYOUT_BLANK

Set the layout as follow

$field = new \Ip\Form\Field\Text(
        'layout' => \Ip\Form\Field::LAYOUT_NO_LABEL,
        'name' => 'firstField', // HTML "name" attribute

Dynamically created forms

If you create form dynamically after page's onReady event, use ipInitForms() function to initialize form's JavaScript validation and JavaScript related form fields such as \Ip\Form\Field\File, \Ip\Form\Field\RichText, \Ip\Form\Field\Color, etc.

If you have your own custom Form field that rely on  JavaScript, initialize that javascript on ipInitForms event

$(document).on('ipInitForms', function () {
      $('.ipsModuleFormAdmin .type-syourcustomfieldtype').yourFieldInitializationJQueryFunction();

See also

comments powered by Disqus