Form.io | Hide Help Button

Question

Anyone could help me how to hide the "Help link" for each component as shown below in the Form.io ?

Thanks you in advance!

Answer 1

I figure it out...posting here for anyone wants this. You just to use Templates in Form.io and then overwrite the BuilderComponent Template then finally hide the Help ctx using Display : None .

      Formio.Templates.current = {
     builderEditForm: {
          form: `
          <div class="row">
          <div class="col col-sm-6">
            <p class="lead">{{ctx.t(ctx.componentInfo.title, { _userInput: true })}} {{ctx.t('Component')}}</p>
          </div>
          {% if (ctx.helplinks) { %}
          <div class="col col-sm-6">
            <div class="float-right" style="display : none; margin-right: 20px; margin-top: 10px">
              <a href="{{ctx.t(ctx.helplinks + ctx.componentInfo.documentation)}}" target="_blank">
                <i class="{{ctx.iconClass('new-window')}}"></i> {{ctx.t('Help')}}
              </a>
            </div>
          </div>
          {% } %}
        </div>
        <div class="row">
          <div class="col {% if (ctx.preview) { %}col-sm-6{% } else { %}col-sm-12{% } %}">
            <div ref="editForm">
                {{ctx.editForm}}
            </div>
            {% if (!ctx.preview) { %}
            <div style="margin-top: 10px;">
              <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
              <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
              <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
            </div>
            {% } %}
          </div>
          {% if (ctx.preview) { %}
          <div class="col col-sm-6">
            <div class="card panel preview-panel">
              <div class="card-header">
                <h4 class="card-title mb-0">{{ctx.t('Preview')}}</h4>
              </div>
              <div class="card-body">
                <div class="component-preview" ref="preview">
                  {{ctx.preview}}
                </div>
              </div>
            </div>
            {% if (ctx.componentInfo.help) { %}
            <div class="card card-body bg-light formio-settings-help">
              {{ ctx.t(ctx.componentInfo.help) }}
            </div>
            {% } %}
            <div style="margin-top: 10px;">
              <button class="btn btn-success" style="margin-right: 10px;" ref="saveButton">{{ctx.t('Save')}}</button>
              <button class="btn btn-secondary" style="margin-right: 10px;" ref="cancelButton">{{ctx.t('Cancel')}}</button>
              <button class="btn btn-danger" ref="removeButton">{{ctx.t('Remove')}}</button>
            </div>
          </div>
          {% } %}
        </div> 
          `                   
      }
};    

Answer 2

It looks like this can be done with CSS quite easily, as mentioned in this Github issue.

body a[href*='help.form.io'] {
  display: none !important;
}