How can I show the Jetpack Subscriptions form in a page?

2 Views

In the Jetpack plugin, the subscriptions module can be included in your blog by following these instructions:

To use the Subscriptions widget, go to Appearance → Widgets. Drag the
widget labeled “Blog Subscriptions (Jetpack)” into one of your
sidebars and configure away.

Read More

I am interested in including the subscriptions form on a Page within my site, in the main section of the page. Is there some sort of shortcode or other way that I can easily include the subscriptions form within my page content? Or to do this, would I need to define a new sidebar, put the subscriptions widget in the sidebar, and them make a custom template that includes this new sidebar within this page (quite a cumbersome exercise)?

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. Right Now jetpack provides only way to embed subscriptions as sidebar widget. Registering a new sidebar would be a better Idea to do so, and this will not take more than few seconds.

    Step 1 – Register a sidebar for jetpack

    Just drop in this code somewhere in your theme’s functions.php file. 

    register_sidebar( array(
    'name' => 'JetPack in page',
    'id' => 'jetpack-in-page',
    'before_widget' => '<div id="jetpack">',
    'after_widget' => '</div>',
    'before_title' => '<h3>',
    'after_title' => '</h3>'
) );

    Step 2 – Where you want the form to appear ?

    Now place the following code where you want the form. Anywhere in the theme, You can put this code just bellow the <?php the_content(); ?> So it will show just bellow your page / post content.

    <?php dynamic_sidebar( 'jetpack-in-page' ); ?>

    Step 3 – Your done !

    Now drag and drop the widget into JetPack in page sidebar and the form will be shown in the page. However the widget is specially made for sidebars so you might need to do some Styling to make it look nicer on full page.

    Reference – register_sidebar(); (WordPress Codex)

  3. Try the following: (Copy and paste code below in functions.php)

    // Get page url >> webcheatsheet.com/php/get_current_page_url.php
function itp_current_page_url() {
$page_url = 'http';
if( isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on" ) { $page_url .= "s" ;}
$page_url .= "://";
if( $_SERVER["SERVER_PORT"] != "80" ) {
    $page_url .=         $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
    $page_url .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}

return $page_url;
} // end itp_current_page_url

// Jetpack subscription form shortcode by http://www.itechplus.org
function itp_jetpack_subscription_form_shortcode( $atts, $content = '', $code = '' ) {
extract( shortcode_atts( array(
    'title' => 'Email Subscription',
    'desc' => 'Enter your email address to subscribe to this website and receive notifications of new articles by email.',
    'button' => 'Subscribe',
    'placeholder' => 'Email Address',
), $atts ) );

global $post;

// Build current page url
if( is_home() || is_front_page() ) {
    $url = home_url('/');
} elseif( is_singular() ) {
    $url = get_permalink($post->ID);
} else {
    $url = itp_current_page_url();
}

$jetpack_subscribe = '';

// Build jetpack subscription form
if( $title != '' ) {
    $jetpack_subscribe .= '<h3 class="widget-title">
        <label for="subscribe-field">' . $title . '</label>
    </h3>';
}
$jetpack_subscribe .= '<form id="subscribe-blog-blog_subscription-' . time() . '" accept-charset="' . get_bloginfo( 'charset' ) . '" method="post" action="">';
    if( $desc != '' ) {
        $jetpack_subscribe .= '<p>' . $desc . '</p>';
    }
    $jetpack_subscribe .= '<p>
        <input id="subscribe-field" class="input email" type="email" placeholder="'. $placeholder .'" onblur="if( this.value == '' ) { this.value = '' . $placeholder . ''; }" onclick="if ( this.value == '' . $placeholder . '' ) { this.value = ''; }" value="' . $placeholder . '" style="width: 95%; padding: 1px 2px" name="email" />
    </p>
    <p>
        <input type="hidden" value="subscribe" name="action" />
        <input type="hidden" value="' . $url . '" name="source" />
        <input type="hidden" value="widget" name="sub-type">
        <input type="hidden" value="blog_subscription-' . time() . '" name="redirect_fragment" />
        <input type="submit" class="input subbmit" name="jetpack_subscriptions_widget" value="' . $button . '" />
    </p>
</form>';

return $jetpack_subscribe;
}
add_shortcode( 'itp_email_subscription', 'itp_jetpack_subscription_form_shortcode' );

    With Jetpack installed and activated, apply shortcode on any page or in any text widget thus:

    [itp_email_subscription title="Some Title" desc="Some description here" placeholder="Placeholder" button="Button"]

    Done! Not tested though. let me know if there are any bugs. Happy coding 🙂