With Contact Form 7, you can create a contact form for your visitors. It’s a very useful block for collecting data.
1. How to add Contact Form 7 Block? #
To add the Contact Form 7 Block in your Gutenberg editor first click on (+) icon then in the search box type “Contact Form 7” and you will see the “Contact Form 7” block.
After inserting the “Contact Form 7” block you will get the default look like below. Now you need to change the settings.
2. General Settings #
From the General Settings Tab, You can select a form, display placeholder on/ off, and display error message options. The General settings panel properties are as follows.
3. Style Settings #
From the Styles Settings Tab, you can set all possible styles typography, color, padding, background, and other style settings.
- Form Box : From the form box panel, you can set form max width, form box alignment left, right and center for styling the form box.
- Label: From the label panel, you can set typography, color and label to field space for styling the input label.
- Input/ Textarea /Select: From the input/textarea/select panel, you can set typography, color, background, width, height, field space, padding and border for styling the input/textarea/select field.
- Checkbox & Radio: From the checkbox & radio panel, you can set size, space, label color, background color, checked color, border width, checkbox rounded corner for styling the checkbox & radio.
- Placeholder: From the placeholder panel, you can set color for styling the input placeholder.
- Submit Button: From the submit button panel, you can set typography, color, width, height, padding, margin, border and box shadow for styling the submit button.
- Validation Message: From the validation message panel, you can set typography, color and border color for styling the input field validation massage.
- Success Message: From the success message panel, you can set typography, color, border color, padding and margin for styling the form submit success massage.
- Error Message: From the error message panel, you can set typography, color, border color, padding and margin for styling form submit error message.
4. Advanced Settings #
From the advanced settings tab, you can control the wrapper style.
- Wrapper Margin & Padding: You can set the wrapper margin and padding in px, em or %
- Background: You can set your desired background in the wrapper like flat color, gradient color, or an image with image overlay color with opacity.
- Border: You can set the default border or hover border with different border styles and also can set border-radius.
- Shadow: You can set box shadow for normal and hover style.
