Skip to main content

Customization

Default behaviour​

If you only set the team and processId, you'll get this default behaviour:

  • YepCode form will start the process execution
  • A loading overlay will be shown over the form during the execution with the message: Sending information...
  • If success:
    • Response object will be logged in the JavaScript log console
    • Form element will be replaced by a the message: The form has been successfully submitted
  • If error:
    • Response object will be logged in the JavaScript error console
    • Form element will be replaced by a the message: There has been an error submitting the form

All of this may be extended with the following configuration:

Add success or error callback functions​

You may provide a functions to manage the process execution response. This is quite powerfull as you could be for example retrieving records from one database, and then showing them to the user.

The syntax to set these functions in each approach would be:

<div
  data-yepcode-form-team="<yepcode-team-id>"
  data-yepcode-form-process="<yepcode-process-id>"
  data-yepcode-form-on-success="(optional) HANDLER_FUNCTION_NAME"
  data-yepcode-form-on-error="(optional) HANDLER_FUNCTION_NAME"
></div>

You should provide a JavaScript funcion name globaly available in the webpage (called with window.${functionName}), and will be invoked passing the generated formId, and the JSON result of the started execution. One sample could be:

<script>
  window.manageOutput = (formId, jsonResponse) => {
    document.getElementById("output").innerHTML = JSON.stringify(
      jsonResponse,
      2,
      null
    );
  };
</script>

Same approach works for success and error callbacks.

Default success function behaviour using response information​

We have implemented some default behaviour that is really helpful to solve the most frecuent use cases:

Show a success message from process execution​

If your process execution return a JSON containing a message attribute (that could include HTML code)...

...it will be used if form submission was success:

Redirect to any URL​

If your process execution return a JSON containing a redirect object with url and optionally timeout the use will be redirected to that page after form submission:

return {
  redirect: {
    url: "https://google.com",
    timeout: 2000,
  },
};

Run any JavaScript callback function​

If your process execution return a JSON containing a jsCallback attribute, that code will be executed after form submission:

return {
  jsCallback: `
  analytics.track("User Registered", {
    email: "ada@lovelace.com"
    plan: "STARTER"
  });
  `,
};

Add initial form values​

You may provide a JSON object that will be used to set initial values in the form. It may be specially interesting to set hidden fields values, as they won't be shown to the user.

The syntax to set these default values in each approach would be:

<div
  data-yepcode-form-team="<yepcode-team-id>"
  data-yepcode-form-process="<yepcode-process-id>"
  data-yepcode-form-default-values='{
    "company": "Trileuco Solutions",
    "oneHiddenField": "the-value"
  }'
></div>

Configure YepCode sync or async process execution​

By default all process executions will be synchronous, but if you are working with a long time execution, we may just start it in an asynchronous approach and YepCode will respond instantly with 201 http code and a JSON informing about execution id.

The syntax to set these default values in each approach would be:

<div
  data-yepcode-form-team="<yepcode-team-id>"
  data-yepcode-form-process="<yepcode-process-id>"
  data-yepcode-form-async="true"
></div>

Additional options​

YepCode Forms support additional configuration using one JSON object. This options JSON object can be configured both in the embebed script or function, or into the JSON Schema specification:

<div
  data-yepcode-form-team="<yepcode-team-id>"
  data-yepcode-form-process="<yepcode-process-id>"
  data-yepcode-form-options='
  {
    "theme": "dark (default) | light",
    "loadingOverlayDisabled": false,
    "loadingOverlayContent": "Sending information...",
    "locale": "es"
  }'
></div>

Appearance configuration​

YepCode Forms supports several appearance configurations to fit with your site styles.

This configuration must be provided using the options object, and allows to change this appearance details:

  • Theme & styles configuration
  • Disable the loading overlay
  • Change the loading overlay text message
{
  "theme": "dark (default) | light",
  "loadingOverlayDisabled": false,
  "loadingOverlayContent": "Sending information..."
}

Themes and styles​

YepCode Forms include two out-of-the-box themes. Each theme is defined using a CSS variables file:

You can create a new theme, just extending any of these CSS files and then setting the embedFormOptions configuration themeStylesheet, for example:

"embedFormOptions": {
  "themeStylesheet": "https://yepcode.io/sdk/styles-theme-hurt-eyes.css"
},

Another alternative is just to provide the CSS rules into this themeStylesheet option:

"embedFormOptions": {
    "themeStylesheet": ":root {\n--ycf-accent-color: #05e20c;\n--ycf-accent-color-darker: #be0493;}"
  }
tip

If need it, there are some CSS classes that wrap the form container (.yepcode-form-container), and also the form itself (form.yepcode-form).

Using JSON Schema for appearance tunning​

YepCode Forms are rendered using react-jsonschema-form so all the UI schema configuration from this library, is available to be used.

To provide greater flexibility to the forms and the content they render (titles, descriptions, help messages), we have enhanced and extended them to support markdown. You can read more about this in YepCode parameters."

One example could be to change the submit button text. Just add this node in your parameters schema, and it's done!

"ui": {
  "ui:submitButtonOptions": {
    "submitText": "Click me!"
  }
}

Internationalization​

YepCode Forms allow to internationalize the error messages. To achieve this, you only need to set a locale param inside the options object.

Available locales are: en, ar, ca, cs, de, es, fi, fr, hu, id, it, ja, ko, nb, nl, pl, pt-BR, ru, sk, sv, th, zh, zh-TW

Locale sample configuration using data attributes:

<div
  data-yepcode-form-team="<yepcode-team-id>"
  data-yepcode-form-process="<yepcode-process-id>"
  data-yepcode-form-options='
  {
    "locale": "es"
  }'
></div>
Last updated on