Contact Form

Get connected with your visitors on a personal level with Contact Form. This simple but effective tool makes it easier for your visitor to communicate with you through your website. 

Video Instruction #

Using Contact Form #

To use contact form on your web page, follow the mentioned steps: 

Step 1 #

From the menu bar on the left-hand side, select Contact Form. Drag and drop the widget on the area you want it to be.

Step 2 #

After selecting the tool,  you will see the following options: Content, Style and Advanced. 

Contact Form on Elementor page builder

Step 3  #

In the Content section, you can edit the Icons. From here you can edit the texts of the icons on the contact form. 

Contact Form icon list menu

You can also select the format of the Contact Form from the premade presets. 

Contact Form preset menu

Step 4 #

From the Style section, you can customize the Contact Form freely. 

General:  The General section will allow you to edit the background, margin, padding and border of the Contact Form. 

Contact Form general style settings tab

Label: From the Label option, you can edit the typography, font color and add space between the different elements of the form. 

Contact Form label settings tab

Fields: You can customize the color of the text that will go inside the form. Also, you can customize spacing, padding and text indent to make the design attractive.  

Contact Form widget's field settings tab

You can also tweak the background color for the form to stand out. 

Contact Form widget's field settings tab

Placeholder: You can customize the color and background of the placeholder from this option as well.


Contact Form widget's placeholder settings tab

Button: Customize the button with the options to position the button, add background colors, border, margin, padding and even box shadow to make your button look spot on. 

Contact Form button settings tab
Contact Form button settings tab

Feedback: You can edit the details of  the feedback easily with this tool. Edit typography, text color, background, margin, padding and more with the feedback tool. 

Contact Form feedback settings tab

Error: If there is any error in submitting the Contact Form, you can customize that too. You can edit the typography, text color, background color and border from this option.

Contact Form errors settings tab

Step 5 #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Contact Form advanced settings tab

You will also get the chance to edit and customize the following options: 

  • Motion Effects
  • Background
  • Border
  • Positioning
  • Responsive
  • Attributes
  • Custom CSS

Motion Effects #

From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your widget look different. 

Contact Form motion effects settings tab

Background #

If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type and more.

Contact Form background settings tab

Border  #

If you want to add any line, box, dots and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Contact Form border settings tab

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings. 

Contact Form positioning settings tab

Responsive #

You can check the responsiveness of the widget if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.

Contact Form responsive settings tab

Attributes #

With Attributes, you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Powered by BetterDocs