contact form Gutenberg block

Getwid Blocks: WordPress Contact Form Gutenberg Block

Home > Blog > Getwid Gutenberg Blocks > Getwid Blocks: WordPress Contact Form Gutenberg Block

The Contact Form Gutenberg Block by Getwid brings a plain contact form to your WordPress website. Such a simple WordPress contact form is not overloaded with excessive fields and settings making it a perfect solution for implementing a bare-minimum, lightweight form for website inquiries.

In addition to the “classic” form fields available in this block, the form allows you to implement the reCAPTCHA anti-spam mechanism by Google.

Purpose of the Contact Form Gutenberg Block

It’s a WordPress-native contact form block crafted for Gutenberg and Getwid. The block can substitute a separate WordPress contact form plugin.

Features of the Getwid Contact Form Block

Here are default contact form fields you can embed and optionally mark as required:

  • Name
  • Email
  • Message
  • Text
  • reCaptcha (Captcha by Google).

If you want to protect your contact form for WordPress from getting spammed, use reCAPTCHA: firstly sign up for an API key pair, then obtain your credentials and, finally, embed the token via the block configuration panel.

recaptcha

As you create contact form WordPress fields, choose the available ones from the fields within the block:

add new form elements

The block editor allows you to visually add a contact form to WordPress with custom field labels and placeholders.

edit field lablels inline

Let’s now briefly list the main settings of this WordPress add a contact form:

  • Put the email subject for incoming emails. Each custom contact form WordPress can have it’s own ID, so they can be delivered with different email subjects.

different contact forms

  • The choice of colors for the “Submit” button. The block will ensure a smooth design blend with whatever WordPress theme is used.

form settings

Note: you’ll receive all emails to the inbox stated as your WordPress admin email address (WordPress dashboard > Settings > General).

Design Tips For Making a WordPress Contact Us Form

If you wish to create the best contact form for WordPress, follow the next recommendations:

  • Stick to the theme brand colors for the email submission button.
  • Improve the appearance of your contact form in WordPress by using the Section Getwid block.
  • Put the Google Maps block by Getwid along the contact form to improve the presentation of your Contact us form WordPress page.

google maps contact form

Getwid Base – a Free Multipurpose Gutenberg Theme

How did you like the Gutenberg form block? Getwid is an independent library of Gutenberg blocks that can be used with any WordPress theme, but we have the best solution: the multipurpose Getwid Base theme. This is the lightweight theme where functionality meets design and provides you with a smoother and more user-friendly way to work in Gutenberg.

The theme and blocks are available for free download:

Check out Getwid Demo

Download Getwid Gutenberg Blocks Free

Install Getwid Base Starter Theme for Gutenberg

Getwid Video Tutorials

This is it! Now you can build the best contact form WordPress block in the Gutenberg editor for free. Use the comment section if you have further questions on how to add contact form WordPress or edit your WordPress contact form widget.

Was this article helpful?

Yes No

You have already left your review.

9 Replies to “Getwid Blocks: WordPress Contact Form Gutenberg Block”

  1. Hello, Thanks for the wonderful contact form. How can we replace the WordPress from with the one that sends the email? Thus we can receive the data of the customer who writes to us.

    1. There is no possibility to configure email settings or email template. The email of the recipient is the one from Settings > General. The email of the sender is added to Reply to: automatically so when you reply to the message the email of the visitor is used to send the email to. We have the request to provide more options to add cust recipients, edit email template, etc. We will update the commend when we have any news.

  2. Hi,
    works nice but configuring the “To:” address seems necessary to me. At least a hint vor devs how to hook to change this would be nice.
    Thanks!

    1. Hi Fanky, At the moment the email of the sender is added as “To:” automatically. We have this feature on our to-do list to offer more configurations for the Contact Form block. Thank you

      1. Hi, so I’m back with the workeround.
        Btw. I was talking about the “To” field, which is defaulted to get_option( ‘admin_email’ ) on line 232 in plugins/getwid/includes/blocks/contact-form.php
        If you don’t want to change the plugin code and make it un-updatable, unhook and hook your own copy of the two functions from this file. This can be put in functions.php :

        remove_action( ‘wp_ajax_getwid_send_mail’, ‘send’);
        add_action( ‘wp_ajax_getwid_send_mail’, ‘tha_send’);

        function tha_send() {

        check_ajax_referer( ‘getwid_nonce_contact_form’, ‘security’ );

        if ( !isset( $_POST[‘data’][‘g-recaptcha-response’] ) ) {
        $this->send_mail( $_POST[‘data’] );
        } else {
        $recaptcha_challenge = sanitize_text_field( wp_unslash( $_POST[‘data’][‘g-recaptcha-response’] ) );
        $recaptcha_secret_key = get_option(‘getwid_recaptcha_v2_secret_key’);

        $request = wp_remote_get(
        ‘https://google.com/recaptcha/api/siteverify?secret=’ . $recaptcha_secret_key . ‘&response=’ . $recaptcha_challenge,
        array( ‘timeout’ => 15 )
        );

        $response = json_decode( wp_remote_retrieve_body( $request ), false );

        $errors = ”;
        if ( ! $response->{ ‘success’ } ) {
        foreach ( $response->{ ‘error-codes’ } as $index => $value ) {
        $errors .= $this->get_error( $value );
        }
        wp_send_json_error( $errors );
        } else {
        tha_send_mail( $_POST[‘data’] );
        }
        }
        }

        function tha_send_mail( $data ) {

        $to = “YOUR——EMAIL——–HERE—[email protected]”;

        $subject = sprintf(
        //translators: %s is a blogname
        __( ‘This e-mail was sent from a contact form on %s’, ‘getwid’ ),
        get_option( ‘blogname’ )
        );

        if ( ! empty( $data[‘subject’] ) ) {
        $subject = sanitize_text_field( wp_unslash( $data[ ‘subject’ ] ) );
        }

        $email = sanitize_email( wp_unslash( $data[ ’email’ ] ) );
        $name = sanitize_text_field( wp_unslash( $data[ ‘name’ ] ) );
        $message = sanitize_textarea_field( wp_unslash( $data[ ‘message’ ] ) );
        $body = $message;

        if ( $email ) {
        $headers = array( ‘Reply-To: ‘ . $name . ‘ ‘ );
        }

        $response = getwid()->mailer()->send( $to, $subject, $body, $headers );

        if ( $response ) {
        wp_send_json_success(
        __( ‘Thank you for your message. It has been sent.’,
        ‘getwid’
        ) );
        return;
        }

        wp_send_json_error(
        __(‘There was an error trying to send your message. Please try again later.’, ‘getwid’)
        );
        }

  3. Hello, Thanks for the wonderful contact form.
    However an option to ask the sender’s mobile number can be very useful in today’s world.

    1. Hi Jatinder,
      Thank you for your feedback. We have added your upvote to the task and we will notify you if we have any news.

Leave a Reply

Your email address will not be published. Required fields are marked *