# Floating Form Button

**URL:** https://community.glideapps.com/t/floating-form-button/16623
**Category:** Feature Requests
**Created:** [October 1, 2020, 5:48pm UTC](https://community.glideapps.com/t/floating-form-button/16623 "2020-10-01T17:48:36Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)
#### Post date: [October 2, 2020, 5:14pm UTC](https://community.glideapps.com/t/floating-form-button/16623/21 "2020-10-02T17:14:48Z")

</div>

Hi @SantiagoPerez may I request to share CSS of the profile “CSS Profile” as seen in your screenshot?  
Thanks

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 2, 2020, 5:20pm UTC](https://community.glideapps.com/t/floating-form-button/16623/22 "2020-10-02T17:20:50Z")

</div>

Sure,

```
   <img src="COVER" width="100%" style="object-fit: cover; opacity:0.9;border-top-left-radius:20px;border-top-right-radius:20px;margin-bottom:30px;">

<p><div style="
   background-image: url(AVATAR);
   -moz-border-radius: 50%;
   -webkit-border-radius: 50%;
   width:100px;
   height:100px;
   background-attachment:scroll;
   background-size: cover;
   background-position: center center;
   position:absolute;
   z-index:1;
   transform:translate(-50%,-50%);
   left:50%;
   margin-top: -35px; border: 5px solid white; background-color: #f3f3f3;"></div>
<center>
<br>
    <h2>NAME</h2>

```

You have to change COVER, AVATAR, NAME with the info you need.

this code was posted by @Deena and @Lucas_Pires

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 2, 2020, 5:22pm UTC](https://community.glideapps.com/t/floating-form-button/16623/23 "2020-10-02T17:22:14Z")

</div>

You should wrap the CSS code

```
like this

```

so that it won’t be “read” by Discourse.

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 2, 2020, 5:23pm UTC](https://community.glideapps.com/t/floating-form-button/16623/24 "2020-10-02T17:23:24Z")

</div>

I see what you mean.

I dont know how to do that.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 2, 2020, 5:24pm UTC](https://community.glideapps.com/t/floating-form-button/16623/25 "2020-10-02T17:24:05Z")

</div>

You can click the \</\> button to do so.

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 2, 2020, 5:24pm UTC](https://community.glideapps.com/t/floating-form-button/16623/26 "2020-10-02T17:24:26Z")

</div>

Thanks

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 2, 2020, 5:46pm UTC](https://community.glideapps.com/t/floating-form-button/16623/27 "2020-10-02T17:46:05Z")

</div>

Thanks @Jeff_Hager,

I moved the button down and placed it under the code and it’s working well now.

Much appreciated.

---

<div class="post-metadata">

### Author: ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)
#### Post date: [October 2, 2020, 5:46pm UTC](https://community.glideapps.com/t/floating-form-button/16623/28 "2020-10-02T17:46:44Z")

</div>

Thanks

---

<div class="post-metadata">

### Author: ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)
#### Post date: [October 3, 2020, 10:01am UTC](https://community.glideapps.com/t/floating-form-button/16623/29 "2020-10-03T10:01:10Z")

</div>

Using CSS you shared, I tried to have floating Whatsapp Button.

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 3, 2020, 12:29pm UTC](https://community.glideapps.com/t/floating-form-button/16623/30 "2020-10-03T12:29:40Z")

</div>

How did you manage to do it?

---

<div class="post-metadata">

### Author: ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)
#### Post date: [October 3, 2020, 1:15pm UTC](https://community.glideapps.com/t/floating-form-button/16623/31 "2020-10-03T13:15:38Z")

</div>

Using below code

```
<span><style>
.float{
	position:fixed;
	bottom:10%;
	right:60px;
	background-color:#29958d00;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;

</style></span>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=51955081075&text=Hola%21%20Quisiera%20m%C3%A1s%20informaci%C3%B3n%20sobre%20Varela%202." class="float" target="_blank">
<img src="https://img.icons8.com/color/344/whatsapp.png" alt="Whatsapp 1" width="80">
</a>

```

You need to change Your Contact Number after `phone=` and customized message after `text=`.

You can change the size of icon by changing `width='80'`.

I hope this helps.

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 3, 2020, 1:28pm UTC](https://community.glideapps.com/t/floating-form-button/16623/32 "2020-10-03T13:28:08Z")

</div>

That’s pretty cool!

Thanks a lot @Pratik_Shah!!!

Edit: Do you speak Spanish?

---

<div class="post-metadata">

### Author: ![Tuttografica](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tuttografica/32/16484_2.png) [@Tuttografica](https://community.glideapps.com/u/Tuttografica)
#### Post date: [October 4, 2020, 3:09pm UTC](https://community.glideapps.com/t/floating-form-button/16623/33 "2020-10-04T15:09:10Z")

</div>

I have been using it to simulate quantities in the shopping cart

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/f/f9608485785cbd55866c57be56721d75eb36691d.png)

in a test app for a restuarant.

> **[MI PARRILLA FAVORITA](https://miparrillafavorita.glideapp.io)**
>
> Hecha en Argentina

---

<div class="post-metadata">

### Author: ![George\_Lewis1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/george_lewis1/32/5517_2.png) [@George\_Lewis1](https://community.glideapps.com/u/George_Lewis1)
#### Post date: [October 10, 2020, 9:27am UTC](https://community.glideapps.com/t/floating-form-button/16623/34 "2020-10-10T09:27:55Z")

</div>

This is great @Jeff_Hager

Used the subclasses to get a nice side by side for sign up forms 🙂

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/0/0d45ab4fafef715eb70d980111742310de1e8c90.png)

.lauagL  
{  
position:fixed;  
width:45%;  
height:auto;  
bottom:5%;  
right:0%;  
}

.hALGjZ  
{  
position:fixed;  
width:45%;  
height:auto;  
bottom:5%;  
left:0%;  
}

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 12, 2020, 12:53am UTC](https://community.glideapps.com/t/floating-form-button/16623/35 "2020-10-12T00:53:10Z")

</div>

Anyone has an issue with the floating button not clickable?

---

<div class="post-metadata">

### Author: ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)
#### Post date: [October 12, 2020, 12:56am UTC](https://community.glideapps.com/t/floating-form-button/16623/36 "2020-10-12T00:56:18Z")

</div>

You have to move the bouton to the end and place the code right above it.

I had that same problem and that’s how I solved it.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 12, 2020, 1:09am UTC](https://community.glideapps.com/t/floating-form-button/16623/37 "2020-10-12T01:09:09Z")

</div>

Thank you, that solved the problem!

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 12, 2020, 9:26am UTC](https://community.glideapps.com/t/floating-form-button/16623/38 "2020-10-12T09:26:01Z")

</div>

Came up with a solution to the add button. I use a floating add form and give it a condition so that only certain types of user can add a new item.

For anyone new, the current add item in a non-details screen doesn’t give you a choice to prevent certain types of user to add items.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/2X/c/c391a8a22db9aa998e4d312f6a0395f639ae90dc.jpeg)

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [October 14, 2020, 7:20pm UTC](https://community.glideapps.com/t/floating-form-button/16623/39 "2020-10-14T19:20:01Z")

</div>

BEAUTIFUL work 👏👏👏

---

<div class="post-metadata">

### Author: ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)
#### Post date: [October 14, 2020, 7:49pm UTC](https://community.glideapps.com/t/floating-form-button/16623/40 "2020-10-14T19:49:25Z")

</div>

can you share the full code for this? I tried it and just got the text to apear instead of maing the 2 buttons next to each other

[Previous page](https://community.glideapps.com/t/floating-form-button/16623.md?page=1)

[Next page](https://community.glideapps.com/t/floating-form-button/16623.md?page=3)