<

Welcome

Thank you for choosing

Style Contact Form 7 Pro



Required Plugins

Upon plugin installation you will be promted to install the necessary (free) plugins from the WordPress repository, Contact Form 7 & Style Contact Form 7.

Getting Started

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.

Insert Blocks

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.

Block Navigation

Selecting the Style Contact Form 7 block hides the Style Contact Form 7 Pro block, allowing you to design your page as it will appear on the front end, with the Pro block only visible after form submission. You can navigate back to this block by using the list view.

Animated Loaders

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.

Loader Controls

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.

Edit Loader

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.

Submit Blocks CF7

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.

Block Style

This block's container style is mirrored from your contact form block, changes to Background Color, Margin, Padding, Border & Shadow will take effect.

Image Block

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.

Duotone Filter

A nice feature to play around with is the Duotone filter, this can help you easily style an image to fit with your design.

Replace Image

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.

Heading Block

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.

Edit Heading

You can easily edit the headings color to match your WordPress Theme and change the message to suit the type of form you have.