Kode dari tutorial https://solusipress.com/Custom-Form-untuk-Berbagai-Kebutuhan
.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; | |
} |
(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 ); |
<?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 ); | |
} |
<?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'; |
<?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' ); |
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment