
All loaders share the same controls which are self explanatory, Speed, Size, X-position & Color, and some of them also have a Stroke width option.
Thank you for choosing
Upon plugin installation you will be promted to install the necessary (free) plugins from the WordPress repository, Contact Form 7 & Style Contact Form 7.
If you are unfamiliar with the required plugins then you might want to check out their documentation first.
Contact Form 7 Documentation
Style Contact Form 7 Documentation
Once you have all installed and activated all the required plugins, navigate to a new Post or Page where you would like to add a contact form, this will open the Block Editor.
The first block to add is Style Contact Form 7, load it and select a contact form, then add Style Contact Form 7 Pro block.
Infinity
Ellipsis
Ripple
Chunk
Heart
Cubes
Dual Ring
Wedges
Spin
The Animated Loaders block contains 9 animated loaders from loading.io that you can edit to fit your design.
All loaders share the same controls which are self explanatory, Speed, Size, X-position & Color, and some of them also have a Stroke width option.
To Edit a loader first of all click on the loader block in the block editor, this will display the loader block options, if you would like to switch loader click on the 'Select Animated Loader' button in the block inspector sidebar, this will open a modal wondow and show you all the loaders you can choose from. select a loader then you can go ahead and adjust it to match your theme style.
The Submit Blocks CF7 block contains three core inner blocks preloaded with
content. An Image Block with animated SVG and two Heading blocks.
You can edit these blocks or
replace them with any other blocks you like (You might want to add additional text with a Paragraph
Block or a Button Block to direct your readers elsewhere after they have sent a message). Anything
within this container will show after the contact form is successfully submitted.
This block's container style is mirrored from your contact form block, changes to Background Color, Margin, Padding, Border & Shadow will take effect.
This is a WordPress Gutenberg Core image block and so has a full range of options available. for a full description of the available options check out the official Image Block documentation.
A nice feature to play around with is the Duotone filter, this can help you easily style an image to fit with your design.
You can replace the default animation with any image you like, the standard accepted file types are JPEG, PNG, & GIF. To display your images nice and crisp on retina displays you should make your image twice as wide as it will be on screen.
There are two WordPress Gutenberg Core Heading blocks with some default text, you can edit these any way you like, change the Color, Heading Level, Font Family... for a full description of the available heading block options check out the official Heading Block documentation.
You can easily edit the headings color to match your WordPress Theme and change the message to suit the type of form you have.