Skip to content

Instantly share code, notes, and snippets.

@yeriepiscesa
Last active June 9, 2021 08:26
Show Gist options
  • Save yeriepiscesa/7259cabdfa4703f2159dce815e493106 to your computer and use it in GitHub Desktop.
Save yeriepiscesa/7259cabdfa4703f2159dce815e493106 to your computer and use it in GitHub Desktop.
.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