How to setup & styling the contact form

Calia uses the Contact Form 7 plugin to create contact forms. To learn how to use the Contact Form 7 plugin, you can read the Contact Form 7 documentation here.

Furthermore, the contact forms that have been created using Contact Form 7 can be displayed to the front end using Elementor widgets. Some Elementor widgets that can be used to display Contact Form 7 i.e :
Shortcode Widget
Shortcode Widget is one of many basic Elementor widgets. Copy & Paste Contact Form 7 shortcode to the Shortcode Widget to display the contact form in the element. To learn how to use Shortcode Widget, you can read the Shortcode Widget documentation  here.
In Calia, we use the Shortcode Widget to display the contact form on the "Get a quote" page.

Ekit Contact Form 7 Widget
Ekit Contact Form 7 Widget is one of the widgets of the ElementsKit Lite plugin. By using this widget, you just choose which form you want to display on the page.
In Calia, we use the Ekit Contact Form 7 Widget to display the "Find a Financial Advisor near you" form on the "Home" page.

EA Contact Form 7 Widget
EA Contact Form 7 Widget is a widget from the Essentials Addon for Elementor plugin. By using this widget, you just choose which form you want to display on the page.
To learn how to use the EA Contact Form 7 Widget, you can read the documentation here.
In Calia, we use the EA Contact Form 7 Widget to display the Contact Form on the "Contact Us" page.

Styling The Contact Form

There are 2 ways to styling the contact form, i.e :
Using the Style Tab setting in the widget
The easiest way to styling contact forms is by setting the styles on the Style Tab.

Using Custom CSS Classes setting in the widget

If the desired style is not in the style tab, then we can use the custom CSS Classes in the widget and then write the Custom CSS Code in the customizer.