👋 Hello friends!
🎥 Today, I’ll show you how to create an awesome Subscribe page using WordPress and Elementor—entirely with free plugins!
🛠️ What We’ll Learn in This Lesson:
✅ Contact Form Setup and Configuration: Step by step, you’ll learn how to create and configure a functional subscription form.
✅ Customizing the Design with Elementor: Discover how to personalize your page using the power of Elementor, making it truly yours.
✅ Setting Up Email with Fluent SMTP: Learn how to configure your form’s email settings using the Fluent SMTP plugin for fast and reliable delivery—ensuring you can instantly reach your new subscribers.
💡 Additional Resources:
To help you better understand the lesson, I’ve shared the CSS and shortcode snippets I used in the video description. This will give you extra tools to further customize your design!
👍 Don’t forget to subscribe to my channel and like the video—your support helps me keep creating content like this!
✨ Let’s not waste any more time—let’s dive in and design a stunning Subscribe page together! 🚀
Plugins :
- Contact Form 7
- Elementor
- Fluent SMTP
- Kadence Tema
CSS style sheet :
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
.subscription-form .wpcf7-spinner {
display:none !important;
}
/*--form kutusu--*/
.subscription-form .subscription-form-wrapper{
display:flex !important;
justify-content:center !important;
align-items:center !important;
margin-bottom: 0 !important;
gap:0px;
}
/*--form ana konteyneri--*/
.subscription-form #subscription-form-container{
display:flex !important;
flex-direction: row !important;
max-width:70vw !important;
width:100% !important;
gap:0px !important;
justify-content:center !important;
align-items: center !important;
}
/*--form arka plan, kenarlık ve içerik alanı oluşturma--*/
.subscription-form .wpcf7 {
border: 0px solid red !important;
padding: 0px !important;
background: transparent !important;
}
/*--form yer tutucu simgesi--*/
.subscription-form .wpcf7 input::placeholder{
font-family: 'Nunito', sans-serif !important;
font-size:14px !important;
color: #B6B8BA !important;
}
/*--Form giriş alanı--*/
.subscription-form .wpcf7 input[type="email"] {
width: 100% !important;
height:40px !important;
padding: 10px !important;
font-family: 'Nunito', sans-serif !important;
font-size:14px !important;
line-height:1.2 !important;
background-color: white !important;
color:black !important;
border: 0px solid red !important;
border-radius: 5px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
box-shadow: 0px 3px 5px 5px rgba(33, 33, 33, 0.01) !important;
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
margin:0 !important;
}
.subscription-form .wpcf7 input[type="submit"] {
display: block !important;
font-family: 'Nunito', sans-serif !important;
height: 40px !important;
text-align:center !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
background: #EC5B53 !important;
box-shadow: 0px 3px 5px 5px rgba(33, 33, 33, 0.01) !important;
padding: 5px 5px 5px 5px !important;
border: 0px solid red !important;
border-radius: 5px !important;
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
width: fit-content !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin:0 !important;
transition: all 0.4s ease 0s !important;
}
/*-Gönder düğmesi Vurgulu efekti-*/
.subscription-form .wpcf7 input:hover[type="submit"] {
background: #df2931 !important;
}
/* Highlight input currently in use */
.subscription-form .wpcf7 input[type="email"]:focus {
background-color: white !important;
border: 1px solid red !important;
}
/*Tablet cihazlar için küçültme*/
@media (min-width: 401px) and (max-width: 768px) {
.subscription-form .wpcf7 input[type="submit"], .subscription-form .wpcf7 input[type="email"], .subscription-form .wpcf7 input::placeholder{
font-size: 12px !important;
font-weight: 600 !important;
height:40px !important;
}
}
/*Büyük Mobil cihazlar için küçülme*/
@media (max-width: 400px) {
.subscription-form .wpcf7 input[type="submit"], .subscription-form .wpcf7 input[type="email"], .subscription-form .wpcf7 input::placeholder{
font-size: 12px !important;
font-weight: 600 !important;
height:40px !important;
}
.subscription-form .wpcf7 input::placeholder{
text-align:center;
}
/*--form main container--*/
.subscription-form #news-letter-container{
display:flex !important;
flex-direction: row !important;
max-width:70vw !important;
width:100% !important;
gap:0px !important;
justify-content:center !important;
align-items:center;
}
}
/*--Geçerli değil araç ipucu--*/
.subscription-form span.wpcf7-not-valid-tip{
text-shadow: none !important;
font-size: 12px !important;
color:#ff0000 !important;
background: transparent !important;
padding: 0px !important;
display:none !important;
}
/*--Geçersiz cevap--*/
.subscription-form div.wpcf7 form.invalid .wpcf7-response-output,
.subscription-form .wpcf7 form.unaccepted .wpcf7-response-output {
text-shadow: none !important;
border: 0px !important;
padding: 3px !important;
color: #D8000C !important;
text-align: left !important;
margin: 0 !important;
font-size: 12px !important;
background-color: #FFBABA !important;
/*display: none !important; -----Remove this line of code, If you want to display error message------*/
}
/*--Başarı Yanıtı--*/
.subscription-form div.wpcf7 form.sent .wpcf7-response-output {
text-align: left !important;
text-shadow: none !important;
padding: 3px !important;
border:0px !important;
font-size: 12px !important;
background: #DFF2BF !important;
border-color: #DFF2BF !important;
color: #4F8A10 !important;
margin: 0 !important;
}
</style>
📝 Contact Form 7 Shortcode: 📩🧩
<div class="subscription-form-wrapper">
<div id="subscription-form-container" class="email-submit">
<div class="column1">
[email* your-email placeholder "✉ Email"]
</div>
<div class="column2">
[submit "Abone Ol!"]
</div>
</div>
</div>
