Hi, In this article I am going to share how to install and configure Newsletter in WordPress Free.

Let’s Start

First You have to install Newsletter Plagin

Version 7.3.3 | By Stefano Lissa & The Newsletter Team | View details

Once Install the plugin you need to Activate it. Now you can see automatically newsletter page will create under the pages

Now we will customize our newsletter form so we need to go to our widgets section and create customHTML form drag into the footer widget

Our Custom HTML code. Simply copy and paste the below code

<div class="newsletter-box">
	<script type="text/javascript">
				if (typeof newsletter_check !== "function") {
				window.newsletter_check = function (f) {
					var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
					if (!re.test(f.elements["ne"].value)) {
						alert("The email is not correct");
						return false;
					}
					for (var i=1; i<20; i++) {
					if (f.elements["np" + i] && f.elements["np" + i].required && f.elements["np" + i].value == "") {
						alert("");
						return false;
					}
					}
					if (f.elements["ny"] && !f.elements["ny"].checked) {
						alert("You must accept the privacy statement");
						return false;
					}
					return true;
				}
				}
				</script>
<form method="post" class="news-form" action="/?na=s" onsubmit="return newsletter_check(this)">
					<input type="hidden" name="nr" value="page">
<input type="email"  name="ne" placeholder="Enter Email" required="" class="emailbox">
<button type="submit" class="sbtn">Subscribe</button>
</form>	
</div>	

Note: Do not change name property like name=”ne” action=” /?na=s” and script also.

Now copy and paste CSS in Additional CSS options

/*Start newsletter */
.sbtn{
	 height: 38px;
   background-color: #37b3b3;
   color: #fff;
   border-radius: 1px 16px 16px 0px;
}
.emailbox{
	  width:auto;
    height: 40px;
    margin: 18px 0 0 0;
    padding-left: 8px;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 50px;
}

/* End newsletter */

Once fill the email and press the subscribe button you will redirect to this page and you will get this massage.

Newsletter Dashboard

Note: if you are using ACF then your code should like below

Footer.php

  <div class="col-xl-3 col-sm-6">
        <div class="widget4">
			<? while (has_sub_field('footer_widget_3','option')){?>
          <h3><?the_sub_field('heading'); ?></h3>
          <div class="red-line"></div>
          <div class="newsletter">
			  <script type="text/javascript">
				//<![CDATA[
				if (typeof newsletter_check !== "function") {
				window.newsletter_check = function (f) {
					var re = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-]{1,})+\.)+([a-zA-Z0-9]{2,})+$/;
					if (!re.test(f.elements["ne"].value)) {
						alert("The email is not correct");
						return false;
					}
					for (var i=1; i<20; i++) {
					if (f.elements["np" + i] && f.elements["np" + i].required && f.elements["np" + i].value == "") {
						alert("");
						return false;
					}
					}
					if (f.elements["ny"] && !f.elements["ny"].checked) {
						alert("You must accept the privacy statement");
						return false;
					}
					return true;
				}
				}
				//]]&gt;
				</script>
			  	<form method="post" action="/?na=s" onsubmit="return newsletter_check(this)">
					<input type="hidden" name="nr" value="page">
            		<input type="email"  name="ne" placeholder=" <?the_sub_field('placeholder_text'); ?>" required="" class="input-field">
            		<button type="submit" class="btn btn-primary2"><?the_sub_field('submit_button_text'); ?></button>
			  	</form>
          </div>
        </div>
		  <?}?>
      </div>