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

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:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "t****",
 portalId: "portalId-****",
 formId: "formId-******",

onFormReady: function($form){

 $form.find('input[id="event_date-43b27612-415f-42fc-a353-a0c0baa41c4a"]').attr('disabled','true');
 }

 });
</script>

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.

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.

Brilliant! Thanks for the tip, @miljkovicmisa :waving_hand:

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

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 :wink:

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

So basically apply the mentioned css with jQuery.