Falando de Editor de formulários...

...

O Editor de formulários possibilita a montagem de formulários com o recurso de arrastar e soltar os componentes (drag and drop), tornando a construção mais eficiente. Apresenta também configurações personalizadas para que os registros sejam preenchidos corretamente e validações de regras para os componentes adicionados.

Image Added

Adicionar componentes ao formulário

...

01. Visualize os componentes de campo e de layout.

02. Escolha o componente desejado.

03. Clique no componente e arraste-o até o ponto do editor em que ele deve ser apresentado.

Ações sobre os componentes

...

Ao adicionar um componente ao formulário, duas ações são exibidas ao posicionar o mouse sobre o componente:

Image AddedEditar: abre a edição do componente (as opções de edição variam de acordo com o tipo de componente). Consulte o help Componentes de campo e Componentes de layout para verificar as configurações disponíveis.

Image AddedExcluir: exclui o componente adicionado.

Alinhar componentes ao topo

...

Para desabilitar ou habilitar o recurso:

01. Acione o ícone Image Added apresentado no rodapé do editor.

<style type="text/css">
    .lms * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .lms-text-center {
      text-align: center;
    }

    .lms-full-height {
      height: 100%;
    }

    /* Component LMS Callout */

    .lms-callout {
      border: none;
      padding: 0px;

      display: -moz-box;
      -moz-flex-flow: row wrap;
      -moz-justify-content: center;
      -moz-align-items: center;

      display: -ms-flexbox;
      -ms-flex-flow: row wrap;
      -ms-justify-content: center;
      -ms-align-items: center;
      
      display: -webkit-flex;
      display: -webkit-box;
      -webkit-flex-flow: row wrap;
      -webkit-justify-content: center;
      -webkit-align-items: center;

      display: flex;
      flex-flow: row wrap;      
      justify-content: center;
      align-items: center;
    }
  
    .lms-callout .lms-callout-image {
      width: 24px;
    }

    .lms-callout .lms-callout-body {
      width: calc(100% - 24px);
      padding-left: 20px;
    }

	.lms-callout .lms-callout-citacao {
      border: 0px solid;
      border-left-width: 3px;
      border-left-color: #f36f21;
	  margin: 4px;
	  margin-left: 25px;
	  padding-left: 8px;
      font-size: 13px;
	}

    .lms-callout .lms-callout-thumb {
      width: 24px;
      height: 24px;
    }

    .lms-callout .lms-callout-text {
      color: #58595b;
      line-height: 1.75;
      margin: 0;
    }
</style>
<div class="lms">
	<div class="lms-callout">
		<div class="lms-callout-image">
			<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/importante.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>ATENÇÃO</b><br>Este recurso <b>vem habilitado por padrão</b> e todos os componentes adicionados ficarão no topo do formulário. É apresentado na cor amarela quando habilitado. Se desabilitado, é possível alinhar os componentes conforme a necessidade de disposição dos campos e é apresentado em cinza.</p>
		</div>
	</div>
</div>

Desfazer ou refazer

...

Este recurso permite ao usuário desfazer as últimas 10 ações nos componentes adicionados ou configurações realizadas. Como também permite refazer as 10 últimas ações nos componentes ou configurações.

01. Acionar o ícone, Desfazer Image Added para desfazer uma ou mais ações necessárias.

02. Acione o ícone Refazer Image Added para refazer uma ou mais ações necessárias.

Pré-visualizar formulário

...

01. Ao acionar o ícone de pré-visualizar Image Added o formulário será apresentado no modo de visualização.

Configurações

...

Este recurso possibilita definir configurações no seu formulário.

01. Acione  Configurações Image Added > Segurança > Definir formulário como público?

Salvar ou Publicar

...

Ao final da construção do formulário, é possível salvá-lo como também publicá-lo.

Salvar: acione Salvar localizado no canto superior direito do editor.

Publicar: acione Publicar localizado no canto superior direito do editor.

Siga os passos abaixo para a construir um formulário.

01. Acessar o app Forms no menu superior.

02. Uma nova guia será diretamente na Navegação de forms . 

03. Acionar Novo Forms e será redirecionado para a tela de edição do formulário.

04. Acima do quadro de componentes, defina um título para o formulário em Título do formulário.

Abaixo do título, a esquerda da janela, está o quadro com os componentes de campo e componentes de layout disponíveis para a construção do formulário.

05. Arrastar e soltar (drag and drop) o(s) componente(s) escolhido(s) na área que desejar e uma área pontilhada será exibida para definir a localização e o espaço do campo adicionado.

O usuário pode definir a localização do campo conforme a necessidade, ou poderá alinhar os campos ao topo, através do ícone Image Removed apresentado em verde no rodapé do editor. Ao selecioná-lo, todos os componentes ficarão alinhados ao todo do formulário. 

Ao adicionar um campo é possível editá-lo ou excluí-lo, basta posicionar o mouse sobre o componente para realizar as ações abaixo.

...