How to Make Responsive Elementor Forms | Elementor Resources 1261184722971383023
How to Make Responsive Elementor Forms

How to Make Responsive Elementor Forms

Step 1: We will begin this tutorial by adding a new section.

css-filters-tutorial-1

Step 2: Choose your desired column structure. For this tutorial, I shall choose the first one.

css-filters-tutorial-1

Step 3: On the widgets panel inside the left sidebar, drag it on the center of the Elementor designer.

css-filters-tutorial-1

It should look like this:

css-filters-tutorial-1

Step 4: Now, delete the other column. This means there should only be one column inside the section after. It will now look like this.

css-filters-tutorial-1

Step 5: Next step is to search for the “Form” widget. Note that this widget is available only on Elementor Pro.

css-filters-tutorial-1

Drag it as also at the center of the screen, on the “Drag widget here” area.

css-filters-tutorial-1

Step 6: Now, modify the form according to your needs, add more custom fields if necessary. For this example, I will let everything as it is except message. Change Message’s Type to text and replace its Label and Placeholder as Number.

css-filters-tutorial-1

Step 7: Set the width of each Elements appropriately. For this, I’ll change my column width to 25%.

css-filters-tutorial-1

Doing that will result to this:

css-filters-tutorial-1

Step 8: In order to make the fields centered, go to “Advanced/Custom Positioning” and set “width” to “Inline (auto)”.

css-filters-tutorial-1

Step 9: Then the form will look like this. Click the highlighted one to show the settings of the form.

css-filters-tutorial-1

Step 10: Set “vertical-align” to “middle” and “horizontal align” to” center” to have the same results as in the image shown below.

css-filters-tutorial-1

Step 11: Adjust the width according to your preference.

css-filters-tutorial-1

Your Elementor form should now look like this:

css-filters-tutorial-1

If you want the elements to have a “full-line” then just set each element’s column width to 100% and it will look like this:

css-filters-tutorial-1

Now we’re done! Just replicate the same procedure to your sections and you’d be designing like the best!

Thanks for Reaching This Far! 🙂

I hope we were able to help you with this tutorial! You can also try to install the Elementor Pro Version and get access to more Elementor templates for free!

Get Elementor Pro Now

If you have more concerns or have encountered other issues, let us know in the comments section!

Leave a Reply

×
×

Cart