Skip to content

Instantly share code, notes, and snippets.

@humayunahmed8
Last active February 5, 2022 08:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save humayunahmed8/ea3ef9baa5d3f72020a01a35489290bc to your computer and use it in GitHub Desktop.
Save humayunahmed8/ea3ef9baa5d3f72020a01a35489290bc to your computer and use it in GitHub Desktop.
Subscription Form Contact Form 7
<div class="row justify-content-center align-items-center">
<div class="col-xl-7 col-md-7">
<div class="newsletter-content">
<h5>Get notified of exclusive deals</h5>
[acceptance acceptance-566 default:on] I agree to subscribe to the Mydeals newsletter. See our <a href="https://example.com/privacy-policy">Privacy Policy</a> [/acceptance]
</div>
</div>
<div class="col-xl-5 col-md-5">
<div class="subscription-form">
[email* email placeholder "Enter email address"]
[submit "Subscribe"]
</div>
</div>
</div>
<footer class="site-footer">
<div class="footer-newsletter">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-11 col-md-12 col-sm-10">
<!-- Need to change shortcode id or title for new template -->
<?php echo do_shortcode('[contact-form-7 id="46" title="Subscription Form"]') ?>
</div>
</div>
</div>
</div>
</footer>
1. Install WordPress
2. Install Contact Form 7
3. Bootstrap 4.7
/* Footer Newsletter
----------------------*/
:root {
--primary-color : #F05328;
--secondary-color : #906694;
--text-color : #393939;
--text-color-soft : #999;
--btn-gradient-color : #e56842;
--btn-gradient-color-soft : #f18a45;
--btn-gradient-color-light : #e46742;
--color-black : #000;
--color-white : #fff;
--border-color : #dedede;
--border-color-soft : #f2f6ff;
--border-color-light : #f3f3f3;
}
.footer-newsletter {
padding: 25px 0;
/*Change Pattern Image here*/
background: var(--secondary-color) url(assets/img/pattern.svg);
background-size: contain;
position: relative;
z-index: 1;
}
.footer-newsletter:after {
position: absolute;
content: "";
z-index: -1;
height: 100%;
width: 100%;
background-color: var(--color-black);
left: 0;
top: 0;
opacity: 0.4;
}
.newsletter-content h5 {
color: var(--color-white);
font-size: 20px;
font-weight: 700;
}
.newsletter-content label {
margin: 0;
}
.newsletter-content .wpcf7-list-item-label,
.newsletter-content .wpcf7-list-item-label a {
color: var(--border-color);
}
.newsletter-content .wpcf7-list-item-label a {
text-decoration: underline;
}
.newsletter-content input[type="checkbox"] {
position: absolute;
top: 0;width: auto;
display: none;
cursor: pointer;
}
.newsletter-content input[type=checkbox]+.wpcf7-list-item-label::before {
content: "\2714";
border: 0.1em solid var(--border-color);
border-radius: 0.2em;
display: inline-block;
width: 15px;
height: 15px;
padding-left: 0.3em;
padding-bottom: 0px;
margin-right: 0.2em;
vertical-align: bottom;
color: transparent;
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
position: absolute;
top: 3px;
font-size: 10px;
left: 0;
line-height: 12px;
}
.newsletter-content input[type=checkbox]:checked+.wpcf7-list-item-label::before {
border-color: var(--btn-gradient-color-soft);
color: var(--color-white);
background: var(--btn-gradient-color-soft);
background: -o-linear-gradient(top,var(--btn-gradient-color-soft) 0%,var(--btn-gradient-color-light) 100%);
background: -webkit-gradient(linear,left top, left bottom,from(var(--btn-gradient-color-soft)),to(var(--btn-gradient-color-light)));
background: linear-gradient(to bottom,var(--btn-gradient-color-soft) 0%,var(--btn-gradient-color-light) 100%);
}
.newsletter-content input[type=checkbox]+.wpcf7-list-item-label {
display: block;
cursor: pointer;
display: -webkit-inline-box;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.newsletter-content .wpcf7-list-item-label {
padding-left: 25px;
}
/* Newsletter Form */
/* CF7 Reset */
.wpcf7-list-item {
position: relative;
margin: 0;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
margin: 0;
border-style: dashed;
}
.wpcf7-form-control-wrap {
position: static;
}
.wpcf7-not-valid-tip {
background-color: var(--color-white);
margin-top: 5px;
padding: 5px;
position: absolute;
width: 100%;
top: -50px;
padding: 5px 15px;
border-radius: 5px;
}
.subscription-form .wpcf7-spinner {
position: absolute;
right: 0;
top: -40px;
margin: 0;
}
.footer-newsletter .wpcf7 form .wpcf7-response-output {
color: var(--color-white);
margin-top: 10px;
}
.subscription-form {
position: relative;
height: 45px;
}
.subscription-form input[type="submit"] {
position: absolute;
right: 0;
top: 0;
right: 0;
top: 0;
height: 100%;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
width: 96px;
text-align: center;
color: var(--color-white)!important;
border: var(--btn-gradient-color);
background: var(--btn-gradient-color-soft);
background: -o-linear-gradient(top,var(--btn-gradient-color-soft) 0%,var(--btn-gradient-color-light) 100%);
background: -webkit-gradient(linear,left top, left bottom,from(var(--btn-gradient-color-soft)),to(var(--btn-gradient-color-light)));
background: linear-gradient(to bottom,var(--btn-gradient-color-soft) 0%,var(--btn-gradient-color-light) 100%);
}
.subscription-form input[type="email"], .subscription-form .wpcf7-form-control-wrap {
width: 100%;
}
.subscription-form input[type="email"] {
height: 45px;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 5px;
font-weight: 400;
padding-left: 15px;
font-size: 15px;
border: 0;
font-size: 15px;
padding-right: 110px;
}
@media screen and (max-width: 991px) {
.subscription-form {
margin-top: 15px;
}
}
@humayunahmed8
Copy link
Author

Screenshot_137
Output

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment