Contact form is one of the most vital components of the website. In this article, I’m going to tell about the Simple Contact Form Widget by Element Pack and how to use it. I’ll include some instructions and pictures detailed to help you get started.
So, let’s start.
To Insert Widget
Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above.
Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot
You’ll find here a few switcher buttons (Label, Contact Number Field, Name/Email Field Inline) that will allow you to manipulate the form. In addition, Input Size from where you can select any size with default one (Small, Large ) as well as alignment of Text (left, center, and right).
One important thing to note is that nothing is showing in the form. And for that you have to enable some switcher buttons (Custom Text, Additional Bottom Message, and Hide reCAPTCHA Badge) from the section Additional.
Go to the Content tab > Forms Layout.
This section will allow you to add text to the Submit Button and also to determine size and alignment.
So, go to the Content tab > Submit Button.
This section includes some additional options. If an option is needed, from here, you can enable the option. That’s it.
Simply, go to the Content tab > Additional Options.
Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design.
Styling with the Style tab in Elementor will always give you a fantastic experience.
Let’s have a look.
From this section, the thing you can do is to increase the field space. So, go to the Style tab > Form Style.
Label is used to define something (in terms of form Name, Email, Contact Number, Subject, etc are label.). This section will allow you to set spacing, text color, and typography to the form.
Therefore, follow Style tab > Label.
There are two modes(Normal and Focus) in the Fields section. In the Normal mode, you’ll be able to set text, placeholder, and background color.
In addition, border type and radius, box-shadow, padding, and typography. Look at the screenshot above and follow the flow below.
Go to the Style tab > Fields.
This mode will let you set background and border color to be focused the every single field.
Just go to the Fields > Focus.
Here is the submit button. To style the button, there are two modes (Normal and Hover). Just, see the screenshot below.
From here, you will be able to style the additional message. Simply, go to the Additional Message.
In conclusion, though there are various contact form plugins in the WordPress repository, I hope our Simple Contact Form Widget will be one of the best solutions for making contact form. Watch video assist and to get more ideas about the usage of the widget by Element Pack, take a jump into the demo page.