topic Re: I have issue on using script to block field on Hubspot? in CMS Development

I have issue on using script to block field on Hubspot?

RMechergui — Fri, 27 Jan 2023 17:42:07 GMT

Hi,

Link of the page: https://m.codingdojo.africa/open-house/

I'm trying to block the date field on the form and make the customer not able to change it, we successfully succeed to block the field by using this code:

but there's still an issue with the 'Data Selector' is still shown when clicking on the field, Please check (screenshot):

How I could block this box from showing using javascript code, can you please help me to complete the script that we just created above this message?

Thank you.

Re: I have issue on using script to block field on Hubspot?

miljkovicmisa — Fri, 27 Jan 2023 18:59:45 GMT

Hello @RMechergui , you don't actually need javascript for this, you can do it by using just css like this:

.hs_event_date { pointer-events: none; }

Pointer events rule controls the mouse/touch functionality on the html elements so you can disable any events on any element by using the "none" value.

You can read more about pointer event here in this link.

If my answer was helpful please mark it as a solution.

Re: I have issue on using script to block field on Hubspot?

Jaycee_Lewis — Fri, 27 Jan 2023 19:01:16 GMT

Brilliant! Thanks for the tip, @miljkovicmisa 👋

Re: I have issue on using script to block field on Hubspot?

RMechergui — Fri, 27 Jan 2023 20:45:15 GMT

Hi, @miljkovicmisa @Jaycee_Lewis

Thank you for your reply, yes, I try this CSS solution before, and didn't work, I don't know why, please try it by yourself, that's why, I'm looking for javascript code to fix this issue.

Link: https://m.codingdojo.africa/open-house/

Thank you

Re: I have issue on using script to block field on Hubspot?

miljkovicmisa — Fri, 27 Jan 2023 23:46:30 GMT

Ow shoot, I missed that, it's an embedded form, that's why css didn't work for you, because it's in an iframe, css from your page cannot reach it.

Your code is correct, you should just change the part in the onFormReady function 😉

$form.find('.hs_event_date').css('pointer-events','none');

So basically apply the mentioned css with jQuery.