Docs

[marketingwichita]

I would like to add a Newsletter form to the top of my header. It would be good if I could change the locations to where the header widgets go to the right side of the header to look much like the one in the attached image. Basicly it should look exactly the same. Thank you for your help!

[marketingwichita]

Sorry, The file was too big… Here it is…
the website domain is http://www.interstatefarmproducts.com

[Rue Nel]

Hello There,

Thanks for writing in! To be able to have a newsletter subscription form, please install Email Forms by going to X Addons > Extensions. To know more how you can properly set it up, please check out our knowledge base: https://community.theme.co/kb/extension-email-forms/

Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Add newsletter subscription form next to the logo
// =============================================================================
function add_custom_form(){ ?>
  
  <div class="custom-newsletter-form right pas">
    <?php echo do_shortcode('[x_subscribe form="123"]'); ?>
  </div>

<?php }
add_action('x_after_view_global__brand', 'add_custom_form');
// =============================================================================

Please make sure that you supply the correct email form shortcode. And then you also need to add the following css code in the customizer, Appearance > Customize > Custom > CSS

.custom-newsletter-form .x-subscribe-form {
    min-width: 550px;
}

.custom-newsletter-form .x-subscribe-form fieldset {
    float: left;
    width: 33%;
}

If you have other newsletter subscription form plugin and its shortcode, the css code is no longer needed.
Hope this helps. Kindly let us know.

[Author]

Posts