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:

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) 

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

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

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)

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

Now select the form widget. 

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)

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)

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)

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)

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)

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)

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)

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

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)

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!

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.