Order Number

[Lesan]

In some cases, The form builder is used for far more than just a form. I have a customer that has a very detailed form for a Mailing Request. How great would it be that after the form submission, you get a Order Number. A random generated order number. It would be on the success message of course. As well as Email Notifications. We can even include it as [order-number] as the ID.

The Order Number should have these options

Prefix to add before the number
Suffix to add after the number
Length of the random number
Option to include letters

This would also help my customer find on the spreadsheet with all the submissions, search by order number.

[Max]

Hi there, @Lesan

Could you please send me a link to the page where this widget is installed, or just specify its ID? I’ll be happy to check if it’s feasible

[Lesan]

I just send you a message with the link. Thanks

[Max]

Thank you!

I’ve passed it on to the devs and will get back to you tomorrow

[Max]

Hey there, @Lesan

Thank you for waiting!

Here is the solution from our devs:

const PREFIX = 'ORDER_';
const SUFFIX = '_USER';
const NUMBER_LENGTH = 8;

function getOrder({ prefix = '', suffix = '', numberLength = 8 }) {
  const number = Array.from({ length: numberLength }, () =>
    ((Math.random() * 16) | 0).toString(16).toUpperCase()
  ).join('');

  return `${prefix}${number}${suffix}`;
}
let isUpdated = false;
let order = getOrder({
  prefix: PREFIX,
  suffix: SUFFIX,
  numberLength: NUMBER_LENGTH
});

widget.setFieldValue('[order]', order);

const content = document.querySelector('[class*="Content__FormContainer-sc"]');
const mutationObserver = new MutationObserver(([mutation]) => {
  const targetNode = mutation.target;

  const submitMessage = targetNode.querySelector(
    '[class*="SubmitMessage__Text-sc"]'
  );

  if (isUpdated && !submitMessage) {
    widget.setFieldValue('[order]', order);
    isUpdated = false;
  }

  if (!submitMessage || submitMessage.querySelector('#order')) {
    return;
  }

  const orderBlock = document.createElement('div');
  orderBlock.id = 'order';
  orderBlock.innerHTML = `<strong>Order: ${order}</strong>`;
  submitMessage.prepend(orderBlock);
  order = getOrder({
    prefix: PREFIX,
    suffix: SUFFIX,
    numberLength: NUMBER_LENGTH
  });
  isUpdated = true;
});

mutationObserver.observe(content, { childList: true, subtree: false });

This code should be added to the Custom JS section on the Settings tab of your widget’s settings.

You can adjust the prefix, suffix and number length in the first 3 lines of the code. Devs recommended using the number length starting from 8 to avoid the possible repetitions.

Test it out and let me know if you like the result

[Lesan]

Awesome! I just tested and it worked. 1 issue, the code is not showing up in email when i put the id [order] and would it be possible to show in the excel also? It’s only showing correctly in the success message.

The devs are more than welcomed to test the form themselves if it’s easier. My client is aware about the widget.

[Max]

Hi there, @Lesan

Apologies for missing 1 important point!

To make the code work correctly, you need to a hidden field with the name “Order to your widget”. This way the order number will be displayed in spreadsheets and submissions as well:

Could you please double-check it and let me know how it worked?