Footer with Newsletter Subscription Form

[iamtakashi]

Screenshot:

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0px","padding":{"top":"7vw","bottom":"2rem"}}},"layout":{"inherit":true,"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:7vw;padding-bottom:2rem"><!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"48px","left":"48px"}}}} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"50%","fontSize":"14px"} -->
<div class="wp-block-column has-14-px-font-size" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"constrained","contentSize":"600px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:600">About the blog</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Masu is a blog that documents an individual's journey with regular quadrilateral images. Don't forget to follow me on:</p>
<!-- /wp:paragraph -->

<!-- wp:group {"style":{"spacing":{"blockGap":"1em"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><a href="#">Facebook</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><a href="#">Twitter</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size"><a href="#">Instagram</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%","fontSize":"14px"} -->
<div class="wp-block-column has-14-px-font-size" style="flex-basis:50%"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"constrained","contentSize":"600px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"small"} -->
<p class="has-small-font-size" style="font-style:normal;font-weight:600">Newsletter</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Subscribe to my email newsletter full of inspiring stories about my journey that continues.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/subscriptions {"buttonBackgroundColor":"primary","textColor":"background","fontSize":"14px","customFontSize":"14px","borderColor":"primary","padding":10,"spacing":10,"className":"is-style-split"} -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline is-style-split">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="14px" custom_border_radius="0" custom_border_weight="1" custom_padding="10" custom_spacing="10" submit_button_classes="has-14-px-font-size has-primary-border-color has-text-color has-background-color has-background has-primary-background-color" email_field_classes="has-14-px-font-size has-primary-border-color" show_only_email_and_button="true" success_message="Success! An email was just sent to confirm your subscription. Please find the email now and click &#039;Confirm Follow&#039; to start subscribing."]</div>
<!-- /wp:jetpack/subscriptions --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"3.5vw"}}}} -->
<div class="wp-block-group alignwide" style="margin-top:3.5vw"><!-- wp:paragraph {"className":"has-x-small-font-size","fontSize":"small"} -->
<p class="has-x-small-font-size has-small-font-size">Designed with <a href="https://wordpress.com" rel="nofollow">WordPress.com</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Preview: https://dotcompatterns.wordpress.com/?p=7485&preview=true

cc @alaczek @onuro

[onuro]

Nice one :) I have following inputs:

• I think the headings could use a bit higher size for better visual hierarchy.
• To me it's almost impossible to notice/differentiate the text social links from the content.
• A bit nitpicky thing, and please ignore if you thin unnecessary: The vertical space between social links and above text could be a bit higher.

[iamtakashi]

Thanks for the feedback @onuro.

I've added more weight to the headings, so they are bolder, but I kept it the same size as the paragraph because this is in a footer, and we usually make the heading larger, as you suggested.

The issue with the social links is a theme issue, really, but I've added the icons to make it clearer.

I've added a small extra top margin to the social links so that they line up with the placeholder text in the subscription block on the right.

What do you think?

[iamtakashi]

but I've added the icons to make it clearer.

I had second thoughts about showing the icons and the labels together. Might it be a bit too busy visually?

Which is better?

[iamtakashi]

Which is better?

I think I like the latter :) Wdyt?

[alaczek]

The icons only looks good to me!

[iamtakashi]

Published!