Customization of the Email field in Form Builder

Ask the Community Customization
1

Is there any more information available about this? Could this possibly be done using Conditional Logic? For example, if Field 1 is not equal to Field 2, then …

1 Like
2

Hi @user8320 :wave:

I’ve talked to the devs, and they’ve said that it may be possible to customize the widget using the Custom JS option.

Could you just specify the name of the widget where you’d like to implement this feature?

3

Hi Max,

The widget is currently named [Reparatie Tarieven].

1 Like
4

I don’t see an Email field there. Could you please add it to the widget and specify the text of an error you’d like to have?

5

Oh sorry, I see I’m responding to the wrong topic. It’s about [Reparatie V2] and [Inkoop V2]. And would this also be possible for the field [Bankrekeningnummer:] in my [Inkoop V2] widget?

1 Like
7

Got you, thanks!

I’ve passed your request to the devs and will update you once the solution is ready :slightly_smiling_face:

8

Hey there, @user8320 :wave:

Thank you for waiting!

Our devs managed to come up with custom solutions for your widgets.

Inkoop V2

Add this code to the Custom CSS field on the Appearance tab of your widget’s settings:

#es-custom-error { 
  font-size: 13px;
  color: rgb(255, 56, 56);
}

.es-custom-error {
  border-color: rgb(255, 56, 56) !important;
}

[class*='ButtonBase__ButtonContainer-sc'][disabled] [class*='ButtonBase__Overlay-sc'] {
  background: rgba(17, 17, 17, 0.1) !important;
}

[class*='ButtonBase__ButtonContainer-sc'][disabled] {
  background: rgba(17, 17, 17, 0.1) !important;
  cursor: not-allowed;
}

And this script should be added to the Custom JS field on the Settings tab of your widget’s settings:


const EMAIL_ID = "lqhwao7q";
const CONFIRM_EMAIL_ID = "m2envzgh";
const NUMBER_ID = "lx1md5d8";
const CONFIRM_NUMBER_ID = "m2ioqkmc";
const ERROR_MESSAGE = "De ingevoerde waarden komen niet overeen";

const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
            res(component);
        } else if (i !== 150) {
            setTimeout(check, 100);
            i++;
        }
    };

    check();
});

waitForElement("[class*='FieldsGrid__Grid-sc']").then(grid => {
  const callback = (mutationList) => mutationList.forEach(({ type, addedNodes }) => {
    if (type !== 'childList' || !addedNodes.length) {
      return;
    }
    
    const addListeners = (inputID, confirmInputID) => {
      const input = document.getElementById(inputID);
      const confirmInput = document.getElementById(confirmInputID);
      
      if (!input && !confirmInput) {
        return;
      }
      
      const inputContainer = confirmInput.closest("[class*='FormFieldLayout__Element-sc']");
      const textControl = confirmInput.closest("[class*='TextControlBase__TextControlBaseContainer-sc']");
      const error = document.createElement("div");
      error.id = "es-custom-error";
      error.textContent = ERROR_MESSAGE;
      
      const submitButton = grid.parentNode.querySelector("button[aria-label='Verstuur']");
      
      const validateInput = () => {
        if (input.value !== confirmInput.value) {
          textControl.classList.add("es-custom-error");
          if (!inputContainer.querySelector("#es-custom-error")) {
            inputContainer.append(error);
          }
          
          submitButton.disabled = 'true';
        } else {
          textControl.classList.remove("es-custom-error");
          error.remove();
          
          submitButton.disabled = '';
        }
      };
      
      input.addEventListener("input", validateInput);
      confirmInput.addEventListener("input", validateInput);
    };
    
    addListeners(EMAIL_ID, CONFIRM_EMAIL_ID);
    addListeners(NUMBER_ID, CONFIRM_NUMBER_ID);
  });
  
  const observer = new MutationObserver(callback);
  observer.observe(grid, { childList: true });
});

For this part of the code (first 4 lines), you need to set the correct values:

const EMAIL_ID = "lqhwao7q";
const CONFIRM_EMAIL_ID = "m2envzgh";
const NUMBER_ID = "lx1md5d8";
const CONFIRM_NUMBER_ID = "m2ioqkmc";

Here is how you can get the correct values:

  1. Open the field settings

  2. Remove Label and Placeholder

  3. Copy the Field ID without brackets and then restore Label and Placeholder

image
image1920×959 48.4 KB


In the 5th line of the code, you can set the text of the error message: const ERROR_MESSAGE = "De ingevoerde waarden komen niet overeen";


Reparatie V2

Use the same CSS code as for the Inkoop widget. Here is the script for the Custom JS field:

const EMAIL_ID = "lqhwao7q";
const CONFIRM_EMAIL_ID = "m2ipdcly";
const ERROR_MESSAGE = "De ingevoerde waarden komen niet overeen";

const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
            res(component);
        } else if (i !== 150) {
            setTimeout(check, 100);
            i++;
        }
    };

    check();
});

waitForElement("[class*='FieldsGrid__Grid-sc']").then(grid => {
  const callback = (mutationList) => mutationList.forEach(({ type, addedNodes }) => {
    if (type !== 'childList' || !addedNodes.length) {
      return;
    }
    
    const addListeners = (inputID, confirmInputID) => {
      const input = document.getElementById(inputID);
      const confirmInput = document.getElementById(confirmInputID);
      
      if (!input && !confirmInput) {
        return;
      }
      
      const inputContainer = confirmInput.closest("[class*='FormFieldLayout__Element-sc']");
      const textControl = confirmInput.closest("[class*='TextControlBase__TextControlBaseContainer-sc']");
      const error = document.createElement("div");
      error.id = "es-custom-error";
      error.textContent = ERROR_MESSAGE;
      
      const submitButton = grid.parentNode.querySelector("button[aria-label='Verstuur']");
      
      const validateInput = () => {
        if (input.value !== confirmInput.value) {
          textControl.classList.add("es-custom-error");
          if (!inputContainer.querySelector("#es-custom-error")) {
            inputContainer.append(error);
          }
          
          submitButton.disabled = 'true';
        } else {
          textControl.classList.remove("es-custom-error");
          error.remove();
          
          submitButton.disabled = '';
        }
      };
      
      input.addEventListener("input", validateInput);
      confirmInput.addEventListener("input", validateInput);
    };
    
    addListeners(EMAIL_ID, CONFIRM_EMAIL_ID);
  });
  
  const observer = new MutationObserver(callback);
  observer.observe(grid, { childList: true });
});

To get the correct values for the first 2 lines of the code, please follow the same steps described for the Inkoop V2 widget.

Please try it out and let me know if it worked :slightly_smiling_face:

10

Good afternoon, Max,

Sorry for the late response. I just tested it, and it seems to be working. Thank you for your help!

1 Like
11

Great, you are always welcome!

By the way, we’d like to invite you to join our new challenge. This time, you should create a slogan for Elfsight to win a 6-month extension to your subscription.

Check the details and join in: October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)

We’ll be super happy to see you as a participant :wink: