gabarit FormBuiler perso. débutant en cmsms/smarty

gabarit FormBuiler perso. débutant en cmsms/smarty - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : gabarit FormBuiler perso. débutant en cmsms/smarty (/thread-2348.html)

gabarit FormBuiler perso. débutant en cmsms/smarty - elz64 - 13/11/2012

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.2.1
#~ Url du site : cms-ms.dzi-neo.net/
#~ Hébergeur / Soft :
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Continuant ma découverte de CMS MS, je cherche à comprendre les tpl de formbuilder.
Dans mon lab (cf url indiquée) je cherche à intégrer avec Bootstrap.
Cela suppose un code particulier pour un formulaire de contact.
sur ma page de test on voit le modèle "propre" non fonctionnel en 1er et dessous le résultat atteint avec formbuilder.

Je rame pour comprendre le gabarit.

Je suis parti du advanced_contact, dont voici la partie de boucle de traitement des champs avec mes qq modifs:

Code :
[== Indéfini ==]

{foreach from=$fields item=entry}

        {if $entry->display == 1}

            {strip}

             {if $entry->needs_div == 1}

                <div  

                {if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class="

                      {if $entry->required == 1}required{/if}

                      {if $entry->css_class != ''} {$entry->css_class}{/if}

                    {if $entry->valid == 0} fb_invalid{/if} control-group

                      "

                {/if}

                >

             {/if}

             {if $entry->hide_name == 0}

                <label class="control-label" {if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}

                {if $entry->required_symbol != ''}

                       {$entry->required_symbol}

                {/if}

                </label>

             {/if}

          <div>

             {if $entry->multiple_parts == 1}

                {section name=numloop loop=$entry->input}

                       {if $entry->label_parts == 1}

                           <div class="controls">{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name} placeholder="name" </div>

                       {else}

                           {$entry->input[numloop]->input}  placeholder="name" 

                       {/if}

                       {if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}  placeholder="name" {/if}

                {/section}

             {else}

                {if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}

             {/if}

             {if $entry->valid == 0} &lt;--- {$entry->error}{/if}

             {if $entry->needs_div == 1}

                  </div>

                </div>

             {/if}

             {/strip}

         {/if}

    {/foreach}

Je ne comprends pas à quoi sert {if $entry->needs_div == 1} en ligne 42.  Enfin plus exactement je le comprends comme une option de wrap dans un div de chaque  label et input (Ce que je veux). J'y a ajouté une class en dure (.control-group).

Au rendu pas de div wrappant. Mais comme je ne vois où positionner $entry->needs_div à 1 dans le backoffice... 

Ensuite:

Il faut ajouter pour chaque input un placeholder="xxx"   le xxx devant être apparaissant dans le champ et qui est virée au clic.

Ce que j'ai ajouté n'a aucun impact.

Cette chaine serait celle saisie dans le backoffice de formBuilder ("Texte d'aide à afficher avec ce champ :") mais j'ignore où la choper..

voici ce que je souhaiterais obtenir pour chaque champs:

Code :
[== Indéfini ==]

<div class="control-group">

            <label for="contacttel" class="control-label">

              Tél. <i class="icon-bell"></i>

            </label><div class="controls">

            <input type="tel" placeholder="tél" name="contacttel" id="tel">

</div></div>

Et enfin pour que le bouton submit soit un bouton ..il ne faudrait pas un input. Là ca se corse..?

Merci

gabarit FormBuiler perso. débutant en cmsms/smarty - heriquet - 13/11/2012

Salut,

Tu peux voir les variables disponibles ici : {get_template_vars}

Voir cet article de Calguy

Sinon tu peux aussi aller voir dans le code du module FormBuilder, tu y trouveras certainement quelques réponses à tes questions quant à l'origine des variables.

gabarit FormBuiler perso. débutant en cmsms/smarty - elz64 - 13/11/2012

Merci.

Effectivement j'ai pu sortir les différents champs et voir qui fait quoi.

Du coup j'ai atteins un résultat mais pas parfait.
code tpl complet:

Code :
[== Indéfini ==]

{* DEFAULT FORM LAYOUT / pure CSS *}

{$fb_form_header}

{if $fb_form_done == 1}

    {* This first section is for displaying submission errors *}

    {if isset($fb_submission_error) && $fb_submission_error}

        <div class="error_message">{$fb_submission_error}</div>

        {if isset($fb_show_submission_errors) && $fb_show_submission_errors}

            <div class="error">

            <ul>

            {foreach from=$fb_submission_error_list item=thisErr}

                <li>{$thisErr}</li>

            {/foreach}

            </ul>

        </div>

        {/if}

    {/if}

{else}

    {* this section is for displaying the form *}

    {* we start with validation errors *}

    {if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}

        <div class="error_message">

        <ul>

        {foreach from=$fb_form_validation_errors item=thisErr}

            <li>{$thisErr}</li>

        {/foreach}

        </ul>

        </div>

    {/if}

    {if isset($captcha_error) && $captcha_error}

        <div class="error_message">{$captcha_error}</div>

    {/if}

    {* and now the form itself *}

    {$fb_form_start}

    <div>{$fb_hidden}</div>

    <div {if $css_class != ''} class="{$css_class}"{/if}>

    {if $total_pages gt 1}<span>{$title_page_x_of_y}</span>{/if}

    {foreach from=$fields item=entry}

        {if $entry->display == 1}

            {strip}

             {*if $entry->needs_div == 1*}

                <div  

                {if $entry->required == 1 || $entry->css_class != '' || $entry->valid == 0} class="

                      {if $entry->required == 1}required{/if}

                      {if $entry->css_class != ''} {$entry->css_class}{/if}

                    {if $entry->valid == 0} fb_invalid{/if} control-group

                      "

                {/if}

                >

             {*/if*}

             {if $entry->hide_name == 0}

                <label class="control-label" {if $entry->multiple_parts != 1} for="{$entry->input_id}"{/if}>{$entry->name}

                {if $entry->required_symbol != ''}

                       {$entry->required_symbol}

                {/if}

                {capture iclass assign=iclass}icon-{$entry->css_class}{/capture}

                <i class="{$iclass}"></i>

                </label>

             {/if}

          <div>

             {if $entry->multiple_parts == 1}

                {section name=numloop loop=$entry->input}

                       {if $entry->label_parts == 1}

                           <div class="controls">{$entry->input[numloop]->input}&nbsp;{$entry->input[numloop]->name} placeholder="name" </div>

                       {else}

                           <div class="controls">{$entry->input[numloop]->input}  placeholder="name" </div>

                       {/if}

                       {if isset($entry->input[numloop]->op) && $entry->input[numloop]->op}{$entry->input[numloop]->op}  placeholder="name" {/if}

                {/section}

             {else}

                <div class="controls">

                {if $entry->smarty_eval == '1'}{eval var=$entry->input}{else}{$entry->input}{/if}

                </div>

             {/if}

             {if $entry->valid == 0} &lt;--- {$entry->error}{/if}

             {*if $entry->needs_div == 1*}

                  </div>

                </div>

             {*/if*}

             {/strip}

         {/if}

    {/foreach}

    {if $has_captcha == 1}

        <div class="captcha">{$graphic_captcha}{$title_captcha}<br />{$input_captcha}</div>

    {/if}

           <div class="control-group"><div class="controls">

    <a class="btn btn-inverse" href="#">

            Envoyer

          </a>

{$prev}{$submit}

</div></div>

    </div>

    {$fb_form_end}

{/if}

{$fb_form_footer}

D'une part j'ai un div de trop entourant de div.controls
Et je n'ai toujours vu comment gérer le submit.

Code :
[== Indéfini ==]

<div class="required bell control-group">

<label for="contacttel" class="control-label">Tél.*<i class="icon-bell"></i>

</label><div>

<div class="controls"><input type="text" id="contacttel" maxlength="80" size="25

" value="" name="cntnt01fbrp__32">

</div>

</div>

</div>

Pour ce qui est de la souplesse d'usage (avec formbuilder) c'est juste juste car pour insérer une icone (<i class="icon-xyz") dans les labels de manière contextuelle (il faut une classe spécifique pour une icone) il faudrait un champ supplémentaire pour être sur d’éviter de posible conflits css.

Là j'ai ppu m'en sortir avec le champ field->css_class ( the CSS class specified for this field ) en y renseignant "user" ou "bell" ou "pencil", etc. et en concaténant cette class avec la chaine "icon-" de manière à obtenir ce qu'il faut pour bootstrap.
(impossible mettre la classe icon-xyz directement sinon ca prendrait des propriétés css inadéquates).

Code :
[== Indéfini ==]

{capture iclass assign=iclass}icon-{$entry->css_class}{/capture}

                <i class="{$iclass}"></i>

merci

gabarit FormBuiler perso. débutant en cmsms/smarty - heriquet - 14/11/2012

Je pense que la souplesse est bien là. Après, c'est un module "générique", avec les avantages et inconvénients que cela comporte.

Rien ne t'empêche de faire un formulaire de manière plus manuelle, avec un switch par exemple pour gérer chaque champ de manière individuelle.