AI Chatbot: How to make form fields required for submissions

Pro Tips Elfsight Widgets Tips
1

Looking for a way to make users fill in all fields in the AI Chatbot form before the submission? We’ve got a solution!

Just add this code to the Custom JS field on the General tab of your widget’s settings and you’ll be fine:

const waitForElement = (selector, root = document) => new Promise(res => {
    const observer = new MutationObserver(() => {
        const element = root.querySelector(selector);
        if (element) {
            res(element);
            observer.disconnect();
        }
    });
    
    observer.observe(root, { childList: true, subtree: true });
});


(function makeInputRequired() {
  waitForElement("[class*='form-layout__Form-sc']").then((form) => {
    form.querySelectorAll('input').forEach(input => {
        input.required = true;   
        input.setAttribute('aria-required', 'true');
    });
    form.removeAttribute('novalidate');
  });
})();

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link

This video demonstrates the feature in action:


Guys, was this solution helpful? Let us know in the comments :slightly_smiling_face:

3 Likes
4

Hi @Max,

For the community’s benefit, can you explain better what form fields are affected with your JS code? Also, can you post a screenshot depicting the affected form fields you are referring to?

Thank you :slight_smile:

1 Like
5

Hi there, @AeroConsultants :waving_hand:

As mentioned in the post, the code is applied to all form fields that can be added to the widget (Email, Phone, Name, Consent box).

image
image721×648 42.5 KB

However, that’s a great point that it would be better to show how the code works, and I’ve attached a video screencast with the feature in action to the original post.

Thank you so much for the feedback, we really appreciate that :blush:

1 Like