25% off ProSNIPC25OFF

Newsletter CTA Box Shortcode

Shortcode [scseed_newsletter] that renders a stylised email signup form with configurable heading, subtext, and submit URL.

Module2 parts · by SnipCraft

PHPShortcode

php
<?php
if ( ! function_exists( 'scseed_nl_shortcode' ) ) {
    function scseed_nl_shortcode( $atts ) {
        $atts = shortcode_atts( array(
            'action'      => '#',
            'heading'     => 'Stay in the loop',
            'subheading'  => 'Get the latest news and offers straight to your inbox.',
            'placeholder' => 'Your email address',
            'button'      => 'Subscribe',
            'field_name'  => 'EMAIL',
        ), $atts, 'scseed_newsletter' );

        $action      = esc_url( $atts['action'] );
        $heading     = esc_html( $atts['heading'] );
        $subheading  = esc_html( $atts['subheading'] );
        $placeholder = esc_attr( $atts['placeholder'] );
        $button      = esc_html( $atts['button'] );
        $field_name  = esc_attr( $atts['field_name'] );

        ob_start(); ?>
<div class="scseed-nl-box">
  <h3 class="scseed-nl-heading"><?php echo $heading; ?></h3>
  <p class="scseed-nl-sub"><?php echo $subheading; ?></p>
  <form class="scseed-nl-form" action="<?php echo $action; ?>" method="post" target="_blank">
    <input type="email" name="<?php echo $field_name; ?>" placeholder="<?php echo $placeholder; ?>"
           required class="scseed-nl-input" />
    <button type="submit" class="scseed-nl-btn"><?php echo $button; ?></button>
  </form>
</div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'scseed_newsletter', 'scseed_nl_shortcode' );
}

CSSStyles

css
.scseed-nl-box {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
    color: #fff;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    max-width: 520px;
    margin: 24px auto;
    box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.scseed-nl-heading { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.scseed-nl-sub { margin: 0 0 20px; font-size: 15px; opacity: .85; }
.scseed-nl-form {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
}
.scseed-nl-input {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    color: #1a1a2e;
}
.scseed-nl-btn {
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
    white-space: nowrap;
}
.scseed-nl-btn:hover { background: #d97706; }
@media (max-width: 480px) { .scseed-nl-form { flex-direction: column; } }
#email#shortcode#cta#marketing#newsletter