Utilizando formulários

Após criar um formulário e deixá-lo da forma que você quiser, ele de nada servirá se não for implementado e utilizado na sua aplicação, e nessa seção explicaremos como fazê-lo.

Para utilizar um formulário, basta estar em uma área de trabalho, clicar em "Formulários" na barra lateral e então clicar no formulário que você deseja utilizar. Você então entrará na página de listagem de envios daquele formulário. Então basta clicar em "Usar formulário" no canto superior-direito, que abrirá uma janela com instruções para enviar dados para o formulário e requisitar seus campos.

Enviando dados para um formulário

Para enviar dados para um formulário, basta copiar a primeira URL mostrada na janela de opções e utilizá-la numa requisição POST. Abaixo temos um exemplo de código dessa requisição em JavaScript, utilizando fetch. Perceba que nesse exemplo o corpo da requisição é composto de um email e uma mensagem.

const response = await fetch(
  'https://submit.starlightcms.io/v2/organizations/starlight/workspaces/my-app/forms/message-form',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email: emailVariable, message: messageVariable }),
  }
)

E pronto! Seus dados foram enviados para o formulário. Se quiser conferir se deu tudo certo do lado do código, basta checar response.status. Se for igual a 200, deu tudo certo! Caso hajam erros de validação, a API retornará os devidos erros na reposta da requisição.

Recebendo campos de um formulário

Para receber os campos de um formulário, basta copiar a segunda URL mostrada na janela de opções e utilizá-la numa requisição GET. Abaixo temos um exemplo de código dessa requisição em JavaScript, utilizando fetch.

const response = await fetch(
  'https://submit.starlightcms.io/v2/organizations/starlight/workspaces/my-app/forms/message-form/schema',
  {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  }
)

Para extrair os campos do formulário dessa resposta, basta utilizar await response.json(). E pronto! Você agora tem acesso à estrutura do seu formulário no seu código. Ele estará organizado da mesma forma que no Starlight, e cada campo estará no seu grupo de campos.

Vamos supor que guardamos o JSON da resposta em uma variável (const json = await response.json()) e printamos o seu atributo data (console.log(json.data)) para ver seus campos, teríamos um JSON similar a este:

{
  "version": 1,
  "groups": [
    {
      "title": "Informações básicas",
      "type": "group",
      "fields": [
        {
          "title": "Email",
          "key": "email",
          "type": "string",
          "is_required": true,
          "is_listable": true,
          "is_private": false,
          "is_archived": false,
          "is_unique": false,
          "is_identifier": false,
          "rules": {
            "max": 1000,
            "min": 0
          }
        },
        {
          "title": "Message",
          "key": "message",
          "type": "text",
          "is_required": true,
          "is_listable": true,
          "is_private": false,
          "is_archived": false,
          "is_unique": false,
          "is_identifier": false,
          "rules": {
            "max": 5000,
            "min": 0
          }
        }
      ]
    }
  ]
}

Se quiser conferir se deu tudo certo do lado do código, basta checar response.status. Se for igual a 200, deu tudo certo! Caso ocorra um ou mais erros, a API retornará os devidos erros na resposta da requisição.