{"id":292,"date":"2017-02-19T04:19:41","date_gmt":"2017-02-19T04:19:41","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=292"},"modified":"2020-03-31T10:21:13","modified_gmt":"2020-03-31T10:21:13","slug":"mailchimp-signup","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/mailchimp-signup\/","title":{"rendered":"MailChimp Signup"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-bf1ca2723ebb53d8ca5b4e888bdf2e3a\">\n#top .av-special-heading.av-av_heading-bf1ca2723ebb53d8ca5b4e888bdf2e3a{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-bf1ca2723ebb53d8ca5b4e888bdf2e3a .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-bf1ca2723ebb53d8ca5b4e888bdf2e3a .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-bf1ca2723ebb53d8ca5b4e888bdf2e3a av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >MailChimp Integration<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-cc169w-1f9e94da0ce4506acdf87028d712fbab hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-c77b0k-f508199507388399ca0698cd319cb79a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-c1ev5o-236b3d996f09204018a71226a0e3e230 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The easiest email subscription setup. Enfold comes integrated with Mailchimp\u00a0subscription and it can be added to the page as a builder element or a widget.<\/p>\n<p>To activate the Mailchimp element, link your Mailchimp account from Enfold > Newsletter > Enter a valid Mailchimp API Key to use all newsletter related theme functions.<\/p>\n<p>Please note Mailchimp is a Newsletter Service, available for\u00a0<strong>free for the first 2000 Subscribers<\/strong>!<\/p>\n<\/div><\/section>\n<div  class='hr av-btqo98-9df2431d3daf88fb06a2f8cda1f141f2 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-bn0yv8-29fa306bc87fe64157ef620cd82854e0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>MailChimp Settings<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-bhj0bo-f574677f1383959468cf3ad6606bba7f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Mailchimp\u00a0settings allow you to make changes to the way the form appears and behaves as mentioned in the list below. However, to add more fields or edit form labels you have to update them in your\u00a0Mailchimp account.<\/p>\n<ul>\n<li>List Selection<\/li>\n<li>Edit Contact Form Elements<\/li>\n<li>Double opt-in?<\/li>\n<li>What should happen once the form gets sent?<\/li>\n<li>Message Sent label<\/li>\n<li>Form Color Scheme<\/li>\n<li>Hide Form Labels<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-b9tj4k-eb369792c789f5a2156fa4b93b89b383 hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-b8oj1o-df56fcb7d196f9bb35ac7dc5f7d9d2a3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>MailChimp Integration<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-ayvmkk-6e9c66b405218f30456551522a60a551 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><a href=\"http:\/\/www.kriesi.at\/archives\/enfold-version-3-4-newsletter-integration-new-headers-template-builder-improvements-new-demos-and-more\" target=\"_blank\" rel=\"noopener noreferrer\">Enfold 3.4<\/a>\u00a0introduced built-in MailChimp integration, in this tutorial you\u2019ll learn how to connect your MailChimp account with Enfold so you can have a newsletter box for your visitors to sign-up.<\/p>\n<h3>Finding and entering your API Key.<\/h3>\n<p>Assuming you already have your\u00a0<a href=\"http:\/\/mailchimp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">MailChimp<\/a>\u00a0account and Lists set-up, head over\u00a0<a href=\"https:\/\/admin.mailchimp.com\/account\/api\/\" target=\"_blank\" rel=\"noopener noreferrer\">API Keys<\/a>\u00a0and copy your API Key:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6088\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/apikeys.jpg\" alt=\"\" width=\"960\" height=\"370\" \/><\/p>\n<p>Then go to your site\u2019s\u00a0<em>Enfold Theme Options > Newsletter<\/em>\u00a0and paste the key in the field you\u2019ll find there, finally click the \u201cCheck API Key\u201d button to fetch your Lists:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6087\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/API.png\" alt=\"\" width=\"814\" height=\"287\" \/><br \/>\nIf everything went OK you should see something like this:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-6646\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/2018-04-12_212606-1-1030x653.jpg\" alt=\"\" width=\"1030\" height=\"653\" \/><\/p>\n<h3>MailChimp Newsletter Widget\/Element<\/h3>\n<p>Now to add MailChimp Sign up to your site you have a range of options depending on where and how you want to include it:<\/p>\n<ul>\n<li>As a <strong>Widget<\/strong>\u00a0(<em>Appearance > Widgets > Enfold Mailchimp Newsletter Signup<\/em>): minimal settings, ideal for a Sidebar newsletter box.<\/li>\n<li>As an <strong>ALB element<\/strong>\u00a0(<em>Content Elements > Mailchimp Signup<\/em>): more styling options, if you are already familiar with the Contact Form element you\u2019ll find this a piece of cake.<\/li>\n<li>As a <strong>Shortcode<\/strong>\u00a0(<em>Magic Wand tool > Mailchimp Signup<\/em>): this will generate a [shortcode] that can be used in conjunction with\u00a0<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/do_shortcode\/\" target=\"_blank\" rel=\"noopener noreferrer\">do_shortcode<\/a>\u00a0if you need to include it on a custom PHP template or hook.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-aslxkk-168818bf0a2d84bd9358772e22b5646a hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-amnq5g-cdd7f8412300deed6676b204a1f68b26 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-12  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-abcolo-9c87647527b04d3201f0bb7612e0cb10 hr-default  avia-builder-el-13  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-a8733g-f97b3a349540593208516fec7a838773 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode <\/h3>\n<\/div><\/section>\n\n<div  class='hr av-9epfyk-26481b9a9e9a41bfb8bd6e44ab732e47 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-950tt0-33b557fe062937f0a60a7c0c0a54f474 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-90it8s-0d9a484592ae5ee31b75528d1e60ca10 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-vqu78-2818a72412cf47f3fb1bcdcfd9ebb705 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Label<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-8q2f38-191b6b7ab257f89dc9d810936596aafd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the label color\u00a0or font style from the default style which is inherited from the theme options. Please use the CSS snippet:<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/mailchimp-signup\/\" method=\"post\"  data-av-custom-send='mailchimp_send'data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   avia-builder-el-16  avia-builder-el-no-sibling  mc-label  avia-mailchimp-form \" data-avia-form-id=\"1\" data-avia-redirect='' ><fieldset><p class='  first_form  form_element form_element_half' id='element_avia_0_1'><label for=\"avia_0_1\">Email Address <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_0_1\" class=\"text_input is_email\" type=\"text\" id=\"avia_0_1\" value=\"\" \/><\/p><p class=\"form_element  form_element form_element_half av-last-visible-form-element modified_width\"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form1\" \/><input type=\"submit\" value=\"Subscribe\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_avia_username_1\" class=\"hidden \" id=\"avia_avia_username_1\" value=\"\" \/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_1\" class=\"ajaxresponse ajaxresponse_1 hidden\"><\/div>\n<section  class='av_textblock_section av-82czbo-a2aa93d9393702adf0c50dc808afbddc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre> \/*----------------------------------------\n\/\/ CSS -  Newsletter label\n\/\/--------------------------------------*\/\n\n.avia_ajax_form.avia-mailchimp-form label {\n  color:#8e43e7;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-7vivr8-3912cb7e4e4473b8cff880901ecccfd1 hr-default  avia-builder-el-17  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7r97ck-173dbb8edaf92045b9d0a31122643b63 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add icons to newsletter labels<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7kde1w-3d515ed39e5864921a657e644e777060 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add icons to Mailchimp labels we make use of the pseudo elements:<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/mailchimp-signup\/\" method=\"post\"  data-av-custom-send='mailchimp_send'data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   mc-label-icons  avia-mailchimp-form \" data-avia-form-id=\"2\" data-avia-redirect='' ><fieldset><p class='  first_form  form_element form_element_half' id='element_avia_0_2'><label for=\"avia_0_2\">Email Address <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_0_2\" class=\"text_input is_email\" type=\"text\" id=\"avia_0_2\" value=\"\" \/><\/p><p class=\"form_element  form_element form_element_half av-last-visible-form-element modified_width\"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form2\" \/><input type=\"submit\" value=\"Subscribe\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_avia_username_2\" class=\"hidden \" id=\"avia_avia_username_2\" value=\"\" \/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_2\" class=\"ajaxresponse ajaxresponse_2 hidden\"><\/div>\n<section  class='av_textblock_section av-ort5w-759d07cff6b999ae26ec4f123eb67596 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS -  Newsletter Icons\n\/\/--------------------------------------*\/\n\n#top .avia_ajax_form.avia-mailchimp-form label{\n  padding-left: 20px;\n}\n#top .avia_ajax_form.avia-mailchimp-form label:nth-child(1)::before {\n  position: absolute;\n  left: 0px;\n  content:\"e805\";\n  font-family: 'entypo-fontello'; \n}\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-6n93zg-399cf12b0e41ee19f47b95b4dbda99d4 hr-default  avia-builder-el-19  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6kfslw-228cedf1278663ebc42db0bb10c02d6b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Input Field<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-mpnes-a80079fd5afff384e6a8e7ac499756d0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Form field color\u00a0is inherited\u00a0from the theme options settings. However, if you like adding custom styling please use the below CSS.<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/mailchimp-signup\/\" method=\"post\"  data-av-custom-send='mailchimp_send'data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   avia-builder-el-22  el_after_av_textblock  el_before_av_textblock  mc-input  avia-mailchimp-form \" data-avia-form-id=\"3\" data-avia-redirect='' ><fieldset><p class='  first_form  form_element form_element_half' id='element_avia_0_3'><label for=\"avia_0_3\">Email Address <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_0_3\" class=\"text_input is_email\" type=\"text\" id=\"avia_0_3\" value=\"\" \/><\/p><p class=\"form_element  form_element form_element_half av-last-visible-form-element modified_width\"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form3\" \/><input type=\"submit\" value=\"Subscribe\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_avia_username_3\" class=\"hidden \" id=\"avia_avia_username_3\" value=\"\" \/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_3\" class=\"ajaxresponse ajaxresponse_3 hidden\"><\/div>\n<section  class='av_textblock_section av-ki3zg-c83b0eb9d9b44021d3fcb3d0733f266f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS -  Newsletter Input fields\n\/\/--------------------------------------*\/\n\n#top .avia_ajax_form.avia-mailchimp-form input[type='text'] {\n  background: #c4dff6;\n  color: #00334e;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-5mbz7w-933388ad24aa5ab04662af665a7f1fa3 hr-default  avia-builder-el-24  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5c6kwc-c7ee81ed6d68de524e33418ab44585d3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Submit Button<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-55brv8-ab249d09b5b4e67a86448b337b62bae0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The text and width of the submit button can be edited from the Mailchimp element options. To add custom styles to the submit button please use the below CSS.<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/mailchimp-signup\/\" method=\"post\"  data-av-custom-send='mailchimp_send'data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   avia-builder-el-27  el_after_av_textblock  el_before_av_textblock  mc-submit  avia-mailchimp-form \" data-avia-form-id=\"4\" data-avia-redirect='' ><fieldset><p class='  first_form  form_element form_element_half' id='element_avia_0_4'><label for=\"avia_0_4\">Email Address <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_0_4\" class=\"text_input is_email\" type=\"text\" id=\"avia_0_4\" value=\"\" \/><\/p><p class=\"form_element  form_element form_element_half av-last-visible-form-element modified_width\"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form4\" \/><input type=\"submit\" value=\"Get Notified!\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_avia_username_4\" class=\"hidden \" id=\"avia_avia_username_4\" value=\"\" \/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_4\" class=\"ajaxresponse ajaxresponse_4 hidden\"><\/div>\n<section  class='av_textblock_section av-4mgbzo-8934ec229cfe7d33e47b282a468ecb85 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\n\/\/ CSS -  Newsletter Submit button\n\/\/--------------------------------------*\/\n\n#top .avia_ajax_form.avia-mailchimp-form input[type='submit'] {\n  background: #1769ff;\n  color: #fff200;\n  border: none;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-4eeams-8851ff53c6f4bd742201864f04a28fcd hr-default  avia-builder-el-29  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-46e238-9ea27c46806e25a2f147096cd823c70b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove placeholder text on-focus<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-43q6p8-e79cdb8b8556d691f63d5e5870dd71ca '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove placeholder text on focus:<\/p>\n<pre>[placeholder]:focus::-webkit-input-placeholder {\n  transition: opacity 0.15s 0.15s ease; \n  opacity: 0;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-3xgutg-1b1221867ee7f530705635e3dd6f3bf8 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-d68r8-8dab38b5c2d74be1f3ccfabea1564000 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove astrex from Mailchimp form field<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3jerok-a64870fec01b207ece812c964b23a638 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the asterisk from the newsletter form, add the below CSS to your quick CSS or to child theme styles.<\/p>\n<pre>\/*----------------------------------------\n\/\/ CSS -  Newsletter remove astrix\n\/\/--------------------------------------*\/\n\n#top .avia_ajax_form.avia-mailchimp-form .required{\n  display: none;\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-3ddsq4-4009694fe59e45f5db7d74603850d3b6 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-36vuno-f7a7f7d7fe388f2f5e42cf82002c2f27 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add mailchimp to all page\/post<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-34fwrg-fdad78e55cd842d21076f2f2f566a678 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add Mailchimp newsletter\u00a0box to all posts and pages after the content.<\/p>\n<ul>\n<li>Enable debug mode.<\/li>\n<li>Add Mailchimp\u00a0element on a blank page ( It will be easy to copy the shortcode).<\/li>\n<li>Select the newsletter list and style the form as required.<\/li>\n<li>Copy the shortcode and replace it with the shortcode on both the line that has &#8220;return $content&#8221; in the below code.<\/li>\n<li>Finally, add the modified code to your functions.php<\/li>\n<\/ul>\n<\/div><\/section>\n\n<div  class='hr av-2qunc4-4e59456f63261167145cabc333a6d333 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2k7fgc-69afa0c8abd53008f62d27976197e5b0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change confirmation message, error message color and font family.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2dio0k-aa9e61d5d207d70d2b6aaab9f5aba789 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To change the background and the text color of the success and error message please use the below CSS.<\/p>\n<pre>\/*----------------------------------------\n\/\/ CSS -  Newsletter Success message\n\/\/--------------------------------------*\/\n\n.avia-form-success.avia-mailchimp-success {\n  background:#2baf2b ;\n  color:#fff;\n}\n\n\/*----------------------------------------\n\/\/ CSS -  Newsletter Error message\n\/\/--------------------------------------*\/\n\n.avia-mailchimp-ajax-error.av-form-error-container {\n  background:#ee4f4f ;\n  color:#fff;\n}\n\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-264t10-c4c6abc9e018ec7c6c99337d35eb0859 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-20ly2s-02ffc7361e857e032f0d31a043d7a7e4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-1yfl38-cac2d99a5d426d082cb9d4eff97074e7 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1o95qc-a9e619a6519c02350bdda62e261ef305 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>MailChimp 4 WordPress Plugin Integration<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1n1s04-c284233ee843c24c199338208860d8bc '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In this tutorial, you\u2019ll learn how to integrate\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/mailchimp-for-wp\" target=\"_blank\" rel=\"noopener noreferrer\">MailChimp For WordPress<\/a>\u00a0plugin. I\u2019m assuming you already have a MailChimp List set-up and your\u00a0<a href=\"http:\/\/admin.mailchimp.com\/account\/api\" target=\"_blank\" rel=\"noopener noreferrer\">API Key<\/a>\u00a0inserted in the plugin options.<\/p>\n<h4>Creating a basic Form<\/h4>\n<p>Once you got the plugin installed and configured go to\u00a0<strong>MailChimp for WordPress > Forms<\/strong>\u00a0and replace the default Form markup with the following (modify according to your MailChimp List structure):<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-1awd38-c0556e0ab034542849da3000ed694b69 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Note:<\/strong>\u00a0make sure the\u00a0<em>Load form styles (CSS)?<\/em>\u00a0the setting is set to\u00a0<em>No<\/em>.<\/p>\n<h4>Form styling<\/h4>\n<p>In order to get the MailChimp form to inherit the Enfold form styles you\u2019ll need to add the following code to Quick CSS or child theme style.css (recommended):<\/p>\n<pre>.mc4wp-form form{margin:0!important;clear:both}\n.mc4wp-form p br{display:none}\n.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}\n.mc4wp-form p{position:relative;clear:both;float:left;width:100%}\n.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}\n.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}\n.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}\n.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}\n.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}\n.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}\n.mc4wp-form .first_form{clear:both;margin-left:0}\n@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }\n#top .mc4wp-form input[type='text'],#top .mc4wp-form input[type='email'],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}\n#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw\/eHBhY2tldCBiZWdpbj0i77u\/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI\/Pk5mU4QAAACUSURBVHjaYmRgYJD6\/\/\/\/MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA\/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}\n.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}\n.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}\n.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}\n<\/pre>\n<h4>Using the Form<\/h4>\n<p>Now wherever (Text Block, Widget, etc) you place the plugin shortcode\u00a0<code>[mc4wp_form]<\/code>\u00a0it will automatically pick up the Enfold form styles:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6158\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/fullwidth-form.jpg\" alt=\"\" width=\"767\" height=\"288\" \/><\/p>\n<h4>Playing with columns<\/h4>\n<p>If you want to make use of the Enfold form columns you\u2019ll need to modify the Form mark-up accordingly, for example for a one-line form (note the classes added to the paragraphs):<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-yz1uc-022f7824a9f02619c761f49939e82db6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Result:<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6159\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/oneline-form.jpg\" alt=\"\" width=\"765\" height=\"131\" \/><\/p>\n<h5>Using only placeholders<\/h5>\n<p>Remove the \u201cav-form-labels-visible\u201d class if you are planning to not use a placeholder for the form fields.<\/p>\n<h4><strong>Extra:<\/strong>\u00a0Opt-in box at the end of each Post<\/h4>\n<p>Add the following to your\u00a0theme\/child theme functions.php:<\/p>\n<\/div><\/section>\n<p><br \/>\nfunction add_mc_after_post_content() {<br \/>\nif (is_singular(&#8220;post&#8221;)){<br \/>\n?><\/p>\n<div class=\"av-sub-box\">\n<h5 class='av-sub-box-title'>Suscribe to our Blog<\/h5>\n<p><?php echo do_shortcode(\"[mc4wp_form]\"); ?>\n<\/div>\n<p><?php\n}\n}\nadd_action('ava_after_content', 'add_mc_after_post_content');\n[\/av_codeblock]\n\n[av_textblock size='' font_color='' color='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' av_uid='av-jq3hw' custom_class='' admin_preview_bg='']\nAnd the following to Quick CSS \/ style.css:\n\n\n<pre>\/* av-sub-box *\/\n.av-sub-box{ \n  padding: 20px; \n  background: #F4F4F4; \n  width:100%; \n  clear:both; \n  float:left; \n  margin-top: 80px; \n  border: 1px solid #e1e1e1;\n  margin-bottom: -40px; \n  border-radius: 3px;\n}\n<\/pre>\n<p><strong>Result:<\/strong><br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/opt-in-box.jpg\" alt=\"\" width=\"676\" height=\"297\" class=\"alignnone size-full wp-image-7267\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/opt-in-box.jpg 676w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/opt-in-box-300x132.jpg 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/opt-in-box-450x198.jpg 450w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><br \/>\n[\/av_textblock]<\/p>\n<div  class='hr av-d2en0-38505c6eac4fe8dfc4fc185b3a874988 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-a36as-e2372d7a115e7653eebc9659db4e4df5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7wTPTyUrVyc\">MailChimp Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-292","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=292"}],"version-history":[{"count":2,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/292\/revisions"}],"predecessor-version":[{"id":12862,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/292\/revisions\/12862"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}