Last active
February 5, 2022 08:59
-
-
Save humayunahmed8/ea3ef9baa5d3f72020a01a35489290bc to your computer and use it in GitHub Desktop.
Subscription Form Contact Form 7
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1. Install WordPress | |
2. Install Contact Form 7 | |
3. Bootstrap 4.7 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Output