How to create a widget that has a submit form in the front end

3 Views

How to create a widget that has a submit form in the front end? The reason for this is I’m teaching myself plugin development and I’m struggling on how to display a form on the front end after adding the widget to the sidebar.

my code thus far

function widget ($args,$instance) {
    extract( $args );

    /* Our variables from the widget settings. */
    $title = apply_filters('widget_title', $instance['title'] );
    $name = $instance['name'];
    $number = $instance['number'];
    $message = $instance['message'];

    /* Before widget (defined by themes). */
    echo $before_widget;

    /* Display the widget title if one was input (before and after defined by themes). */
    if ( $title )
            echo $before_title . $title . $after_title;


    ?>
    <p>
                <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'hybrid'); ?></label>
                <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" />
        </p>

        <p>
                <label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'name'); ?></label>
                <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" />
        </p>

        <!-- Your Name: Text Input -->
        <p>
                <label for="<?php echo $this->get_field_id( 'number' ); ?>"><?php _e('Your Cellphone Number:', 'number'); ?></label>
                <input id="<?php echo $this->get_field_id( 'number' ); ?>" name="<?php echo $this->get_field_name( 'number' ); ?>" value="<?php echo $instance['number']; ?>"  />
        </p>

        <p>
                <label for="<?php echo $this->get_field_id( 'message' ); ?>"><?php _e('Your Message:', 'message'); ?></label>
                <textarea id="<?php echo $this->get_field_id( 'message' ); ?>" name="<?php echo $this->get_field_name( 'message' ); ?>"><?php echo $instance['message']; ?></textarea>
        </p>
    <?php

    /* After widget (defined by themes). */
    echo $after_widget;
 }
Post Views: 3

Related posts

Leave a Reply

2 comments

  1. I see three main ways to handle front-end form submissions in a widget:

    • A regular form that submits via POST and reloads the whole page. Easy to understand, easy to create, but not a nice user experience.
    • Load your widget in a iframe, so that a form submission only reloads the iframe. Some external providers do this (eg. Google Calendar), but it may be harder to style the widget.
    • Do the form submission via Ajax (with a regular form as a fallback?). This is probably the nicest option, but requires some work on your side. I once tried to give a high-level overview of Ajax in WordPress, maybe that is a good place to start.

    If you leave a comment on this answer which way you prefer, I could give you more details.

  2. That should make it: 

    <?php
/**
 * @Package:        ___
 * @Subpackage:     ___
 * @Author:         ___
 */

class WidgetExample extends WP_Widget {
    function init() {
        parent::WP_Widget( false, $name = 'Our Test Widget' );
    }

    function form( $instance ) {
        // outputs the options form on admin
    }

    function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
        return $new_instance;
    }

    function widget( $args, $instance ) {
        // outputs the content of the widget
        // ADD YOUR FRONT-END FORM HERE
    }
}
register_widget( 'WidgetExample' );