# Order Number

**URL:** <https://community.elfsight.com/t/order-number/77992>\
**Category:** Customization\
**Tags:** form-builder\
**Created:** [October 24, 2024, 3:51am UTC](https://community.elfsight.com/t/order-number/77992 "2024-10-24T03:51:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lesan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/lesan/32/71_2.png) [@Lesan](https://community.elfsight.com/u/Lesan)\
**Post date:** [October 24, 2024, 3:51am UTC](https://community.elfsight.com/t/order-number/77992/1 "2024-10-24T03:51:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 24, 2024, 11:33am UTC](https://community.elfsight.com/t/order-number/77992/3 "2024-10-24T11:33:22Z")

</div>

Hi there, @Lesan 👋

Could you please send me a link to the page where this widget is installed, or just specify its [ID](https://help.elfsight.com/article/1219-where-to-get-your-widget-id-in-new-dashboard)? I’ll be happy to check if it’s feasible 🙂

---

<div class="post-metadata">

**Author:** ![Lesan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/lesan/32/71_2.png) [@Lesan](https://community.elfsight.com/u/Lesan)\
**Post date:** [October 24, 2024, 4:04pm UTC](https://community.elfsight.com/t/order-number/77992/4 "2024-10-24T16:04:36Z")

</div>

I just send you a message with the link. Thanks 🙏

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 24, 2024, 5:17pm UTC](https://community.elfsight.com/t/order-number/77992/6 "2024-10-24T17:17:58Z")

</div>

Thank you!

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 25, 2024, 10:45am UTC](https://community.elfsight.com/t/order-number/77992/7 "2024-10-25T10:45:56Z")

</div>

Hey there, @Lesan 👋

Thank you for waiting!

Here is the solution from our devs:

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![Lesan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/lesan/32/71_2.png) [@Lesan](https://community.elfsight.com/u/Lesan)\
**Post date:** [October 27, 2024, 8:20pm UTC](https://community.elfsight.com/t/order-number/77992/8 "2024-10-27T20:20:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [October 28, 2024, 1:46pm UTC](https://community.elfsight.com/t/order-number/77992/9 "2024-10-28T13:46:13Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/9/f95d07aa72fd7248fa95db022bc61de22407051b.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/6/5600207230d9836c21bf34aa71dced7cf8e6c840.png)

  

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