cakewp / cf7-blocks Goto Github PK

View Code? Open in Web Editor NEW

23.0 4.0 3.0 7.68 MB

Integrate native gutenberg editor for contact form 7

Home Page: https://cf7blocks.com

Shell 5.11% JavaScript 71.92% PHP 16.86% SCSS 6.11%

cf7 contact-form wordpress gutenberg gutenberg-editor

cf7-blocks's Introduction

CF7 Blocks

Effortlessly Create Stunning Contact Forms with CF7 Blocks and Contact Form 7.

Description

CF7 Blocks is the ultimate solution for integrating Contact Form 7 with the WordPress block editor. With CF7 Blocks, you can easily create and customize contact forms within the familiar block editor interface. No more fiddling with shortcodes or HTML - just drag and drop blocks to build your forms exactly how you want them.

CF7 Blocks comes with a variety of pre-designed form templates to choose from, making it even easier to get started. And with full integration with Contact Form 7, all your form submissions will be saved and managed in the same place as before.

Don't waste any more time trying to fit your forms into the old editor - upgrade to CF7 Blocks and take advantage of the power and flexibility of the block editor today!

Installation

Make sure you have Contact Form 7 plugin installed to use CF7 Blocks.

Install Contact Form 7 if it is not already installed.
Install CF7 Blocks either via the WordPress.org plugin repository or by uploading the files to your server.
Activate CF7 Blocks.
Create a new form.

Disable the CF7 Block Editor

If you specifically want to disable the block editor on certain contact forms. You use the following additional settings:

cf7_blocks_disable: true

Enable the Native Shortcode Picker

As the cf7 blocks does not currently supports all the native cf7 fields. Although you can insert the shortcodes in the block editor, You can also enable the native cf7 shortcode generator with the following additional settings:

cf7_blocks_enable_shortcodes_picker: true

FAQs

How do I create a form with CF7 Blocks?

To create a new form with CF7 Blocks, follow these steps:

From the WordPress dashboard, go to Contact > Add New.
You will notice new block editor interface to create forms.
Choose the form template you want to use, and continue from there.
Click the "Publish" button to save your form.

Is CF7 Blocks compatible with the Classic Editor?

CF7 Blocks is designed to work exclusively with the WordPress block editor. It is not compatible with the Classic Editor.

Get Connected

Subscribe to newsletter

To get latest updates regarding cf7blocks, Please subscribe to this newsletter: https://cf7blocks.substack.com/

Support

cf7-blocks's People

Contributors

Stargazers

Watchers

Forkers

alvindcaesar ifahimreza dlangham

cf7-blocks's Issues

Missing script dependency `wpcf7-admin-taggenerator` in block editor

cf7-blocks-integrate is missing the dependency wpcf7-admin-taggenerator which leads to the following error in the console (both in regular and isolated block editor):

Uncaught TypeError: Cannot set properties of undefined (setting 'insert')
    at cf7-blocks-integrate.js?ver=080408f486f493f8b1e7:1:513
(anonymous) @ cf7-blocks-integrate.js?ver=080408f486f493f8b1e7:1
load (async)
(anonymous) @ cf7-blocks-integrate.js?ver=080408f486f493f8b1e7:1

WordPress: 6.1.1
Contact Form 7: 5.7.2
CF7 Blocks: 1.0.1
PHP: 8.0

Temporary fixed with this snippet:

add_action('init', function () {
    wp_append_dependencies_to_script('cf7-blocks-integrate', [ 'wpcf7-admin-taggenerator' ]);
}, 11);

/**
 * Add $deps (script handles) to the array of dependencies for $handle
 * @see http://wordpress.stackexchange.com/questions/100709/add-a-script-as-a-dependency-to-a-registered-script
 *
 * @param string $handle Script handle for which you want to add a dependency
 * @param string $deps    Script handle - the dependencies you wish to add
 */
function wp_append_dependencies_to_script( $handle, $deps ) {
    global $wp_scripts;

    $script = $wp_scripts->query( $handle, 'registered' );
    if ( ! $script ) {
        return false;
    }

    foreach ( (array) $deps as $dep ) {
        if ( ! in_array( $dep, $script->deps, true ) ) {
            $script->deps[] = $dep;
        }
    }

    return true;
}

Awesome plugin by the way, is there any chance to edit the forms directly in the regular block editor in the future?

Description - Tooltip

It would not be bad to have a structure to display a description or more commonly a tooltip for advice on a single field

New contact form, infinite loading

When creating new form (Contact > Add New), the spinning mountain spins forever.

Would love to use this plugin. <3

Current WP version 6.3.1

Changing the "Field Name" in the editors breaks the input field in the frontend

I have tried to replicate the issue multiple times, and it consistently occurs. The input field does not display on frontend if I change the "Field Name".

I have attached screenshots of the issue for you to look over.

Editor

Frontend

Add on Field : autocomplete:name

https://contactform7.com/form-autocompletion/

it would not hurt to have this field in the single field options list as well

Finalize Default value fields.

Some field types have text_field option for default value which is not correct, such as range block.

a11y - Tabs

Make field blocks accessible via tab key.

`cf7-blocks-integrate` is loaded in the frontend

I think the cf7-blocks-integrate script and styles are only needed for the block editor, right?
They are loaded in the frontend at the moment.

Temporary fixed with:

add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_admin() ) {
        wp_dequeue_script( 'cf7-blocks-integrate' );
        wp_dequeue_style( 'cf7-blocks-integrate' );
    }
}, 100, 2 );