Forms

Your choice:  A or B ?

Within your templates you have different options for rendering and processing forms.

• A) Manually coded HTML forms
  The good old known classical way!
  So, you write the complete HTML-Tags /-code, such as: <form ..>, <input ...>, etc.
  
  
• B) Configurable object-oriented form-rendering
  Intended use for quick & dynamically loaded definitions and validations.
  Less coding and direct rendering.
  
  

Tipp: We recommend using the Hublify formbuilder to define your fields, so you won't have to hardcode them in your templates.#

A) Manual: Classical created forms

If you create a regular html form without the specific hublify-form object, you can find your submitted values in HCMS.POST or HCMS.GET depending on the method used.

Examples

    <form method="post">
        <input type="text" name="myPostFormField">
        <input type="submit">
    </form>

    <p>FormValue: {{ HCMS.POST.myPostFormField }}</p>

    <form method="get">
        <input type="text" name="myGetFormField">
        <input type="submit">
    </form>

    <p>FormValue: {{ HCMS.GET.myGetFormField }}</p>

If you create forms manually that follow the hublify-form syntax, you still have easy access to the data of your specific form.

Use "<formname>--<fieldname>" as the name for all fields in the form and you can access all data from your form with HCMS.FORM.<formname>.DATAIN.

You can also organise your values as a multidimensional array by adding "--" for every level "<formname>--<subArray--<fieldname>".

Example

    <form method="post">
        <input type="text" name="myForm--myField">
	<input type="submit">
    </form>

    <p>FormValue: {{ HCMS.FORM.myForm.DATAIN.myField }}</p>

File-Upload

Example Template file

{# ------  The form-handling, on submit   ---------------------- #}
{% if submit_logo is defined %}

    {# --- Get a file-object for form-field "logo_upload" #}
    {% set myFileObj = hublify.uploadfile('logo_upload') %}


    {# ---- Let Hublify store the uploaded files in the Hublify MAM.
            Into directory:      "a/sub/dir/path",
            Forcing own label:   "myAssetLabel4Logo"
    #}
    {% set result = myFileObj.moveToMAM('a/sub/dir/path', "myAssetLabel4Logo" ) %}

{% endif }


{# ------  The actual FORM   ---------------------- #}
<form action="{{ hublify.pageLinkUrl('<this page-label>') }}" method="post" enctype="multipart/form-data">

    <label for="logo_upload">Upload your logo-image</label>
    <input name="logo_upload">

    <button type="submit" name="submit_logo">Do upload!</button>
</form>

B) Object-Oriented:  hublify.form

Create your Form (inline-config)

    {# init the myForm object for form "example" that was created with the hublify formbuilder and set an action #}
    {% set myForm = hublify.form('example',{
     "method": "post",
	 "actions": {
	     "mySubmit": {
	         "name": "Submit this",
	         "class": "btn btn-primary",
	         "id": "IdForActionSubmit"
	     }
	 }
    }) %}

Form Submission & Validation

    {# check if form was already submitted and is valid #}
    {% if myForm.isSubmitted() and myForm.isValid() %}
        {# get all your fieldValues #}
        {% set formValues = myForm.getValues() %}
        {# do something with your formValues #}
    {% elseif form.hasErrors %}
        <div class="alert alert-danger">
            <p>Something went wrong - Check your FormData!</p>
            <ul>
                {% for error in form.errors %}
        	        <li>{{ error }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

Render the Form

All-in-one

This is the easiest way to render a form, if you do not need anything special.

{{ myForm.render() }}

Create form-tags, inputs and actions separately

Each defined field and action is available as a formField-object within your hublify.form

    {# render the opening tag for the form #}
    {{ myForm.renderTag() }}
	
    <div class="row">
        {% for fld in myForm.fields %}
            {{ fld.render() }}
        {% endfor %}
    </div>
	
    <div class="row actions">
        {% for act in myForm.actions %}
            {{ act.render() }}
        {% endfor %}
    </div>
	
    {# render closing tag for the form #}
    {{ myForm.renderClosingTag() }}

Available functions for each field

hasErrors(): bool

/**
 * @param array $options
 *  [key] string
 *  [type] string
 *  [value] mixed
 *  [name] string
 *  [id] string
 *  [placeholder] mixed
 *  [mandatory] bool
 *  [readonly] bool
 *  [focus] bool
 *  [cssLayout] string
 *  [class] string
 *  [options] array
 *  [fieldset] string
 */

setOptions($options): void

/**
 * @param array $options
 *  [min] int
 *  [max] int
 *  [minLength] int
 *  [maxLength] int
 *  [pattern] string
 */

setConstraints(array $options): void

getConstraints(): array

/**
 *
 * @param array|null $custAttr
 *      "class" string additional class for the input itself
 *      "labelClass" string additional class for the label
 *      "errorClass" string  additional class for the label
 *
 * @return string
 */

render($custAttr = null): string

renderRequired(): string

renderLabel($custAttr = null): string

* @param array $custAttr 
*            [<var>] = "<value>" 
*
*            [id] - String, optional
*            [class] - String, optional. CSS-Class
*            [style] - String, optional. CSS-Style
*
*            [title] - String, optional.
*            [alt] - String, optional.
*
*            [align] - String, optional.
*            [onmouseover] - String, optional.
*            [onmouseout] - String, optional.
*            [onclick] - String, optional.
*            [hspace] - Integer, optional.
*            [vspace] - Integer, optional.
*            [clear] - String, optional.
*
*            [usemap] - String, optional (for image maps) - use String without [val]#[/val] (this will be add here)
*
*            Sowie die Skip-Parameter zum Überspringen des jeweiligen Attributes
*            [skip_id], [skip_class], [skip_style], [skip_title], [skip_alt]
*            [skip_align], [skip_onmouseover], [skip_onmouseout]

renderInput($custAttr = null): string

getValue()

/**
 *
 * @param mixed $value
 * @param array|null $formData complete form-data in case the validation requires other fields
 */

validate($value, $formData = null): array