How to Use Simple Contact Form Widget

How to Use Simple Contact Form Widget

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.

Content Tab

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

From Layout

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.

Submit Button

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.

Additional Options

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.



Style Tab

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.

Form Style

From this section, the thing you can do is to increase the field space. So, go to the Style tab > Form Style.

Label

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.

Fields

Normal:

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.

Focus:

This mode will let you set background and border color to be focused the every single field.

Just go to the Fields > Focus.

Submit Button

Here is the submit button. To style the button, there are two modes (Normal and Hover). Just, see the screenshot below.

Normal:

Hover:

Additional Message

From here, you will be able to style the additional message. Simply, go to the Additional Message.


Video Assist

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.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Missed The Black Friday offer this year? Get up for flat 50% discount right now.