1

Closed

Support for Form Designer

description

I was thinking -- it might be easier to create forms in a much easier manner if the display template was separate from the form fields. Have you thought about adding a display and edit template concept that uses tokens to place the fields? Maybe even with different display and edit forms based on security role?

Consider a complex form where I have multiple sections, maybe a few "expand/collapse" areas, some with 2 columns, some with 4 columns, etc. Right now, this is almost impossible to do with the per item template. What I end up doing right now is creating the HTML by hand in note pad, and then very carefully breaking it up into unique item templates for every form field -- its a lot of work. It would be really cool if we could leverage something like bootstrap (or any other ui framework) and create custom layouts in an easier manner. My thought was to create a concept called "Form Template" that could be used like this below (note: we would still need to create individual form items just like we do today, this would just allow a complete override of the layout in one single step)
<fieldset>

    <!-- Form Name -->
    <legend>Form Name</legend>
    <!-- Select Basic -->
    <div class="form-group">
        <label class="col-md-3 control-label" for="[FIELD_SELECTBASIC_INPUT_ID]">[FIELD_SELECTBASIC_LABEL]</label>
        <div class="col-md-9">
            [FIELD_FIELD_SELECTBASIC_INPUT class="form-control"]
        </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
        <label class="col-md-3 control-label" for="[FIELD_TEXTINPUT1_INPUT_ID]">[FIELD_TEXTINPUT1_LABEL]</label>  
        <div class="col-md-3">
            [FIELD_TEXTINPUT1_INPUT placeholder="Some Text" class="form-control input-md"]
        </div>

        <!-- Multiple Radios (inline) -->
        <label class="col-md-3 control-label" for="[FIELD_RADIO1_GROUP_ID]">Inline Radios</label>
        <div class="col-md-3"> 
            <label class="radio-inline" for="[FIELD_RADIO1_INPUT_ID]">
                [FIELD_RADIO1_INPUT]
            </label> 
            <label class="radio-inline" for="[FIELD_RADIO2_INPUT_ID]">
                [FIELD_RADIO2_INPUT]
            </label> 
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-md-3 control-label" for="[FIELD_TEXTINPUT2_INPUT_ID]">[FIELD_TEXTINPUT2_LABEL]</label>  
        <div class="col-md-3">
            [FIELD_TEXTINPUT2_INPUT placeholder="Some More Text" class="form-control input-md"]
        </div>

        <label class="col-md-3 control-label" for="[FIELD_TEXTINPUT3_INPUT_ID]">[FIELD_TEXTINPUT3_LABEL]</label>  
        <div class="col-md-3">
            [FIELD_TEXTINPUT3_INPUT placeholder="Event More Text" class="form-control input-md"]
        </div>
    </div>

    <!-- Textarea -->
    <div class="form-group">
        <label class="col-md-3 control-label" for="[FIELD_TEXTAREA1_INPUT_ID]">[FIELD_TEXTAREA1_LABEL]</label>  
        <div class="col-md-9">                     
            [FIELD_TEXTAREA1_INPUT class="form-control input-md"]
        </div>
    </div>

    <!-- Button (Double) -->
    <div class="form-group">
        <label class="col-md-3 control-label" for="button1id"></label>
        <div class="col-md-8">  
            [BUTTON_SUBMIT Text="Ok" class="btn btn-success"]
            [BUTTON_CANCEL Text="Cancel" class="btn btn-danger"]
        </div>
    </div>

</fieldset>
Which would then render something like this: Link to bootply sample

Even cooler might be to integrate a "form builder"
Closed Jul 28, 2014 at 12:59 PM by Maikl

comments

Maikl wrote Jul 28, 2014 at 12:58 PM

Not an issue - this should be placed in the discussions section. But thanks for your input.

Anyway: There a modules on the market that provide a lot of functionality to create complex forms - and they have their price. This should be an easy-to-use form for people without HTML/CSS knowledge, and it should allow people with that knowledge to customize the module up to a certain point. For higher claims you have to spend money.

The next (major) version will conatin some more support for templating and layouting the form, but I am not sure if I will put it on that level.

Best wishesMichael

ravensorb wrote Jul 29, 2014 at 2:49 AM

Makes sense. It might be cool if we could at least get to a simple single template rather than a "per item" template? This would open up a great deal of options for styling without too much complexity.

Timo_Design wrote Jan 15, 2016 at 3:25 PM

You can already set the template in the settings of the module. :-)