Make Fields Unclickable on HubSpot?

[RMechergui]

Hi,

I want to block the 'Date' field from clicks because I add the default date on the field and I don't want the customer to change it, I don't want to use the hidden field option because it will be hidden first and second I want to inform the customer about that date without change the ' Date Field' is there a way I could do that with CSS code to do it?

Thank you.

[Anton]

 Hi @RMechergui, 

thank you for the link. 

add the following code to your main CSS file. It will be applied to all HubSpot forms

form .hs-dateinput input{
pointer-events:none;
}

If you want the code to be applied only to specific HubSpot forms you can modify the code like this:

form#[formID] .hs-dateinput input{
pointer-events:none;
}

if you want this code to be applied to several forms you can change it like this

form#[formID-1] .hs-dateinput input,
form#[formID-2] .hs-dateinput input,
form#[formID-3] .hs-dateinput input{
pointer-events:none;
}

important: You have to replace [formID] or [formID-#] with the correct ID of the used form.

You can find the ID by inspecting the form and looking for 

<form id="hsForm_****" method="POST"....>
...
</form>

for security reasons I won't share the ID of the form

best, 

Anton

[RMechergui]

Hi, Anton

Thank you for the CSS, but when I try it it doesn't work, I don't know why, I understand that CSS that you give it right, but I don't know why is not working on the WordPress website, can you please help me?

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

Thank you 

[Anton]

Hi @RMechergui, 

there are several ways you can make a date field(or any other) not clickable by the user. Personally I don't recommend it since it's a bad user experience, but you can add

form input[type="date"], 
form input#date_of_birth-input{
pointer-events:none;
}

at the bottom of your main CSS file if you want it to affect every date field in every form on your page. If you want to have it on one particular page you can add it like this

<style>
form input[type="date"], 
form input#date_of_birth-input{
pointer-events:none;
}
</style>

to the "header-HTML" section in the advanced options of in settings tab of the particular page

Note: replace "date_of_birth-input" with the name of your property. If you're unsure inspect the element in the browser by right-click and "inspect element". The ID is the information you're looking for

hope this helps

best, 

Anton

[RMechergui]

Hi, Anton, Thank you so much for this valuable information, but what If I'm using WordPress with Elementor Page Builder, What is the best way to do that?

This is the link to the page: https://m.codingdojo.africa/open-house/

with the section that I want to make unclickable on the screenshot:

Thank you.