Website Field Clickable

Ask the Community Customization
1

Website field is not clickable link only in the hint you can add a clickable link this is a suggestion
(Link style)
(Label) :stop_sign: Wait! Are you looking to rent a hall? Click Here! (Placeholder Link)

(Hint) Please do not fill out the form below for facility or hall rentals. We have a dedicated booking system to handle availability, pricing, and reservations.

(Button style hint)
(Label) :stop_sign: Wait! Are you looking to rent a hall?

(Hint) Please do not fill out the form below for facility or hall rentals. We have a dedicated booking system to handle availability, pricing, and reservations.

[ Go to Facility Rental Form ] → (Placeholder Link Button)

image
image1653Ă—796 50.9 KB

1 Like
3

Hi there, @Norton :waving_hand:

I’ve checked your widget and see that you’ve added a button to redirect users if they’ve chosen “I want to celebrate” option:

image
image628Ă—411 16.8 KB

However, I think there is a better solution for your needs. Our devs can create a custom script that will dynamically change the text of the Submit button to “Go to Event & Rental Form” and redirect to the needed URL.

This way you won’t have a redundant Send to the Center button below. Would you like to proceed this way?

4

@Max yes playing around with paragraph field I was able to use the code editor and added the message you saw with a working clickable, later I realized that the website or link field is for client to add info. But my thing now is that you can still able to send form without restrictions, is there a way you can cancel out that redundant button :grinning_face_with_smiling_eyes: and we don’t get spams, thanks :folded_hands:

1 Like
5

Yep, I think it’s possible!

I’ve forwarded your request to the devs and will update you once I have their response :wink:

6

We’ve added this script to the Custom JS field on the Settings tab of your widget’s settings:

const DROPDOWN_LABEL = 'What brings you to our Center today? *';
const BUTTON_LABEL = 'Send to the Center';
const TARGET_VALUE = 'I want to Celebrate (Rentals)';

const normalizeText = (text) =>
    text.replace(/\s+/g, ' ').trim().toLowerCase();

const waitForElement = (selector, root = document) =>
    new Promise((res) => {
        const existing = root.querySelector(selector);
        if (existing) return res(existing);

        const observer = new MutationObserver(() => {
            const element = root.querySelector(selector);
            if (element) {
                res(element);
                observer.disconnect();
            }
        });

        observer.observe(root, { childList: true, subtree: true });
    });

waitForElement(`[aria-label="${DROPDOWN_LABEL}"]`).then((dropdown) => {
    const form = dropdown.closest('form');
    if (!form) return;

    const button = [...form.querySelectorAll('button')]
        .find(btn =>
            normalizeText(btn.textContent) === normalizeText(BUTTON_LABEL)
        );

    if (!button) return;

    const checkValue = () => {
        const currentValue = normalizeText(dropdown.textContent);

        if (currentValue === normalizeText(TARGET_VALUE)) {
            button.style.display = 'none';
        } else {
            button.style.display = '';
        }
    };

    checkValue();

    const observer = new MutationObserver(checkValue);

    observer.observe(dropdown, {
        childList: true,
        subtree: true,
        characterData: true
    });
});

Note: Custom JS doesn’t function in the preview mode, so you’ll see the result only on the page, where the widget is installed.


Please check it out and let me know if it worked for you :slightly_smiling_face:

1 Like
8

Beautiful job, thanks @Max and devs

1 Like
9

It’s my pleasure!

If anything else comes up, we’re always here to help :wink:

1 Like