How to create horizontal optin form using Personal PRO Theme

Personal PRO theme is a Genesis Child Theme and you can buy it from here. So minimum requirement is Personal PRO Theme, Mailchimp and Genesis eNews Extended Plugin.

Step 1: Creating a list in Mailchimp account. This doc will give you the proper idea about it.

Step 2: Creating a Sign Up form. Follow this tutorials. You will choose classic form option. After completing the form settings you will get this kind of HTML code. See the screenshot:

signup-form-code

Step 3: Installing the Genesis eNews Extended Plugin. Navigate to Dashboard > Plugins > Add New page and enter this text “Genesis eNews Extended” in search field. Hit the “Enter” key and this plugin will come. Click on “install” button and activate it.

Step 4: Creating a Widget area for Horizontal Opt-in form. Add the following code in functions.php file:

genesis_register_sidebar( array(
	'id'          => 'optin-form',
	'name'        => __( 'Opt-in Form', 'personal' ),
	'description' => __( 'This is the horizontal optin form section will come below the header.', 'personal' ),
) );

Now placing this widget area after the Header bar. Add this code in your functions.php file

add_action( 'genesis_after_header', 'personal_hr_optin_form', 30 );
function personal_hr_optin_form() {  
  if( is_active_sidebar( 'optin-form' ) ){   
    genesis_widget_area( 'optin-form', array(
  		'before' => '<div class="optin-form widget-area" id="optin-form">',
  		'after'  => '</div>',
  	) );
  }  
}

Step 5: Placing the Genesis eNews Extended widget in “Opt-in Form” widget area and configuring the widget. Navigate to Dashboard > Appearance > Widgets and drag&drop the Genesis eNews Extended widget at “Opt-in Form” widget area.

optin-form-widget-area

See the settings:

Genesis eNews Extended Widget Setup
Genesis eNews Extended Widget Setup

Step 6: Styling the Optin form. Add the following css in style.css file

/* # Horizontal Optin Form
---------------------------------------------------------------------------------------------------- */
.optin-form{
  clear: both;
  background: #f9f9f9;
  border-bottom: 3px solid #d8d8d8;
  display: inline-block;
  padding: 10px 0 0;
  width: 100%;
}

.optin-form .enews-widget{
  max-width: 980px;
  margin: 0 auto;
}

.optin-form .enews-widget h4.widget-title,
.optin-form .enews-widget p{
  color: #333;
  display: inline-block;
  float: left;
  margin-bottom: 0;
  line-height: 2;
  width:51%;
}

.optin-form .enews-widget h4.widget-title{ margin-bottom: 10px;}
.optin-form .enews-widget .widget-title::after{ display: none; }

.optin-form #subscribe{
  display: inline-block;
  width: 49%;
}

.optin-form .enews-widget .enews input[type=email],
.optin-form .enews-widget .enews input[type=text] {
  border-color: #e3e3e3;
  float: left;
  font-size: 13px;
  margin-bottom: 0;
  margin-right: 3px;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 40%;
}

.optin-form .enews-widget .enews input[type=submit]{
  border-color: transparent;
  float: left;
  font-size: 13px;
  margin-bottom: 0;
  padding: 8px 15px;
  width: 17%;
}

@media only screen and (max-width: 979px) {

  .optin-form .enews-widget{ max-width: 800px; }

  .optin-form .enews-widget h4.widget-title, 
  .optin-form .enews-widget p,
  .optin-form #subscribe{
    display: table;
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 60%;
  }
  
  .optin-form #subscribe{
    padding: 8px 0 15px;
  }

}

@media only screen and (max-width: 767px) {
  .optin-form .enews-widget h4.widget-title, 
  .optin-form .enews-widget p,
  .optin-form #subscribe{
    display: table;
    margin: 0 auto;
    width: 85%;
  }
}

@media only screen and ( max-width: 430px ){

  .optin-form .enews-widget .enews input[type="email"], 
  .optin-form .enews-widget .enews input[type="text"],
  .optin-form .enews-widget .enews input[type="submit"] {
    margin-top: 10px;
    float: none;
    width: 100%
  }

}

Step 7: Calculating the margin top value. Open the personal-script.js file and replace the existing code:

var hd_h = $('.site-header').height();
  
  /*## Calculating Margin Top*/
  if( $(window).width() > 767 ){    
    $('.site-inner').css('margin-top', hd_h);
  }else{
    $('.site-inner').css('margin-top', 'auto');
  }
  
  $(window).resize(function(){
    if( $(window).width() > 767 ){
      var hd_h = $('.site-header').height();
      $('.site-inner').css('margin-top', hd_h);
    }else{
      $('.site-inner').css('margin-top', 'auto');
    }
  });

by

var hd_h = $('.site-header').height();
  
  /*## Calculating Margin Top*/
  if( $(window).width() > 767 ){    
    $('.optin-form').css('margin-top', hd_h);
  }else{
    $('.optin-form').css('margin-top', 'auto');
  }
  
  $(window).resize(function(){
    if( $(window).width() > 767 ){
      var hd_h = $('.site-header').height();
      $('.optin-form').css('margin-top', hd_h);
    }else{
      $('.optin-form').css('margin-top', 'auto');
    }
  });

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *