How to Make Glassmorphism Forms in Elementor [PRO]

Today I’m going to show you how to create a glassmorphic looking forms or even a contact forms using Elementor. You’re going to learn how to use just one line of CSS and have something as beautiful as this:

7 0E6nDJH1a7xF7bjvDahn6v83UG0SCw3uGWrezRRpspz4BUUGo8QlF09APPKFaPvL J1sq07CPdDL4YA5UeISrTj UU5vCphJSaWrPq sSK4JonObAVv WezfK MKCwCvPNIbTT

Please note that the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video

What you need Glassmorphism Forms in Elementor

For this you’re going to need Elementor Pro. This will enable you to add Custom CSS to your styling.

You’ll also need the Premium addons for Elementor to create an animated blob section. If you want a gradient, you may use the CSS Gradients here.

With that, let’s get started on creating a Glassmorphic Form in Elementor

Step 1: Create A New Page

Go to your Elementor dashboard, got to pages and click Add New to create a new page.(00:32) 

24ErR3mm2qUnA3gNn8TSvIQQ11ey2DjXeWzEIdsfLWAZduP2r4DMaxp0oKj0QbY8aHQ plmRGQE2Hjuk HvMG3cgpiq3aG xd4Cmu3Saez6fRSUMjwRyBb

Name the new page “Contact Form” then click on Edit with Elementor (00:36)

qA zR2vorFkaKJWBWvJfbxuVFdb6esPuywtfJjc5Ncj0rPDoihy5rFNROitWmo1INkyJkLNGNduOzgSCXYfSB CD InvZdpr4IJmulT DleUgnURszudvniNn8QUkwLmu3u4R30z

This takes you to the Elementor edit page. Here, click on the plus sign and choose to add a 3 column section (00:41)

sGPCp fU1M20Fa3CY1QbVS2cU9uIgcfAiarymTBMK

Go to Layout under the Edit Section on the left side, go down and choose  Minimum Height, make it VH 100.

Then go to the style section

Under Background Type choose gradient and add a gradient color. (00:54)

oL9QQvSAT eA92cuUDDf4Az2NYAZFR6VRkkGBiO1oq0KFaf XqEBFneFpZcNkXSEJHaX1 n1YVe7ZDi2bUKFIA7pYQ9NUZyfX R4XY1KXV4GXjz VCv16VpEdgD8m6tOkDBvU0Zl

Go back to widgets and look for form widget, drag it into the middle column (01:03)

Now select the form widget. 

rtBUu6JAwM9 ftHTk m7Rkajq7MxCsyiXCRJEbKdQ L8xP2XPQWmfdwAPSQFdGkmC14Wq3gtXJDYa108QIg23p1vTVJ

You’ll notice that under the Edit Form on the left you are able to add as many other items as you want. For example, you can add text, email, phone number, etc. But that’s not what I want to look into. We are simply going to concentrate on the styling of this form  to achieve the glassmorphic effect.

Step 2: Edit the Form

Under Edit Form on the left side go to Style, increase Rows Gap to 25

Go down to Text Color under Label and make it white

Under Field make text color white too

Go to Typography and change Family to Poppins and give it a Border Color of white as well

Go to Border Width and make it 1 point, and make Border Radius 10 pixels. That’s how you get those rounded borders on the form. (01:57)

Continue down to Buttons 

Change the Typography to Poppins

Change Background Color to white and make Text Color black

Go to Border Radius and change it to 35

Under Hover change background color to color code #FFC600 to achieve that color on the send button when you hover over it (02:28)

mBLUb5NBpbzcNZmgIOKCKmswHboOnxUcGUacMCbReSuZswxEMPzDWJnuBMAIw58YqnpHs47l3Yd9fcQJxxQ8ysBhZeOyF1ip8KT eRc6fXmbBu8TDRGawoPTVWbvINR QmM XYfQ

In this case we don’t want to show labels like the Name, Email or Message, we just want to show the placeholder text. So we need to hide the labels and ato do this:

Go to Content and go down to Label and choose to Hide

Go to Style, then go to the Field option and make the Background Color transparent.

Now select the column and again in the Edit Column section on the left, go to Advanced and give the column Top padding of 70, Right padding 30, Bottom padding 70 and Left padding 30.

Next go to Style option, go to Border and give it a solid border of 2 pixels and color white.

Give it a Border Radius of 35, but you can always make it 25 if you think 35 looks abit much.

Also Read: How to Display Elementor Slider from Templates

Step 3: Add Animated Blob in Elementor

Here you can make any background shape that you want and animate it, but in this case I want the animated blob so let’s get right to it.

Select the section and go to Layout 

Scroll down and find the Blob Generator, enable it.

The Blob generator feature is provided by the Premium Addons for Elementor.

Go to Blob Source and choose to Create Your Own

Make the blob 7 under Nodes

Make Randomness 5

Make Size 400

Under Fill option make it gradient, you can choose the gradient color by changing the color codes.

Go down to Horizontal offset and make it 29, then make Vertical offset 10.

Choose to animate the blob by turning on the Animate option. (04:38)

wbuUo55shKGxzPhys sWtI60QJU8b BwiIFJjo904EftAxZHi2HsCstcMoTLWLXCnzx2XDtGnRBO7GsL0BaZ0GOvdcDymPuCBdGEasF L5Tq6uatDD7zVPsUoqRWeSdwy p1mfDS

You can also choose to hide the blob when using certain devices, that’s under the Hide Blob On option.

You’ll notice the blob is in front of the contact form, to move it to the back; scroll up and find the Z-Index option, change it from 1 to 0.

Now you can go to the Preview Changes option and see what it looks like. (05:00)

dw2YgvcUZ x0iwqeJG

Step 4: Add Glassmorphic effect in Elementor

And now for the long awaited glassmorphic effect on the form:

Select the column and go to Advanced

Down in the Custom CSS option, add a small line of code below: (05:16)

cVo nhOGFYsIigZAKnSqZTJKck36VeKZjAzRP2t9hCvpC0k698iTFxta5qbdk03 4XbWvvsr xyOKmn3qsHm 35D8HGTX6TU9AVvI1TUrn0ui6dnC8JXShp0p20EOzGIDBSuYzG

Column Glassmorphism CSS

selector{
   backdrop-filter: blur(10px);
}

This code reads: that for the selected element add a backdrop filter with a blur of 10 pixels. You can make it more or less to your preference.

Go to Preview and see the result.

 Step 5: Add 3-Color Gradient

When you go back and look at the original form preview you’ll realize that it has a background with different shades of color. It is more than a 3 pointer gradient.

However if you’re using Elementor like here, you don’t have the 3 point color gradient option. There are only 2 color options. So to be able to add 3 colors to the gradient you have to use a custom code again. To do this:

Select the section

Go to Style and under Color remove gradient colors that you had previously added.

Now go to Advanced, scroll down to Custom CSS option, here, add a custom css code that’s going to give gradient to the section. 

For this you can either use the CSS gradient tool to generate, or you can just copy a CSS code to your Elementor.

Here, select the first gradient

Notice that you have the option to change the rotation of the gradient and you can also even add another color to it.

Copy the CSS (07:03)

MJRFlm3SHNDPndoBo17IifKkvyE6UjywWv98JTR12sjbkCObLCzQw5BpMMFd2zG6GDNfyHg3vucvR1zjkyUYgxcXp9g4kPQPIJlYjCE OYuSHjA4qBkHb inksbfvGVuFI9Splnj

Contact Form Section Background Gradient CSS

selector{
    background-color: #4158D0;
background-image: linear-gradient(45deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

Go back to the Elementor editor and under Advanced goto the Custom CSS option and paste the gradient CSS code. Now you can Publish, and you have your 3 point color gradient! (07:24)

wYMxXEbJTzGJQsSYiYLlZUZ6y9o3CbR4D36w llAP8RbLRtSKws0aegl3qTeFUO24m0ntG23kZzN7In8GfkPkkfqsj4HUneMk2Nh0DaLUdJ5AdMZeSDDvsz4gE0cGA ahOmHFqnA

The contact form looks great and it is responsive to computer and tablet devices. However on mobile devices some additional padding is needed. (07:39)

nxO1b5fpr9Le63n6G FT6bwK0F G1GXIoS8CO8gcxJTSkFYTf 5ulIIG9nAbppCULWxdE8ZXI v8NVvni6VBJH4Wod9obhLxEMe1577ZO PxmncL9bp8IRwbq5vgEcplz zsrvwZ

For this:

Select the main section

Go to Advanced and add Padding of 20 on both the Right and left, leave the top and bottom at 0. Now the form is well responsive on mobile devices too.

You can use this same procedure to create any form, login page or any other page with a glass morphic look. 

Return to the Editor

Duplicate the main section

Go t the widgets, find the log in widget and drag it into the column (08:24)

To Read: How to Add Floating Social Icons in Elementor

q0Zibgh5ihTfCsgqYk0imU 3FsvlSYXcoziNzxFKwqPiDOR1vl2ghqK9zok8xG5Ci7BSSZzCbqMzQh0bn60E5R cRo EKIQWKW1MHLstvnVfz2s6 SdJDWu8b 2m5lWih1jbhMXl

After adding the widget,  select the form you previously styled and copy, go up to the form you dragged into the column and paste the styling (using the edit icon on the upper corner of the form).(08:30)

ATPgS BldSaDS7frdH4mH6LWdWSG0Xof1jta2KEnGp3zi OnleqvdDU3evzuohjK1Q jcCNWsw2P3HhcvHpH7olVGBi WQ2Q0JtRMekuVcF0Na5tC1IPBkSFL5bwT8ycaWNgBZ4K

Now select the form and go hide the Labels under Form Fields

In case you want to change the gradient you can just go back to the gradient background options; grab the gradient css code you want and copy it. Go back and select your section under Advanced, go to Custom CSS and replace the code with the one you copied.

To make your form more fun and give it more depth, you can give it a small shadow on the column borders.

To do this:

Go back to your Editor

Select the column and go to Style 

Go to the Border option, click on the Box Shadow to activate it.

Now click Update and that’s it, a beautiful Glassmorphic form right there!

Glassmorphism Forms in Elementor

I hope you learnt and enjoyed making these glassmorphism forms in Elementor with me. Please subscribe to my youtube channel for more tutorials like this. For any comments or questions please use the comment section below.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users