Contact Form 7 widget allows you to display contact form in web page. You can easily build this widget with EnterAddons.
Using Contact Form 7 :
You can see the below video to get an insight into how you can use the Contact Form 7 Widget, Or you can follow the documentation whichever you find convenient.
Firstly, select the Contact Form 7 Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.
Step1
Secondly, from ‘Content’ Section you will get Contact Form 7 section.
After that, from Contact Form 7 section, you can add / select the contact-form in order to show in page, which is already installed, and that is given below.
Moreover, contact-from is appeared , as like as below.
Step2
From ‘Style’ section you can stylize the widget. You will get the Content Wrapper Settings, All Label \ Placeholder Style, Input Field, Text-area Field and Submit Button section respectively.
After that, from Content Wrapper Settings section you can add margin, padding, border-type, border-radius, box-shadow and background-type respectively, and that is given below.
Then, from All Label / Placeholder Style section you can edit all placeholder color, all label color, Typography.
After That, from All Label / Placeholder Style section you can edit all placeholder color, all label color, Typography, and that is given below.
Then, from Text-area Field section you can add title color, typography, height, margin, padding, border-type, border-radius and background-type respectively.
After that, from Submit Button section you can add typography, text color, margin and padding border-radius, box-shadow and background-type respectively etc..
Moreover, from this section you can see HOVER effect also.
Step3
Finally, after finishing all the editing, click update, and then click on ‘Preview > Preview in new tab’ to see your work live.
That’s it.