CMS Development

RMechergui
Member

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

SOLVE

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

 

2023-01-27_183541.png

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.

0 Upvotes
1 Accepted solution
miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

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

SOLVE

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.

View solution in original post

4 Replies 4
RMechergui
Member

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

SOLVE

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

0 Upvotes
miljkovicmisa
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

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

SOLVE

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.

miljkovicmisa
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

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

SOLVE

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.

Jaycee_Lewis
Community Manager
Community Manager

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

SOLVE

Brilliant! Thanks for the tip, @miljkovicmisa 👋

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes