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