Kode dari tutorial https://solusipress.com/Custom-Form-untuk-Berbagai-Kebutuhan

assets-contact-form.css

.form-field {
	margin-bottom: 10px;
}
.form-field label {
	display:block;
}
.form-field .input,
.form-field textarea {
	width: 100%;
}
.submit-success {
	background-color: rgba(211, 255, 237, 0.87);
	color: #146226;
	padding: 15px;
	margin-bottom: 20px;
}
ul.error-fields {
	list-style: none;
	padding: 15px;
	margin: 0px;
	background-color: rgba(255, 231, 231, 0.75);
	color: #9c3131;
	margin-bottom: 20px;
}
ul.error-fields li {
	list-style-type: none;
	margin: 0px;
}

assets-contact-form.js

(function( $ ) {
    'use strict';
    $( document ).ready( function() {
	    $( 'body' ).on( 'submit', '#frm-contact-form', function(e){
            var frm = $(this);
            e.preventDefault();
            $( '#form-container' ).loading( {message:'Mengirim Data...'} );
            $.ajax( {
	            url: spcf.ajaxurl,
	            type:'POST',
				dataType:'html',
				data:frm.serialize(),
				success: function( response ){
					$( '#form-container' ).html( response );
					$( '#form-container' ).loading('toggle');
				}
            } );
        } );
	} );
})( jQuery );    

contact-form-enqueue-scripts.php

<?php // do not use php tag when inserting this snippet
add_action( 'wp_enqueue_scripts', 'solusipress_custom_form_scripts' );
function solusipress_custom_form_scripts() {
	wp_register_style( 'custom-contact-form', plugin_dir_url( __FILE__ ) . 'assets/contact-form.css', [], '1.0.0', 'all' );
	
	wp_register_script( 'jquery-loading', plugin_dir_url( __FILE__ ) . 'assets/jquery-loading.js', ['jquery'] );
	wp_register_script( 'custom-contact-form', plugin_dir_url( __FILE__ ) . 'assets/contact-form.js', ['jquery'], '1.0.0', false );	
}

contact-form-head.php

<?php
/**
 * Plugin Name: Custom Form for Fun
 * Description: Fun learning about custom form in WordPress
 * Version: 1.0 
 * Author: Yerie Piscesa
 */

@ini_set( 'display_errors', 1 );
if ( ! defined( 'WPINC' ) ) {
	die;
}
require __DIR__ . '/vendor/autoload.php';

contact-form-shortcode.php

<?php // do not use php tag when inserting this snippet
function solusipress_contact_form( $in_shortcode=false ) {
	$the_nonce = 'custom-contact-form';
	if( !$in_shortcode ) {
       check_ajax_referer( $the_nonce, 'security' ); 
    }  	
    $path = plugin_dir_path( __FILE__ ) . 'views/contact-form.php';
	$form = new \Gregwar\Formidable\Form( $path );	
	if( !$in_shortcode ) {	
		$form->handle( function() use($form) {
			
			// process the input here, do some calculation, input data to database or just send mail.
			$to = get_bloginfo( 'admin_email' );
			$headers = [
				'From: ' . $form->contact_name . ' <' . $form->contact_email . '> ' . "\r\n"
			];
			
			wp_mail( $to, 
				'Message from Contact Form', 
				$form->contact_message, 
				$headers
			);
			$form->reset();
			
			$message = '
				<div class="submit-success">
					Thank you for contacting us! We will get in touch shortly. 
				</div>
			';
			$form->setPlaceholder( 'success_message', $message );
						
		}, function( $errors ) {
			$maps = [
				'contact_name' => 'Full Name',
				'contact_email' => 'Email Address',
				'contact_message' => 'Message'
			];
			echo '<ul class="error-fields">';
		    foreach ($errors as $error) {
		        $fld = $error->getField();
		        echo '<li>'. str_replace( $fld->getName(), $maps[ $fld->getName() ], $error->getMessage() ) . '</li>';
		    }
		    echo '</ul>';
		} );
		
		echo $form;
		
		wp_die();
	} else {
		return $form;
	}        	
}

function solusipress_contact_form_shortcode( $atts ) {
	wp_localize_script( 'custom-contact-form', 'spcf', [
		'ajaxurl' => admin_url( 'admin-ajax.php' ),
		'security' => wp_create_nonce( 'custom-contact-form' )
	] );
	wp_enqueue_style( 'custom-contact-form' );
	wp_enqueue_script( 'jquery-loading' );
	wp_enqueue_script( 'custom-contact-form' );
	return '<div id="form-container">'. solusipress_contact_form( true ) . '</div>';
}

add_action( 'wp_ajax_submit_contact_form', 'solusipress_contact_form' );
add_action( 'wp_ajax_nopriv_submit_contact_form', 'solusipress_contact_form' );
add_shortcode( 'sp_contact_form', 'solusipress_contact_form_shortcode' );

views-contact-form.php

<form id="frm-contact-form" method="post">
	
	{{success_message}}
	
	<div class="form-field">
		<label for="contact-name">Full Name</label>
		<input class="input" type="text" name="contact_name" id="contact-name" placeholder="First Last" required>
	</div>
	
	<div class="form-field">
		<label for="contact-email">Email Address</label>
		<input class="input" type="email" name="contact_email" id="contact-email" placeholder="yourname@domain.com" required>
	</div>
	
	<div class="form-field">
		<label for="contact-message">Message</label>
		<textarea cass="input" name="contact_message" id="contact-message" placeholder="Tulis pesan Anda disini" required></textarea>
	</div>
	
	<input type="hidden" name="action" value="submit_contact_form">
	<input type="hidden" name="security" value="<?php echo wp_create_nonce( 'custom-contact-form' ); ?>">
	<button type="submit" class="button">Send Now</button>
	
</form>