Ninja forms: vlastní typy polí

Ninja forms umí úžasnou věc – můžete si do něj naprogramovat vlastní typy polí! Pokud se vám nějaké nelíbí a nebo chcete úplně nové, máte dveře otevřené.

V tomhle případě jsem potřebovala do Ninja forms dostat pole typu range slider (posuvník).
Jak na to?

1. Zaregistrovat nový typ

Přidejte kousek kódu, kterým takový typ pole zaregistruje (do child theme nebo snippetu).

class NF_CustomPlugin_Fields_Blah extends NF_Fields_Textbox {
    protected $_name = 'range-slider';
    protected $_section = 'common';
    protected $_type = 'range';
    protected $_templates = 'range-slider';
    protected $_settings = array( 'default', 'number', 'disable_browser_autocomplete');
	
    public function __construct() {
        parent::__construct();

        $this->_nicename = __( 'Range Slider', 'ninja-forms' );
		
    }	
}


function register_fields($actions) {
    $actions['range-slider'] = new NF_CustomPlugin_Fields_Blah(); 

    return $actions;
}

add_filter( 'ninja_forms_register_fields', 'register_fields');

2. Šablona pro nový typ

Ideální místo pro takovou šablonu je opět child theme:

• {child-theme}/ninja-forms/templates/fields-range-slider.html

<script id="tmpl-nf-field-range-slider" type="text/template">
   
    <input id="nf-field-{{{ data.id }}}" name="nf-field-{{{ data.id }}}" aria-invalid="false" aria-describedby="nf-error-{{{ data.id }}}" class="{{{ data.renderClasses() }}} nf-element" aria-labelledby="nf-label-field-{{{ data.id }}}" {{{ data.maybeRequired()
        }}} type="range" value="{{{ data.renderNumberDefault() }}}" min="{{{ data.num_min }}}" max="{{{ data.num_max }}}" step="{{{ data.num_step }}}" {{{ data.renderPlaceholder() }}}>

</script>

3. Hotovo

V Ninja forms by se mělo objevit nové pole “Range Slider” a chovat se jako klasický posuvník. Má k nastavení minimální, maximální i defaultní hodnotu a velikost kroku podle HTML standardu pro range slider.

4. Kam s hodnotou?

Jak vypsat hodnotu do formuláře, případně ji poslat e-mailem? Jak každou jinou – přes klasické proměnné, které Ninja Forms umí, dávají se do složených závorek {}. můžete ji vložit kamkoli (do e-mailu, do jiného pole, do výpočtů…).

A pokud ji chcete vypsat do formuláře, kde se bude dynamicky měnit, vložte HTML modul a do text s proměnnou, např. něco takového:

Plocha: {field:range-slider_1690872044456} m2

(id pole musíte samozřejmě nahradit)

PS: Co když není šablona?

PS: Pokud používáte Oxygen a nemáte k dispozici šablony, a tedy ani child theme, tak si je můžete zapnout (doporučuji najít nějakou nenáročnou a malou).

Zdroje

• https://developer.ninjaforms.com/codex/custom-field-templates/
• https://developer.ninjaforms.com/codex/field-templates/
• https://stackoverflow.com/questions/54112022/adding-custom-fields-to-ninja-forms

Úvodní obrázek

• pochází z wordpress.org z popisu pluginu: https://wordpress.org/plugins/ninja-forms/