Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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;
 }
share|improve this question
add comment

2 Answers

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.

share|improve this answer
    
Why "not a nice user experience"? All forms use POST/GET. Is reloading page after form submit outdated now? –  onetrickpony Jan 26 '11 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 '11 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. –  Roland Jan 27 '11 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 '11 at 15:04
add comment

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' );
share|improve this answer
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 '11 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 '11 at 18:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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