[Resolved] Customize Jetpack Subscription Form

Hi there,

do you have a site set-up with the Jetpack Subscription form set up? Personally never use Jetpack but we can look and see what CSS is required.

Can you edit your original topic and add it to the Site URL

Try this CSS:

#subscribe-email {
    margin-bottom: 0;
} 
#subscribe-email input, #subscribe-submit input[type=submit] {
    width: 100% !important;
}

I assume that Jetpack sub form has a shortcode?
If so use a Hook Element to add the shortcode to the before_footer hook and set the Display rules to Front Page. Here’s more info on that:

https://docs.generatepress.com/article/hooks-element-overview/

To make it easier to style add the Short code like so:

<div class="grid-container jetpack-footer">
    add shortcode here
</div>

Make sure to check the Execute Shortcode in the Hook.

Once there i can provide the CSS.

Looks good, so try this CSS:

.jetpack-footer {
    padding: 40px;
    box-sizing: border-box;
}
.jetpack-footer #subscribe-email input, .jetpack-footer #subscribe-submit input[type=submit] {
    width: 50% !important;
}
.jetpack-footer #subscribe-email input {
    float: left;
}

Did it work when in the Hook?

OK so for use in the Section, add this:

#sub-section #subscribe-email input, #sub-section #subscribe-submit input[type=submit] {
    width: 50% !important;
}
#sub-section #subscribe-email input {
    float: left;
}

And in that Sections Settings add sub-section to the Section ID field