Read-only property on a form

We are creating a form where there is one property that will be populated via an API call. We do not want the customers to be able to change this paroperty. Since there is no way to have this property hidden AND have logic associated with it, is there a way to have this field displayed, but read-only?

Many thanks,

Kim

Hi @KRRussell,

If the field is hidden, could you explain why the field needs to have logic applied to it?

Could you also elaborate how the form is partly submitted by the contact, partly by API? If the form is submitted via API, you’re not displaying the HubSpot form directly on your page, I’d assume, and you have full control over which fields are being displayed and which logic applies, don’t you? Accounts Dashboard | HubSpot

Best regards

Thank you for your reply. The customer fills out a Stripe payment link. They will choose the program there. The idea is that the “program” choice from the payment link be populated in the HubSpot form which will trigger which fields to see/not see. Since we can’t use logic on hidden properties, I wondered if there was a loophole of some kind that will make this work.

Using the new form editor

@KRRussell thank you for explaining – this still does not make 100% sense to me. Why would you apply logic to hidden fields if you have full control via API over which one of the hidden fields you fill? If they’re hidden, you could simply have all potential fields as hidden fields and simply not fill some of them. Why isn’t keeping the irrelevant ones empty an option?

This time with visual aids.

The customer fills out a payment link. They choose Service 2. They pay and submit.

On submit, the customer is then directed to an enrollment form to choose the options for the service they have chosen. Different service, different options.

If they picked and paid for Service 2 on the payment link, they will only be able to see Options 2 on the form, but not Options 1 and 3.

The goals is that we do not want the customers to be able to make changes to the Program fields. We understand if we make the Program field hidden, we cannot apply logic to it. Is there something else we can do to achieve this? Like, for instance, make the field viewable, but unable to be edited.

KRRussell_4-1743778797402.png

@KRRussell if you already have the information about the program, why does this have to be a field on the form at all? Whiny not have all fields, regardless of logic, as hidden fields? Is there any harm if they’re included in the submission, empty? That’s the part I cannot make sense of.

Hi @KRRussell
Since you need to display a field (but prevent edits) while preserving its API-populated value, here are two reliable methods:
Option 1: Client-Side Read-Only Field (Less Secure)
Use JavaScript/CSS to make the field visually non-editable (e.g., readOnly attribute or pointer-events: none).
Note: Users could bypass this via browser dev tools, but it works for most non-technical visitors.
Option 2: Hidden Field + Display Logic (More Secure)
Add a hidden field to store the API-populated value (this submits the true data).
Display a read-only copy of the value in a separate field or text element (e.g., using a static text module or a disabled input).
Use JavaScript to sync the API value to the hidden field on form load.
This ensures data integrity while showing the value to users.