[Resolved] Customize Jetpack Subscription Form

[Feri]

Hi there,

How to make Jetpack Subscription Form look like this? screenshot source: link blog

thank you

GP Premium 1.7.2

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

Yes, i have. Just update the detail.

My jetpack subsc at sidebar..

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

Done. Typo, sorry.

[David]

Try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

thank you, david. it works! perfect.

after that, i want to place jetpack subscription form on the front page with style like this screenshot source: http://www.theblogmarket.co

need your help

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

I assume that Jetpack sub form has a shortcode?

Yes. [jetpack_subscription_form]

<div class="grid-container jetpack-footer">
    [jetpack_subscription_form]
</div>

by the way, my front page is using static pages + section.

set the Display rules to Front Page…Make sure to check the Execute Shortcode in the Hook.

ok, done. it is correct?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

sorry david, i remove the hook and change with Section + shortcode and adding the css but the result is not different with sidebar form

[David]

Did it work when in the Hook?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

the result: https://prnt.sc/kxfax3

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Feri]

result https://prnt.sc/kxg238 the button is in the wrong position

[Author]

Posts