0

I have a big MailChimp subscribe form with options of subscribing to multiple/separate categories, returned by a shortcode function. The form and the shortcode are OK, but now I want the each form category option to make/return as a separate attribute, so to have the possibility to use this form shortcode in different places with different attributes/options. For example: in the Subscribe page I will display the full form with all options, but at the end of category pages or at the end of each single post I will display the form with an option to subscribe only to the category of that post.

I know how to make a shortcode function with attributes and there are many examples of how to do that, but I can't understand how to use attributes inside a form, that itself is returned as a variable. Any help?

P.S. Each category option have proper options, daily and weekly, but they are a part of the category option, so no need to make/return them as separate attributes/parameters.

An sample of my shortcode function:

// The shortcode function
function mailchimp_form_shortcode( $atts = [], $content = null ) {

    $mc_form='
    <div id="mc_embed_signup">
        <form action="xxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">
            <div id="mc_embed_signup_scroll">
                <div class="container">

                    <div class="mc-field-group">
                        <label for="mce-EMAIL">E-mail: <span class="asterisk"> (required)</span></label>
                        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="e-mail">
                    </div>

                    <!-- Subscribe options -->
                    <p class="subscribe-options"> - Category 1 <!-- Subscribe option 1 -->
                        <span>
                            <input type="checkbox" value="1234" name="group[1111][1234]" id="mce-group[1111]-1111-0"> daily<span class="asterisk">*</span>
                            <input type="checkbox" value="1235" name="group[1111][1235]" id="mce-group[1111]-1111-1"> weekly
                        </span>
                    </p>

                    <p class="subscribe-options"> - Category 2 <!-- Subscribe option 2 -->
                        <span>
                            <input type="checkbox" value="1236" name="group[1111][1236]" id="mce-group[1111]-1111-2"> daily<span class="asterisk">*</span>
                            <input type="checkbox" value="1237" name="group[1111][1237]" id="mce-group[1111]-1111-3"> weekly
                        </span>
                    </p>

                </div> <!-- .container -->

                <div id="mce-responses" class="clear">
                    <div class="response" id="mce-error-response" style="display:none"></div>
                    <div class="response" id="mce-success-response" style="display:none"></div>
                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="xxxxxxx" tabindex="-1" value=""></div>
                <div class="clear">
                    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
            </div>
        </form>
    </div>';

    return $mc_form;
}

add_shortcode('mailchimp', 'mailchimp_form_shortcode');
1

You can use shortcode attributes in the following way:

// The shortcode function
function mailchimp_form_shortcode( $atts = [], $content = null ) {

     $attributes = shortcode_atts( array(
        'option1' => 'no',
        'option2' => 'no',
    ), $atts );

    $mc_form = '
    <div id="mc_embed_signup">
        <form action="xxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">
            <div id="mc_embed_signup_scroll">
                <div class="container">

                    <div class="mc-field-group">
                        <label for="mce-EMAIL">E-mail: <span class="asterisk"> (required)</span></label>
                        <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="e-mail">
                    </div>';

        if( $attributes['option1'] === 'yes' ) {

            $mc_form .= '
                        <!-- Subscribe options -->
                        <p class="subscribe-options"> - Category 1 <!-- Subscribe option 1 -->
                            <span>
                                <input type="checkbox" value="1234" name="group[1111][1234]" id="mce-group[1111]-1111-0"> daily<span class="asterisk">*</span>
                                <input type="checkbox" value="1235" name="group[1111][1235]" id="mce-group[1111]-1111-1"> weekly
                            </span>
                        </p>';
        }

        if( $attributes['option2'] === 'yes' ) {

            $mc_form .= '
                        <p class="subscribe-options"> - Category 2 <!-- Subscribe option 2 -->
                            <span>
                                <input type="checkbox" value="1236" name="group[1111][1236]" id="mce-group[1111]-1111-2"> daily<span class="asterisk">*</span>
                                <input type="checkbox" value="1237" name="group[1111][1237]" id="mce-group[1111]-1111-3"> weekly
                            </span>
                        </p>';
        }

        $mc_form .= '
                </div> <!-- .container -->

                <div id="mce-responses" class="clear">
                    <div class="response" id="mce-error-response" style="display:none"></div>
                    <div class="response" id="mce-success-response" style="display:none"></div>
                </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="xxxxxxx" tabindex="-1" value=""></div>
                <div class="clear">
                    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
                </div>
            </div>
        </form>
    </div>';

    return $mc_form;
}

add_shortcode('mailchimp', 'mailchimp_form_shortcode');

Pay attention at .= notation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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