Blog

WordPress Contact Form 7: Creating a Subscribe Page & Setting Up Email

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 :

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>

Blog

WordPress Contact Form 7: Creating a Subscribe Page & Setting Up Email

Plugins :

CSS style sheet :

Contact Form 7 Shortcode:

Would you like to be notified about special offers and course updates?

Themes & Plugins

All-in-one

Let us design your e-commerce website!

Company details

Phone : +90 531 920 35 60

Quick Links

Our Services

My Account

Terms & Conditions