Saltar al contenido principal

Enviando un formulario

✅ Propósito del escenario:

  • Obtener la configuración del formulario desde OneEntry CMS
  • Recopilar datos de entrada del usuario desde un formulario de contacto.
  • Asegurarse de que los datos estén correctamente formateados y validados antes de la presentación.
  • Enviar los datos recopilados a una API de OneEntry.

✅ Lo que necesitas:

  • Una PROJECT_URL y APP_TOKEN válidos para la autenticación con la API de OneEntry.
  • Un formulario preconfigurado en OneEntry identificado por un marcador (por ejemplo, 'contact_us').
  • Campos de formulario preconfigurados.

📌 Importante:

  • Manejar posibles errores durante las solicitudes a la API de manera adecuada para proporcionar retroalimentación a los usuarios.
  • Mantener la privacidad y seguridad de los datos, especialmente al manejar información sensible como direcciones de correo electrónico.
  • Mantener los campos del formulario y sus marcadores sincronizados con la configuración del backend para evitar desajustes.
  • No manejamos errores en estos ejemplos.
  • Puedes manejar errores en trycatch o en una construcción como "await Promise.catch((error) => error)"

Escenario​

1. Importar oneEntry y definir url y token​

Ejemplo:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Crear un cliente API con la función defineOneEntry()​

Ejemplo:

const { AuthProvider, Orders, Payments, Forms } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Obtener el formulario con Forms.getFormByMarker()​

Ejemplo:

const formData = await Forms.getFormByMarker('contact_us');
Resultado:
[
  {
    "type": "string",
    "marker": "first_name",
    "isLogin": null,
    "isSignUp": null,
    "position": 1,
    "settings": {},
    "isVisible": true,
    "listTitles": [],
    "validators": {
      "requiredValidator": {
        "strict": true
      }
    },
    "localizeInfos": {
      "title": "Nombre"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  },
  {
    "type": "string",
    "marker": "email",
    "isLogin": null,
    "isSignUp": null,
    "position": 2,
    "settings": {},
    "isVisible": true,
    "listTitles": [],
    "validators": {
      "requiredValidator": {
        "strict": true
      },
      "emailInspectionValidator": true
    },
    "localizeInfos": {
      "title": "Correo electrónico"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  },
  {
    "type": "string",
    "marker": "surname",
    "isLogin": null,
    "isSignUp": null,
    "position": 3,
    "settings": {},
    "isVisible": true,
    "listTitles": [],
    "validators": {
      "stringInspectionValidator": {
        "stringMax": 0,
        "stringMin": 0,
        "stringLength": 0
      }
    },
    "localizeInfos": {
      "title": "Apellido"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  },
  {
    "type": "list",
    "marker": "topic",
    "isLogin": null,
    "isSignUp": null,
    "position": 4,
    "settings": {},
    "isVisible": true,
    "listTitles": [
      {
        "title": "Artículo",
        "value": "article",
        "extended": {
          "type": null,
          "value": null
        },
        "position": 1
      },
      {
        "title": "Artículo-2",
        "value": "article-2",
        "extended": {
          "type": null,
          "value": null
        },
        "position": 2
      }
    ],
    "validators": {
      "requiredValidator": {
        "strict": true
      }
    },
    "localizeInfos": {
      "title": "Tema"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  },
  {
    "type": "text",
    "marker": "text",
    "isLogin": null,
    "isSignUp": null,
    "position": 5,
    "settings": {},
    "isVisible": true,
    "listTitles": [],
    "validators": {},
    "localizeInfos": {
      "title": "Texto"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  },
  {
    "type": "spam",
    "marker": "spam",
    "isLogin": null,
    "isSignUp": null,
    "position": 6,
    "settings": {},
    "isVisible": true,
    "listTitles": [],
    "validators": {},
    "localizeInfos": {
      "title": "¿No eres un robot?"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  },
  {
    "type": "button",
    "marker": "send",
    "isLogin": null,
    "isSignUp": null,
    "position": 7,
    "settings": {},
    "isVisible": true,
    "listTitles": [],
    "validators": {},
    "localizeInfos": {
      "title": "Enviar"
    },
    "additionalFields": [],
    "isNotificationEmail": null,
    "isNotificationPhoneSMS": null,
    "isNotificationPhonePush": null
  }
]

4. Obtener datos de los campos desde el formulario del frontend​

Ejemplo:

[
  {
    "marker": "first_name",
    "value": "Nombre"
  },
  {
    "marker": "surname",
    "value": "Apellido"
  },
  {
    "marker": "email",
    "value": "tu@email.com"
  },
  {
    "marker": "topic",
    "value": [
      {
        "title": "Artículo",
        "value": "article"
      }
    ]
  },
  {
    "marker": "text",
    "value": "Algún texto"
  }
]

5. Transformar datos para su uso con el formulario de OneEntry​

Ejemplo:

const transformedFormData = fieldsData.map((field: any) => {
  const { marker, value } = field;
  const formField = formFields.find(
    (field: { marker: string }) => field.marker === marker,
  );
  const { type } = formField;

  switch (type) {
    case 'text':
      return {
        marker,
        type: 'text',
        value: [
          {
            htmlValue: value,
            plainValue: value,
          },
        ],
      };
    default:
      return {
        marker,
        type,
        value,
      };
  }
});
Resultado:
[
  {
    "marker": "first_name",
    "type": "string",
    "value": "Nombre"
  },
  {
    "marker": "surname",
    "type": "string",
    "value": "Apellido"
  },
  {
    "marker": "email",
    "type": "string",
    "value": "tu@email.com"
  },
  {
    "marker": "topic",
    "type": "list",
    "value": [
      {
        "title": "Artículo",
        "value": "article"
      }
    ]
  },
  {
    "marker": "text",
    "type": "text",
    "value": [
      {
        "htmlValue": "Algún texto",
        "plainValue": "Algún texto"
      }
    ]
  }
]

6. Publicar FormsData con FormData.postFormsData()​

Ejemplo:

const formResponse = await FormData.postFormsData({
  formIdentifier: 'contact_us',
  formData: transformedFormData,
});
Resultado:
{
  "formData": {
    "formIdentifier": "contact_us",
    "time": "2025-04-30T20:12:39.209Z",
    "formData": [
      {
        "marker": "first_name",
        "type": "string",
        "value": "Nombre"
      },
      {
        "marker": "surname",
        "type": "string",
        "value": "Apellido"
      },
      {
        "marker": "email",
        "type": "string",
        "value": "tu@email.com"
      },
      {
        "marker": "topic",
        "type": "list",
        "value": [
          {
            "title": "Artículo",
            "value": "article"
          }
        ]
      },
      {
        "marker": "text",
        "type": "text",
        "value": [
          {
            "htmlValue": "Algún texto",
            "plainValue": "Algún texto"
          }
        ]
      }
    ],
    "id": 68
  },
  "actionMessage": "Mensaje sobre el procesamiento exitoso de datos"
}

Ejemplo final​

// 1. Importar oneEntry y definir PROJECT_URL y APP_TOKEN
import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Crear un cliente API 
const { FileUploading, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. Obtener el formulario y ordenar los campos por posición
const formData = await Forms.getFormByMarker('contact_us');
const formFields = formData?.attributes.slice().sort(
  (a: { position: number }, b: { position: number }) =>
    a.position - b.position,
);

// 4. Obtener datos de los campos desde el formulario del frontend
const fieldsData = [
  {
    marker: 'first_name',
    value: 'Nombre',
  },
  {
    marker: 'surname',
    value: 'Apellido',
  },
  {
    marker: 'email',
    value: 'tu@email.com',
  },
  {
    marker: 'topic',
    value: [
      {
        title: 'Artículo',
        value: 'article',
      },
    ],
  },
  {
    marker: 'text',
    value: 'Algún texto',
  },
];

// 5. Transformar datos para su uso con el formulario de OneEntry 
const transformedFormData = fieldsData.map((field: any) => {
  const { marker, value } = field;
  const formField = formFields.find(
    (field: { marker: string }) => field.marker === marker,
  );
  const { type } = formField;

  switch (type) {
    case 'text':
      return {
        marker,
        type: 'text',
        value: [
          {
            htmlValue: value,
            plainValue: value,
          },
        ],
      };
    default:
      return {
        marker,
        type,
        value,
      };
  }
});

// 6. Publicar FormsData con FormData.postFormsData()
const formResponse = await FormData.postFormsData({
  formIdentifier: 'contact_us',
  formData: transformedFormData,
});
console.log(formResponse);