Add custom form to theme

by

I’ve installed a fresh version of WordPress and using a child theme for development purposes so as to keep things tidy.

I’ve created a custom HTML form for donations that submits via Post method and gets processed by WePay.

The HTML form has some JavaScript to make sure only numbers are entered when the user chooses the “Other Amount” option.

The challenge now is that I’m stumped when it comes to implementing this solution into WordPress.

Where should the JavaScript go? (e.g. Some people say copy the header.php from the main theme, put it in the child theme directory and place the JavaScript in there)

Where should the PHP file go? (I had a hard time getting a path to it, and when I linked directly to it I got a 500 error)

1 Answer
1

There are few ways how to make you’r form visible on your site:

  • crate shortcode/widget with form
  • create page template

There are few ways how to process your form in php:

  • adding processing directly to php file of page template
  • adding processing in init/wp or any other action
  • adding processing in ajax actions

How i would do these:

  • create page template
  • insert form into it
  • enqueue scripts and styles for these page template only
  • point forms action attribute to <?php echo admin_url( 'admin-ajax.php' ); ?>
  • add hidden input with name="action" and value="my_form_action"
  • create ajax actions add_action( 'wp_ajax_my_form_action', 'my_form_function' ); and add_action( 'wp_ajax_nopriv_my_form_action', 'my_form_function' ); _nopriv is for not logged in users
  • create form processing function my_form_function

Example:
template-my-form.php

<?php
/* Template Name: My Form Template */
get_header();
// here goes form..
// you can copy index.php, rename it and insert your form
// where starts if( have_posts() )
?><form action="<?php echo admin_url( 'admin-ajax.php' ); ?>">...</form><?php
get_footer();

functions.php

add_action( 'wp_ajax_my_form_action', 'my_form_function' );
add_action( 'wp_ajax_nopriv_my_form_action', 'my_form_function' );
function my_form_function() {
    $form_element = sanitize_text_field( $_REQUEST['form_name'] );
    // here you do what you'r form should do
    // remember that you'r now in admin-ajax.php
    // so you need to redirect back to your page
    // check wp_referer_field and wp_nonce_field

    // if you want to make js ajax calls you should do wp_send_json_success( array );
}
add_action( 'wp_enqueue_scripts', 'my_form_scripts' );
function my_form_scripts() {
    if( is_page_template( 'template-my-form.php' ) ) {
        wp_enqueue_scripts('my_file', get_stylesheet_directory_uri() . '/js/my_script.js', array( 'jquery' ) );
    }
}

my_script.js

$(document).on( 'submit', 'form', function( event ) {
    var $ajax = $(this).find( 'input[name="ajax"]' );
    if( $ajax.length < 1 || parseInt( $ajax.val() ) < 1 )
        return;
    $.ajax( {
        action: $(this).attr( 'action' ),
        data: $(this).serialize(),
        success: function( res ) {
            if( res.success ) {
                // do on success form proccessing
                // res.data holds array passed to wp_send_json_success
            } else {
                // do on error form proccessing
                // res.data holds array passed to wp_send_json_error
            }
        }
    } );

} );

Leave a Comment