3

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;
 }

2 Answers 2

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.

4
  • Why "not a nice user experience"? All forms use POST/GET. Is reloading page after form submit outdated now? Jan 26, 2011 at 12:12
  • @One Trick Pony: I would not do this because it is a small form in the sidebar, not the main form of the site. In that case it could be confusing if you submitted and got the same page again, with only a small thing on the side that changed.
    – Jan Fabry
    Jan 26, 2011 at 12:20
  • I would definitely do it the Ajax way complete POST submits are horrible for the user. And I do not like Frames.
    – Elitmiar
    Jan 27, 2011 at 14:37
  • @Roland: I think I covered most of what you need to know about Ajax in my linked answer. If you need anything else you can always ask a new question!
    – Jan Fabry
    Jan 27, 2011 at 15:04
1

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' );
2
  • 1
    This is a basic structure for a classic widget with options in the admin area, but Roland wants to create a form in the front end, thus a form that visitors of his site can fill out.
    – Jan Fabry
    Jan 26, 2011 at 9:37
  • @Jan: Added a comment where to place the ajax-processing. Hope it's more clear what i meant now.
    – kaiser
    Jan 27, 2011 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.