# Exploring the Enhanced Capabilities of Glide's Native Form

**URL:** https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876
**Category:** Community Resources
**Created:** [January 23, 2024, 1:03am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876 "2024-01-23T01:03:06Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 23, 2024, 1:03am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/1 "2024-01-23T01:03:06Z")

</div>

I want to share about the additional capabilities that we can achieve with Glide’s native form. What I have tested with the help of CSS is that native forms can also be applied for validation.

 ![Screenshot 2024-01-23 at 07.10.39](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/2/e22a47e41203bcc2b1d2aeb7130447a9b6a6d95a.png)

1. Create your validation in the table columns and present it through messages via the “hint” component.
2. Add the visibility conditional and the class “prevent-submit” to these hint components.
3. Add the following CSS code:

```auto
/*Container Form*/
#page-root:has(.prevent-submit) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}

/*Edit Form*/
#overlay-root:has(.prevent-submit) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}

```

However, I am still hoping for a conditional “on submit” approach rather than using CSS.

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 23, 2024, 1:21am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/2 "2024-01-23T01:21:44Z")

</div>

Waaaaait…so you’re attaching the prevent-submit class to the hint component and because the hint is present, it makes the submit button inactive?!

That’s amazing 👏 👏 👏

So…requires a business plan, and I agree, that I wish we had a native way of preventing submit, but until then, this is great!

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 23, 2024, 1:39am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/3 "2024-01-23T01:39:13Z")

</div>

Yes

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 23, 2024, 2:06am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/4 "2024-01-23T02:06:35Z")

</div>

I’m so impressed with this solution that I’m going to feature it on my YouTube channel. I’ll link to your post in the description to give you full credit.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 23, 2024, 2:12am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/5 "2024-01-23T02:12:03Z")

</div>

Thank you! Looking forward to the video. Much appreciated!

---

<div class="post-metadata">

### Author: ![nathanaelb](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nathanaelb/32/43079_2.png) [@nathanaelb](https://community.glideapps.com/u/nathanaelb)
#### Post date: [January 23, 2024, 10:17am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/6 "2024-01-23T10:17:36Z")

</div>

This is amazing, Himaladin 🌟

---

<div class="post-metadata">

### Author: ![NFNHello](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nfnhello/32/3371_2.png) [@NFNHello](https://community.glideapps.com/u/NFNHello)
#### Post date: [January 24, 2024, 5:02pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/7 "2024-01-24T17:02:37Z")

</div>

This is great! Thanks for sharing!

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [January 24, 2024, 5:30pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/8 "2024-01-24T17:30:06Z")

</div>

💯 agree. Here’s the video breakdown. @Himaladin — let me know if I missed anything:

> [@prohibited Hacking a Form Submit Button using CSS](https://community.glideapps.com/t/hacking-a-form-submit-button-using-css/69878):
>
> wave Hey fellow Gliders! I recently came across this post by @Himaladin, and I was so impressed that I had to create a video that walked through this hack step by step—it’s incredibly clever! Using a visibility condition, a custom class, and the :has() CSS pseudo-class, you can control whether or not users can submit a form regardless of required fields! Yes, you’ll need to be on the Business plan in order to use this hack because it requires the use of CSS, but it’s a great way to control …

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 25, 2024, 12:20am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/9 "2024-01-25T00:20:24Z")

</div>

I have watched your video, it’s very good in breaking down the steps to make it clearer. Thank you, Bob. I’m really glad to be able to share.

Additionally, for general knowledge, especially in sensitive cases, this method can still be hacked by users, in other words, the button can be reactivated in the developer tools. Therefore, I still hope that the prevention of the submit button can be provided by Glide.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [January 27, 2024, 3:11am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/10 "2024-01-27T03:11:10Z")

</div>

@Robert_Petitto did you know that the form also updates the time? It should now be possible to prevent the form from being submitted within the time limit.

---

<div class="post-metadata">

### Author: ![Dan\_San](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dan_san/32/24085_2.png) [@Dan\_San](https://community.glideapps.com/u/Dan_San)
#### Post date: [April 14, 2024, 3:56pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/11 "2024-04-14T15:56:04Z")

</div>

Robert, Thanks for this video, this is awesome.

@Himaladin Great find and contribution.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 24, 2024, 4:34am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/12 "2024-07-24T04:34:55Z")

</div>

**Update: Cross-language Form Submit Button Control**

If your application uses multiple languages, you can use the selector below:

```auto
/* Prevent-Submit for All LANGUAGES */
#page-root:not(:has(.mobile-layer)):has(.prevent-submit) #overlay-root > div:last-child button:nth-child(1), 
#page-root:has(.mobile-layer):has(.prevent-submit) #overlay-root > div:last-child button:nth-child(2) {
    pointer-events: none;
    opacity: 0.4;
}

```

---

<div class="post-metadata">

### Author: ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [July 24, 2024, 6:25pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/13 "2024-07-24T18:25:42Z")

</div>

@Himaladin

Suddenly this week, this CSS doesn’t seem to work. Can you verify?

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 24, 2024, 6:39pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/14 "2024-07-24T18:39:51Z")

</div>

This code still works for me. The major issue is that the devtools have been slowing down increasingly over the past few weeks. Today, it’s even worse, as it freezes under 10 seconds. I can’t inspect the CSS accurately.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 25, 2024, 12:03pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/15 "2024-07-25T12:03:25Z")

</div>

@Robert_Petitto,

Robert, sorry I was in a hurry to rest last night. What problems did you encounter? What I found was an issue with the language not matching the aria-label. Besides that, the most common issue is errors in writing comment codes. This is the hardest to clarify because the impact of the errors is only partial. So they feel that if other CSS is still working, why isn’t this one?

---

<div class="post-metadata">

### Author: ![Mauro\_Ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mauro_ayala/32/76139_2.png) [@Mauro\_Ayala](https://community.glideapps.com/u/Mauro_Ayala)
#### Post date: [August 22, 2024, 10:40pm UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/16 "2024-08-22T22:40:34Z")

</div>

Very helpful!!! Thanks you so much 👏👏👏

---

<div class="post-metadata">

### Author: ![Mauro\_Ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mauro_ayala/32/76139_2.png) [@Mauro\_Ayala](https://community.glideapps.com/u/Mauro_Ayala)
#### Post date: [August 24, 2024, 10:48am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/17 "2024-08-24T10:48:34Z")

</div>

Hi @Himaladin I tried the hack, and it worked really well. I encountered the limitation of being able to use it only once, because if I use it on different pages, it hides the button whenever ‘prevent-submit’ is present on any of them. Do you have any ideas on how to limit it to a specific form?

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [August 24, 2024, 10:59am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/18 "2024-08-24T10:59:51Z")

</div>

Could you explain more about what you mean? Actually, my code won’t work as long as you don’t write the class name “prevent-submit” in the component, and this code also doesn’t hide anything; it only makes it inactive (pointer-events: none;).

---

<div class="post-metadata">

### Author: ![Mauro\_Ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mauro_ayala/32/76139_2.png) [@Mauro\_Ayala](https://community.glideapps.com/u/Mauro_Ayala)
#### Post date: [August 26, 2024, 10:06am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/19 "2024-08-26T10:06:34Z")

</div>

Hi @Himaladin , thanks for replying! I’m currently using the class “prevent-sumit” on 2 different screens. If it’s displayed on either of these two, it disables ALL the submit buttons in the app. Is there a way to limit it so that it only disables the “submit” button on the pages or overlays where the “prevent-submit” class is located?

> [@Himaladin](#):
>
> Could you explain more about what you mean? Actually, my code won’t work as long as you don’t write the class name “prevent-submit” in the component, and this code also doesn’t hide anything; it only makes it inactive (pointer-events: none;).

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [August 26, 2024, 10:21am UTC](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876/20 "2024-08-26T10:21:15Z")

</div>

Hi @Mauro_Ayala,  
I don’t quite understand the state of the two different screens from you. Are you working with a custom form, or is your second screen an overlay on top of the first screen? Regardless, if you can change the name/label of the button, it will not be affected.

[Next page](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876.md?page=2)
