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

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.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *