{"id":283,"date":"2017-02-19T04:17:22","date_gmt":"2017-02-19T04:17:22","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=283"},"modified":"2022-01-21T15:24:06","modified_gmt":"2022-01-21T15:24:06","slug":"contact-form","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/contact-form\/","title":{"rendered":"Contact Form"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-av_heading-e4776dacbb06f9da92a514c307b28f0d\">\n#top .av-special-heading.av-av_heading-e4776dacbb06f9da92a514c307b28f0d{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-av_heading-e4776dacbb06f9da92a514c307b28f0d .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-av_heading-e4776dacbb06f9da92a514c307b28f0d .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-av_heading-e4776dacbb06f9da92a514c307b28f0d 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\"  >Contact Form<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-ju1vhf-f39eb3909642c3d1bf9d2f0607eb84fd 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-jn44qr-493793f68f4e329e97291917f836f4fe '   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-jegzcr-3b251cd2e21c3753f546834b17f684ae '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Contact forms are the easiest way to let your website visitors get in touch with you. The Enfold theme has a built-in contact form element and it can be used any number of times to add multiple forms to any post, page or widget with options to fully customize the form fields and style.<\/p>\n<p>View some of the <a href=\"http:\/\/www.kriesi.at\/themes\/enfold-2017\/elements\/contact-form\/\" target=\"_blank\" rel=\"noopener noreferrer\">contact form examples<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-j8cmhf-a8f14255d7a6667c9cf37a7c585da9a5 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-j5jozv-1580ddf402caba13e69e7d2e80456314 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Contact form setup<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-iz6f4z-cca4393074c4e9ece5f6faa15889f095 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To set up a contact form you will need a working e-mail address. Drag and drop the contact form element on to your page or post and click on it to open the form options and enter your e-mail address in the e-mail address field.<\/p>\n<p>Other options you can customize are:<\/p>\n<ul>\n<li>Form Title<\/li>\n<li>Add\/Edit form elements like input fields or text area. Clicking on the form element will further let you customize it to choose the width, type etc.<\/li>\n<li>Labels<\/li>\n<li>E-mail Subject<\/li>\n<li>Autorespond Text<\/li>\n<li>Captcha<\/li>\n<li>Alignment<\/li>\n<li>Color Scheme<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-itn4r7-42bdd963acb35cef8ea0812b7c4813c6 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-ilwou3-db2d52853d776828e735e269f36ff6d3 '   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-9  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-i86qff-42ee86e9d79d343573bfc056a6de5752 hr-default  avia-builder-el-10  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-i2n58r-83d653fc82edd46d624de077b050770f '   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-1osdur-4d754db37a7e7827a710eab26f2b393d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gqzwsb-baf12b870dbf1adc1028f14aa491a511 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-glm5h7-01796880ccc0ec665bd94fe29619caea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>NOTE:\u00a0<\/strong>Contact Form and the Mailchimp Newsletter Form share a common class name. This will result in changes being applied to both the elements form fields, which is perfectly fine if you like the fields to look consistent.<\/p>\n<p>If you intend to not apply the same styles to the newsletter element, we recommend enabling and adding the custom CSS class name to contact form element in the backend and use the custom class with the custom code provided below.<\/p>\n<\/div><\/section>\n<div  class='hr av-gfpok3-61cdcf120f4357c0e07b6dd128829848 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-77da036830cf4efe591fc62abda8f404 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Contact form color<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1lzioj-996174a164f259630256faf41e53301a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the form field colors are inherited from the theme .\u00a0You can also select Light or Dark transparent form style. To change the form field color\u00a0to custom color please use the below CSS. Feel free to add your own CSS properties to make any additional changes \ud83d\ude42<\/p>\n<p>The below contact form element has a custom class name &#8220;<strong>av-contact-form-color<\/strong>&#8221; assigned.<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/contact-form\/\" method=\"post\" data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   avia-builder-el-13  avia-builder-el-no-sibling  av-contact-form-color  \" data-avia-form-id=\"1\" data-avia-redirect='' ><h3 class=''>Send us mail<\/h3><fieldset><p class='  first_form  form_element form_fullwidth' id='element_avia_1_1'><label for=\"avia_1_1\">Name <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_1_1\" class=\"text_input is_empty\" type=\"text\" id=\"avia_1_1\" value=\"\" \/><\/p><p class='  first_form  form_element form_fullwidth' id='element_avia_2_1'><label for=\"avia_2_1\" class=\"textare_label hidden textare_label_avia_2_1\">Message <abbr class=\"required\" title=\"required\">*<\/abbr><\/label><textarea  name=\"avia_2_1\" class=\"text_area is_empty\" cols=\"40\" rows=\"7\" id=\"avia_2_1\" ><\/textarea><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_3_1\" class=\"hidden \" id=\"avia_3_1\" value=\"\" \/><\/p><p class='   form_element form_fullwidth' id='element_avia_4_1'><span class='value_verifier_label'>1 + 1 = ?<\/span><input name=\"avia_4_1_verifier\" type=\"hidden\" id=\"avia_4_1_verifier\" value=\"747125574\"\/><label for=\"avia_4_1\">Please prove that you are human by solving the equation <abbr class=\"required\" title=\"required\">*<\/abbr><\/label><input name=\"avia_4_1\" class=\"text_input captcha\" type=\"text\" id=\"avia_4_1\" value=\"\"\/><\/p><p class=\"form_element \"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form1\" \/><input type=\"submit\" value=\"Submit\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_1\" class=\"ajaxresponse ajaxresponse_1 hidden\"><\/div>\n<section  class='av_textblock_section av-fh0wjf-afa142604aa407271023ff0f47b76396 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-fby3ir-63d4631e70d75e7fe524d31a0ae796e8 toggle_close_all' >\n<section class='av_toggle_section av-f4e1jf-6e8d7fe225cff1352898af86845fda8f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-dx3kln-baeb7eda512d7be4e584cfebb182da9b'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-2' data-fake-id='#toggle-id-2' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-2' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-2' aria-labelledby='toggle-toggle-id-2' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code><\/code><\/p>\n<p><code><code><\/code><\/code><\/p>\n<pre>\/*----------------------------------------\n----------------------------------------\n----------------------------------------\n\/\/ CSS -  Contact form color\n----------------------------------------\n----------------------------------------\n\/\/--------------------------------------*\/\n\n\/* custom style form fields *\/\n#top .av-contact-form-color .input-text,\n#top .av-contact-form-color input[type='text'],\n#top .av-contact-form-color input[type='input'],\n#top .av-contact-form-color input[type='password'],\n#top .av-contact-form-color input[type='email'],\n#top .av-contact-form-color input[type='number'],\n#top .av-contact-form-color input[type='url'],\n#top .av-contact-form-color input[type='tel'],\n#top .av-contact-form-color input[type='search'],\n#top .av-contact-form-color textarea,\n#top .av-contact-form-color select {\n\/* Text color *\/\ncolor:#333;\n\/* Background color *\/\nbackground-color: #fffae8 !important;\n\/* Border color*\/\nborder-color: #b0a696 !important;\n}\n\n<\/pre>\n<p><code><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-dra25v-9fe3df2553ea15bf99a35a6c8ffe1f9a hr-default  avia-builder-el-14  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-dowcij-c3585b2eda53b5ba1eb67d2fe7beb8e2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling contact form title<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-dezgir-db9915ee1ee93d686122e1a9e7725205 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The contact form title text can be updated from\u00a0the pop-up options and it&#8217;s style get&#8217;s inherited from the styles set up in the theme options.<\/p>\n<p>In case you need to custom style the form title start by adding a custom CSS class name &#8220;av-contact-form-title&#8221; to the form element and use the below CSS snippet:<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/contact-form\/\" method=\"post\" data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   av-contact-form-title  \" data-avia-form-id=\"2\" data-avia-redirect='' ><h3 class=''>Send us mail<\/h3><fieldset><p class='  first_form  form_element form_fullwidth' id='element_avia_1_2'><label for=\"avia_1_2\">Name <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_1_2\" class=\"text_input is_empty\" type=\"text\" id=\"avia_1_2\" value=\"\" \/><\/p><p class='  first_form  form_element form_fullwidth' id='element_avia_2_2'><label for=\"avia_2_2\" class=\"textare_label hidden textare_label_avia_2_2\">Message<\/label><textarea  name=\"avia_2_2\" class=\"text_area \" cols=\"40\" rows=\"7\" id=\"avia_2_2\" ><\/textarea><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_3_2\" class=\"hidden \" id=\"avia_3_2\" value=\"\" \/><\/p><p class='   form_element form_fullwidth' id='element_avia_4_2'><span class='value_verifier_label'>1 + 5 = ?<\/span><input name=\"avia_4_2_verifier\" type=\"hidden\" id=\"avia_4_2_verifier\" value=\"566761742\"\/><label for=\"avia_4_2\">Please prove that you are human by solving the equation <abbr class=\"required\" title=\"required\">*<\/abbr><\/label><input name=\"avia_4_2\" class=\"text_input captcha\" type=\"text\" id=\"avia_4_2\" value=\"\"\/><\/p><p class=\"form_element \"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form2\" \/><input type=\"submit\" value=\"Submit\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_2\" class=\"ajaxresponse ajaxresponse_2 hidden\"><\/div>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-8c808fce4b7d731d14416f3748642f31 toggle_close_all' >\n<section class='av_toggle_section av-ci6u7f-68971209ce5963471512eee9e866bcd9'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-3' data-fake-id='#toggle-id-3' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-3' data-slide-speed=\"200\" data-title=\"Shortcode\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Shortcode\" data-aria_expanded=\"Click to collapse: Shortcode\">Shortcode<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-3' aria-labelledby='toggle-toggle-id-3' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-bag1az-eb94150a59fa7f65393614c1154c2b1e'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-4' data-fake-id='#toggle-id-4' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-4' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-4' aria-labelledby='toggle-toggle-id-4' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS -  Contact form title<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p><code><br \/>\n<\/code><\/p>\n<p><code>.av-contact-form-title fieldset h3 {<br \/>\nfont-size: 24px;<br \/>\ntext-transform: uppercase;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-b5msf7-a70cac5e1293bfdb5641e9fad9a26153 hr-default  avia-builder-el-17  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-b22qur-67d2a3befd941344473e0284232f5ed0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add icons to contact form label<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-atuwe3-c89292e047c43f49541f503e15973cbe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add icons to contact form label. First, enable the custom CSS class name support and add a custom class &#8220;<strong>cf-label-icons<\/strong>&#8221; to the contact form and use the below CSS code.<\/p>\n<\/div><\/section>\n<form action=\"https:\/\/kriesi.at\/documentation\/enfold\/contact-form\/\" method=\"post\" data-fields-with-error=\"Found errors in the following field(s):\" class=\"avia_ajax_form av-form-labels-visible   avia-builder-el-20  el_after_av_textblock  el_before_av_textblock  cf-label-icons  \" data-avia-form-id=\"3\" data-avia-redirect='' ><h3 class=''>Send us mail<\/h3><fieldset><p class='  first_form  form_element form_element_half' id='element_avia_1_3'><label for=\"avia_1_3\">Name <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_1_3\" class=\"text_input is_empty\" type=\"text\" id=\"avia_1_3\" value=\"\" \/><\/p><p class='  form_element form_element_half' id='element_avia_2_3'><label for=\"avia_2_3\">E-Mail <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_2_3\" class=\"text_input is_email\" type=\"text\" id=\"avia_2_3\" value=\"\" \/><\/p><p class='  first_form  form_element form_fullwidth' id='element_avia_3_3'><label for=\"avia_3_3\">Subject <abbr class=\"required\" title=\"required\">*<\/abbr><\/label> <input name=\"avia_3_3\" class=\"text_input is_empty\" type=\"text\" id=\"avia_3_3\" value=\"\" \/><\/p><p class='  first_form  form_element form_fullwidth' id='element_avia_4_3'><label for=\"avia_4_3\" class=\"textare_label hidden textare_label_avia_4_3\">Message <abbr class=\"required\" title=\"required\">*<\/abbr><\/label><textarea  name=\"avia_4_3\" class=\"text_area is_empty\" cols=\"40\" rows=\"7\" id=\"avia_4_3\" ><\/textarea><\/p><p class=\"hidden\"><input type=\"text\" name=\"avia_5_3\" class=\"hidden \" id=\"avia_5_3\" value=\"\" \/><\/p><p class='   form_element form_fullwidth' id='element_avia_6_3'><span class='value_verifier_label'>0 + 2 = ?<\/span><input name=\"avia_6_3_verifier\" type=\"hidden\" id=\"avia_6_3_verifier\" value=\"262274342\"\/><label for=\"avia_6_3\">Please prove that you are human by solving the equation <abbr class=\"required\" title=\"required\">*<\/abbr><\/label><input name=\"avia_6_3\" class=\"text_input captcha\" type=\"text\" id=\"avia_6_3\" value=\"\"\/><\/p><p class=\"form_element \"><input type=\"hidden\" value=\"1\" name=\"avia_generated_form3\" \/><input type=\"submit\" value=\"Submit\" class=\"button\"  data-sending-label=\"Sending\"\/><\/p><\/fieldset><\/form><div id=\"ajaxresponse_3\" class=\"ajaxresponse ajaxresponse_3 hidden\"><\/div>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-9s160j-66e295cdb1f69e16fd08ac91cd892b60 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>We make use of the pseudo elements to target the form labels and add icons::<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-f898c6f877a7acda1880a303d559d978  avia-builder-el-22  el_after_av_textblock  el_before_av_hr  toggle_close_all' >\n<section class='av_toggle_section av-b9ahv-95eb687b7448da5b4470f374f9c13d60'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-5' data-fake-id='#toggle-id-5' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-5' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-5' aria-labelledby='toggle-toggle-id-5' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS -  Contact form label icons<br \/>\n\/\/--------------------------------------*\/<br \/>\n#top .avia_ajax_form.cf-label-icons label{<br \/>\n\tpadding-left: 20px;<br \/>\n}<br \/>\n#top .avia_ajax_form.cf-label-icons label::before {<br \/>\n\tposition: absolute;<br \/>\n\tleft:0;<br \/>\n\tfont-family: 'entypo-fontello';<br \/>\n}<br \/>\n#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(2) label:before{<br \/>\n\tcontent:\"e80a\";<br \/>\n}<br \/>\n#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(3) label:before{<br \/>\n\tcontent:\"e805\";<br \/>\n}<br \/>\n#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(4) label:before{<br \/>\n\tcontent:\"e826\";<br \/>\n}<br \/>\n#top .avia_ajax_form.cf-label-icons fieldset p:nth-child(5) label:before{<br \/>\n\tcontent:\"e83b\";<br \/>\n}<br \/>\n\/* Input field do not support pseudo elements so we target the last p in the fieldset which is usually the submit button *\/<br \/>\n#top .avia_ajax_form.cf-label-icons fieldset p:last-child:before{<br \/>\n\tcontent:\"e844\";<br \/>\n\tcolor:#FFF;<br \/>\n\tfont-family: 'entypo-fontello';<br \/>\n\tposition: absolute;<br \/>\n\tleft: 20px;<br \/>\n\ttop: 50%;<br \/>\n\ttransform: translateY(-50%);<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-9pkyuz-f36d2e09dd4ae3aed6e7b6be2a32c3bc hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-xzvmr-b71a6f03fb3db9f976b2e00fdd3bcb21 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling contact form labels<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-xg7ar-4e415a264d7b0f1cd713b578796ed668 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Form field labels inherit the styles from the theme options. However, you can customize the style of the labels using CSS:<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-f898c6f877a7acda1880a303d559d978 toggle_close_all' >\n<section class='av_toggle_section av-13th5n-4e446d945a1748ebda3d8aa0574a45a2'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-6' data-fake-id='#toggle-id-6' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-6' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-6' aria-labelledby='toggle-toggle-id-6' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS -  Contact form Lable<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>.avia_ajax_form label {<br \/>\n\tcolor:#00a8e0;<br \/>\n}<\/p>\n<p>\/* Required field (Styling the asterisk ) *\/<br \/>\n.avia_ajax_form label .required {<br \/>\n\tcolor:red;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-990cgr-098ad44c11b8cc36a9f6f329619fc7ac hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8y933v-7e1af98e7510ac4025c5b2a5b9e5666b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling Placeholder text<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-8u5ilv-3c577867d2398e573b2263e38909f982 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The code below will clear the placeholder text &#8220;onfocus&#8221; and also change the placeholder font style.<\/p>\n<p>NOTE: This code will change the placeholder text sitewide.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-dc96179c6f36d267b48b24d0d414dbd1 toggle_close_all' >\n<section class='av_toggle_section av-neper-1eb42b03a591741d8d05f978db57234c'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-7' data-fake-id='#toggle-id-7' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-7' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-7' aria-labelledby='toggle-toggle-id-7' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS - Placeholder text<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>\/* Place holder text color *\/<\/p>\n<p>::-webkit-input-placeholder {<br \/>\ncolor: #bbb!important;<br \/>\n}<br \/>\n::-moz-placeholder {<br \/>\ncolor: #bbb!important;<br \/>\n}<br \/>\n::-moz-placeholder {<br \/>\ncolor: #bbb!important;<br \/>\n}<br \/>\n::-ms-input-placeholder {<br \/>\ncolor: #bbb!important;<br \/>\n}<\/p>\n<p>\/* Clear placeholder text on focus*\/<\/p>\n<p>[placeholder]:focus::-webkit-input-placeholder {<br \/>\ntransition: opacity 0.15s 0.15s ease;<br \/>\n     opacity: 0;<br \/>\n}<br \/>\n<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-8o7b6r-1897c44c569cf24f7455eeb29d9ac9fb hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8hnhzn-f12146c3958360d8b89452b3c940649a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling the dropdown list<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-8hnhzn-f12146c3958360d8b89452b3c940649a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The below CSS selector can be used to modify the default style of the dropdown list.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-dc96179c6f36d267b48b24d0d414dbd1 toggle_close_all' >\n<section class='av_toggle_section av-1b9lv-1275dbdcbda7641a48f3759668af9173'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-8' data-fake-id='#toggle-id-8' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-8' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-8' aria-labelledby='toggle-toggle-id-8' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS - Dropdown list<br \/>\n\/\/--------------------------------------*\/<\/code><\/p>\n<p><code><\/code><\/p>\n<p>\/* Drop down list *\/<br \/>\n#top .main_color select {<br \/>\ntext-align-last: center;<br \/>\ntext-align: center;<br \/>\n-ms-text-align-last: center;<br \/>\n-moz-text-align-last: center;<br \/>\n}<\/p>\n<p><code><br \/>\n<\/code><\/p>\n<p><code><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-8o7b6r-1897c44c569cf24f7455eeb29d9ac9fb hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8hnhzn-a30e24ab75d2d998d4747b5897458fd7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling submit button <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-8f4iiz-968727cb583e2cb1cb77f6b5256090e2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Styling the form submit button:<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-f898c6f877a7acda1880a303d559d978 toggle_close_all' >\n<section class='av_toggle_section av-qcvxv-f88dd18d2f2a04a6bd816ab5ad94a58a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-9' data-fake-id='#toggle-id-9' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-9' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-9' aria-labelledby='toggle-toggle-id-9' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>*----------------------------------------<br \/>\n\/\/ CSS -  Contact form submit button<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>#top .avia_ajax_form input[type='submit'] {<br \/>\n\tborder: none;<br \/>\n    background: #eb5424;<br \/>\n    color: #f6f6f5;<br \/>\n}<br \/>\n#top .avia_ajax_form input[type='submit']:hover {<br \/>\n    background: #000000;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2xacb-085019a94f7d940fcdfc679cde90f47a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7yfo4j-bdeeb15236e9724f9515042948c51dea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling captcha text<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7yfo4j-bdeeb15236e9724f9515042948c51dea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Use the below text to style the captcha text<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-dc96179c6f36d267b48b24d0d414dbd1 toggle_close_all' >\n<section class='av_toggle_section av-7vbaj-788711fb5c3592e8de09fa4130d43fa0'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-10' data-fake-id='#toggle-id-10' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-10' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-10' aria-labelledby='toggle-toggle-id-10' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>*----------------------------------------<br \/>\n\/\/ CSS -  Center align captcha text<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>span.value_verifier_label {<br \/>\n\t\tleft: 50%;<br \/>\n\t\ttransform: translateX(-100%);<br \/>\n }<\/p>\n<p><\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-2xacb-085019a94f7d940fcdfc679cde90f47a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7yfo4j-5a4357cb7475f17c00ba4ee1a870379d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling validation error<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7tgdnf-76dfb3ed8259085c35c29df17b3c45d9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The form validates all fields when the submit button is clicked. Sometimes if the user leaves a\u00a0required field empty or a enters a wrong input, the form fields will have a red border. In case you like to highlight this in a different way you can use some custom CSS:<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-f898c6f877a7acda1880a303d559d978 toggle_close_all' >\n<section class='av_toggle_section av-kybb7-b9be7dce2da2411dd4ba88f7f85d8a58'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-11' data-fake-id='#toggle-id-11' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-11' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-11' aria-labelledby='toggle-toggle-id-11' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS - Form validation error indicator<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>#top .avia_ajax_form .error  input[type='text'],<br \/>\n#top .avia_ajax_form .error .text_area {<br \/>\n\tbackground: red!important;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-rllib-15cebfa226b0f77b48ec6eb692233abb hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7lrsuz-4a3d9eb9c493034e8c1ab94e838805a0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling conformation message<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7eaol7-4a41b3c83645cbdf184e7db4c5510cfa '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>After the email is successfully sent the confirmation message can be styled using the below CSS:<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-f898c6f877a7acda1880a303d559d978 toggle_close_all' >\n<section class='av_toggle_section av-h8s7n-29701e41ff4be93f4f9d869caddd2fe7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-12' data-fake-id='#toggle-id-12' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-12' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-12' aria-labelledby='toggle-toggle-id-12' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS - Form success message<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>#top .avia-form-success {<br \/>\n\tbackground: gold;<br \/>\n\tcolor:#FFF;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-78d203-52de2d85f2d81aec3255a7d2c54bc2c6 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-73p8c3-b0b04085ee7efb50dda2836a0584d603 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling contact form 7 to look like Enfold form<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-6t1fz7-f3f823c1e715b0f058539560f35860d5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you are using a plugin like &#8220;Contact form 7&#8221; and would like to make it look similar to Enfold form to maintain design consistency. Please use the below CSS:<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-cvvqsz-399f47d305679228e4877cabee3ad37f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippet<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-cn1oyj-f898c6f877a7acda1880a303d559d978 toggle_close_all' >\n<section class='av_toggle_section av-91dyb-b8cf0130a4e95695353441d1d28ca6e7'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-13' data-fake-id='#toggle-id-13' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-13' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-13' aria-labelledby='toggle-toggle-id-13' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p><code>\/*----------------------------------------<br \/>\n\/\/ CSS -  Styling contact form 7<br \/>\n\/\/--------------------------------------*\/<\/p>\n<p>\/* Textarea email and input fields *\/<br \/>\n#top .wpcf7-form input[type='text'],<br \/>\n#top .wpcf7-form input[type='email'],<br \/>\n#top .wpcf7-form .wpcf7-textarea {<br \/>\n\t\/*border-color: #d0d2d3;*\/<br \/>\n    \/*background: #dbebfa;*\/<br \/>\n    \/*color: #00334e;*\/<br \/>\n    font-family: \"HelveticaNeue\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;<br \/>\n    font-size: 17px;<br \/>\n    line-height: 1em;<br \/>\n    padding: 13px!important;<br \/>\n    border-radius: 2px;<br \/>\n}<\/p>\n<p>\/* Submit button *\/<br \/>\n#top .wpcf7-form .wpcf7-submit {<br \/>\n\tpadding: 15px 30px;<br \/>\n\tborder-radius: 2px;<br \/>\n}<\/code><\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-6blwxf-bf88b0c63ec9d5986ae60dcda07a2764 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-67ogc3-acd96842e8c9a6b20b69272b0fee2bb7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to set form field width<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5z2kgz-e52fe98a59854ead23907180161f1e07 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Each form field can be set to take a specific width of it&#8217;s parent container, allowing us to design custom inquiry forms with the Enfold theme.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4653\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/field-width.png\" alt=\"\" width=\"645\" height=\"575\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-lbrvn-21d291cd49cbf2ad43b20c2234fc2004 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5qmvln-b8bd5f84b812ad9913a7f5960804b80c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Using contact form in widget area<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-5m5agz-afe122766a99a58e99afc1ed5b34b9d5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The form element can be placed in a sidebar, footer, as part of a slider, or anywhere else on the site with the help of shortcode.<\/p>\n<ul>\n<li>Enable the debug mode to view the page shortcode.<\/li>\n<li>Create a new form on an empty page ( it will be easy to copy the shortcode).<\/li>\n<li>To place the form in the sidebar or footer go to Dashboard > Appearance > Widgets.<\/li>\n<li>Drop a text area widget in footer or sidebar and paste the form shortcode where you need the form to appear.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4654\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/widgets.png\" alt=\"\" width=\"985\" height=\"619\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-jel4z-e82e91d69eadae6bfe756fb91ae005dd hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-59pivf-04219b05c12607d5cece3cbdc354a2d9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to trigger a pop-up form when a button is clicked <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-50ethn-e72968edb582df6d42bfb52c945ac803 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>It is easy to create a pop-up form. For this purpose, a button element should be used please refer to <strong>Button > Button usage<\/strong> section or <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/button\/#button-usage\" target=\"_blank\" rel=\"noopener\">click here<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-4v4c8j-90acfbb33114e57634853f01ad7adc12 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4pjakz-0e40fa736e2ba23958e872db15902ffb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add on click event to the contact form submit button <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4lo96j-11a769d5ae2b07658bb24b8dc99b5a95 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you want to track the contact form submissions with google analytics you will need to add an \u201conclick\u201d event to the submit button.<\/p>\n<p>To do this you can use the \u201cavf_contact_form_submit_button_attr\u201d filter. The advantage is that you don\u2019t need to hack the parent theme files, but if you place the code into your child theme functions.php file, it won\u2019t be affected by the parent theme updates. Insert this code into the child theme functions.php file:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-46assr-8a00a8740a1a5aa26aa177d828bd04ac '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Note<\/strong> \u2013 you will need to replace onclick=\u201d_gaq.push([\u2018_trackPageview\u2019, \u2018\/VP\/XXX\/XXX\u2019]);\u201d with your tracking code \u2013 it\u2019s just an example. The $formID and $form_params variables contain some information about the contact form (settings, element id, etc.). These variables are useful if you want to set different attributes for different contact forms.<\/p>\n<\/div><\/section>\n<div  class='hr av-42hd9n-b91078f14888330793ed89a1397a7ff5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3w5cxn-f8438b912017b89ebd45acc943c4475d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>CAPTCHA<\/h2>\n<\/div><\/section>\n<div  class='hr av-42hd9n-b91078f14888330793ed89a1397a7ff5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>What is CAPTCHA?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In today&#8217;s time, bots are incessantly used to post SPAM messages on your site which can annoy your site users and bring down the credibility of your site in no time. To reduce the bots effect companies like Google and others have come up with a CAPTCHA technology which is a free service offered by Google and other companies to help webmasters protect their site from spam and abuse. CAPTCHA is an acronym for &#8220;Completely Automated Public Turing test to tell Computers and Humans Apart&#8221;.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12585\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/nocaptcha-e1561020880651.gif\" alt=\"\" width=\"369\" height=\"150\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-3h5nr-b1a883e671a3131f3917fd1ec1d8826f hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How CAPTCHA works?<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>CAPTCHA technology can prevent bots from automatically submitting SPAM messages or other unwanted content on your site. A lot goes on in the background to monitor different behaviors on your site such as a mouse click, active time on the page, page scroll, etc and differentiate a bot from the real users.<\/p>\n<p>We have integrated the Google CAPTCHA technology in the Enfold theme and below is a brief overview of how things work.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jx2xeyo3-05e3ca5d1d8e2953731b96fc7c3126c4 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-3z1sn-70048deeef3984616f4d26b6d20f28ff'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-14' data-fake-id='#toggle-id-14' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-14' data-slide-speed=\"200\" data-title=\"Numeric Captcha\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Numeric Captcha\" data-aria_expanded=\"Click to collapse: Numeric Captcha\">Numeric Captcha<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-14' aria-labelledby='toggle-toggle-id-14' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Enfold has a built-in numeric CAPTCHA system and it can be activated from the Contact form element options.<\/p>\n<p>In case you disable Google reCAPTCHA in theme options or unable to activate the Google CAPTCHA and select V2 or V3 in the contact form(s) the built-in numeric CAPTCHA system will act as a fallback.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3dcur-1cfd31eff92e1dd1a0c0c00088f84d6f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-15' data-fake-id='#toggle-id-15' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-15' data-slide-speed=\"200\" data-title=\"Google CAPTCHA v2\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Google CAPTCHA v2\" data-aria_expanded=\"Click to collapse: Google CAPTCHA v2\">Google CAPTCHA v2<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-15' aria-labelledby='toggle-toggle-id-15' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Google API v2 script is loaded only if the CAPTCHA v2 is activated in the theme options and contact form element. The returned token from Google API checkbox is verified with Google in backend immediately after receiving and your submit form gets a one time usable submit token (created by Enfold) which is verified when receiving the submit. If the token fails the submit is ignored and a failed message is returned.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-2q2ff-935a00258f3dc404d47433c24bb57a0a'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-16' data-fake-id='#toggle-id-16' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-16' data-slide-speed=\"200\" data-title=\"Google CAPTCHA v3\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Google CAPTCHA v3\" data-aria_expanded=\"Click to collapse: Google CAPTCHA v3\">Google CAPTCHA v3<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-16' aria-labelledby='toggle-toggle-id-16' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Google needs to monitor user behavior to decide if the user is a human or a bot. Therefore we load the V3 API script on every page and send an initial verification request with action &#8216;page_load&#8217;. The only other request we send is when a user clicks the submit button of a contact form the first time to verify if he is a human (action &#8216;verify_submit&#8217;). Enfold does not send any other requests with actions.<\/p>\n<p><strong>NOTE<\/strong>: <strong>In case you select V2 in theme options and have selected V3 in the contact form(s) V2 will be used (and no V3 script will be loaded).<\/strong><\/p>\n<p>The returned token from Google API checkbox is verified with Google immediately after receiving in backend and the score is checked. If the score fails we provide a fallback to V2 verification &#8211; the checkbox is displayed and the user must verify to be a human. We proceed as described above with Version 2. Therefore it is absolutely a must that you create and verify API keys for V2 also as Google does not accept V3 keys for V2 verifications.<\/p>\n<p>On a positive score, your submit form gets a one time usable submit token created by Enfold which is verified when receiving the submit. If the token fails the submit is ignored and a failed message is returned.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3h5nr-ae29500b23caf4c90b84cf821a13c054\">\n#top .hr.hr-invisible.av-3h5nr-ae29500b23caf4c90b84cf821a13c054{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-3h5nr-ae29500b23caf4c90b84cf821a13c054 hr-invisible'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Here is a short video from Google that explains how Google CAPTCHA works.<\/p>\n<\/div><\/section>\n<div  class='avia-video av-jx2qqbpt-87161b082d0826591364513dc260775b avia-video-16-9 av-no-preview-image avia-video-load-always av-lazyload-immediate av-lazyload-video-embed'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/www.youtube.com\/watch?v=tbvxFW4UJdU'><script type='text\/html' class='av-video-tmpl'><div class='avia-iframe-wrap'><iframe loading=\"lazy\" title=\"Introducing reCAPTCHA v3\" width=\"1500\" height=\"844\" src=\"https:\/\/www.youtube.com\/embed\/tbvxFW4UJdU?feature=oembed&autoplay=0&loop=0&controls=1&mute=0\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div><\/script><div class='av-click-to-play-overlay'><div class=\"avia_playpause_icon\"><\/div><\/div><\/div>\n<div  class='hr av-2gqs3-af3248a8029bddf85dcc0f928a6c0427 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Choosing the type of CAPTCHA<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Every now and then a new version of CAPTCHA is released to stay ahead in the bots vs CAPTCHA race.<\/p>\n<p>Enfold is fully integrated with the latest CAPTCHA technology to protect you from SPAM bots. You can activate any of the following CAPTCHA technology that suits you better.<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-jx2xeyo3-05e3ca5d1d8e2953731b96fc7c3126c4 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-28zrn-ab58eb701dd2a07be24cb1359e1dbd26'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-17' data-fake-id='#toggle-id-17' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-17' data-slide-speed=\"200\" data-title=\"Numeric Captcha\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Numeric Captcha\" data-aria_expanded=\"Click to collapse: Numeric Captcha\">Numeric Captcha<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-17' aria-labelledby='toggle-toggle-id-17' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Numeric CAPTCHA system can be activated from the Contact form element options. Before submitting the form user has to answer a simple math question.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-1i5pv-37ff7bf0422f861be4e780bc274da625'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-18' data-fake-id='#toggle-id-18' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-18' data-slide-speed=\"200\" data-title=\"Google CAPTCHA v2\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Google CAPTCHA v2\" data-aria_expanded=\"Click to collapse: Google CAPTCHA v2\">Google CAPTCHA v2<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-18' aria-labelledby='toggle-toggle-id-18' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Google CAPTCHA v2 will display a checkbox and a text message &#8220;I&#8217;m not a robot&#8221;. Users have to click on the checkbox before submitting the form.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-yjp7-cfa099896d396a03b296a1e1bf036b66'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-19' data-fake-id='#toggle-id-19' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-19' data-slide-speed=\"200\" data-title=\"Google CAPTCHA v3\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Google CAPTCHA v3\" data-aria_expanded=\"Click to collapse: Google CAPTCHA v3\">Google CAPTCHA v3<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-19' aria-labelledby='toggle-toggle-id-19' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>This version is designed by Google to be frictionless and non-interactive with the users. A CAPTCHA badge or a message is displayed at the bottom of the page as per the Google guidelines. CAPTCHA v3 works by monitoring the user behavior and assigns a score between 0 to 1. A score of 1.0 is very likely a good interaction, 0.0 is very likely a bot and the form will not be processed. Google recommends a threshold of 0.5 by default.<\/p>\n<p>Google CAPTCHA v3 works without any friction with the website users by returning a score (1.0 is very likely a good interaction, 0.0 is very likely a bot) which you can check in the Google admin console.<\/p>\n<p>To know more about the features of different version of CAPTCHA please check the <a href=\"https:\/\/developers.google.com\/reCAPTCHA\/docs\/versions\" target=\"_blank\" rel=\"noopener noreferrer\">CAPTCHA docs<\/a> by Google.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3h5nr-ae29500b23caf4c90b84cf821a13c054\">\n#top .hr.hr-invisible.av-3h5nr-ae29500b23caf4c90b84cf821a13c054{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-3h5nr-ae29500b23caf4c90b84cf821a13c054 hr-invisible'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>NOTE: In case you select V2 in theme options and have selected V3 in the contact form(s) V2 will be used (and no V3 script will be loaded).<\/strong><\/p>\n<\/div><\/section>\n<div  class='hr av-23zzf-2eeb63161f4e24ecadaf96bfa08162f8 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Activate Google CAPTCHA<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Google CAPTCHA is now integrated to enfold contact form element but before using it we need to link the theme with the CAPTCHA service. To activate the CAPTCHA feature and use it in your Enfold theme please follow the below steps:<\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-1xevb-c9a304b87c2034ee16c6bbb11b2605e2 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-dxc23-05aff346ea6fe3a87e1854a925778432'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-20' data-fake-id='#toggle-id-20' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-20' data-slide-speed=\"200\" data-title=\"Create Google CAPTCHA keys\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Create Google CAPTCHA keys\" data-aria_expanded=\"Click to collapse: Create Google CAPTCHA keys\">Create Google CAPTCHA keys<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-20' aria-labelledby='toggle-toggle-id-20' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>Ok, let&#8217;s start by visiting the <a href=\"https:\/\/www.google.com\/recaptcha\/admin\" target=\"_blank\" rel=\"noopener noreferrer\">Google CAPTCHA home<\/a>.<\/li>\n<li>Login with your Gmail credentials if you haven&#8217;t.<\/li>\n<li>Now you should see &#8220;Register a new site&#8221; options if not <a href=\"https:\/\/www.google.com\/recaptcha\/admin\/create\" target=\"_blank\" rel=\"noopener noreferrer\">click here<\/a>.<\/li>\n<li>In the &#8220;Label&#8221; section please enter a name that is easy to identify your site name.<\/li>\n<li>Select a &#8220;reCAPTCHA type&#8221; you like to use.<\/li>\n<li>Under the CAPTCHA v2 please select the option &#8220;I&#8217;m not a robot&#8221; Checkbox.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12588\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/captcha-v2.png\" alt=\"\" width=\"684\" height=\"266\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/captcha-v2.png 684w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/captcha-v2-300x117.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/captcha-v2-600x233.png 600w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/li>\n<li>Please note if select v3 you need to repeat the steps and register for both v2 and v3. Enfold will use CAPTCHA v2 as a fallback if v3 fails.<\/li>\n<li>Add your domain name and hit the enter to save.<\/li>\n<li>Accept the captcha terms and submit your options.<\/li>\n<li>In the next screen copy the Site key and Secret key for your registered domain.<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-7xo63-f2f30e2f987ab98425d71aaf89bb606f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-21' data-fake-id='#toggle-id-21' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-21' data-slide-speed=\"200\" data-title=\"Integrate CAPTCHA on your Enfold site\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Integrate CAPTCHA on your Enfold site\" data-aria_expanded=\"Click to collapse: Integrate CAPTCHA on your Enfold site\">Integrate CAPTCHA on your Enfold site<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-21' aria-labelledby='toggle-toggle-id-21' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><ul>\n<li>Go to Enfold theme options > Google Services > Google ReCAPTCHA<\/li>\n<li>Select the CAPTCHA version you registered the domain name for.<\/li>\n<li>Enter the Site Key and Secret Key in the theme options and click on the blue button that says&#8217;s &#8221; Check reCAPTCHA API keys Vx&#8221; to verify your Key works.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12589\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/activate-keys.png\" alt=\"\" width=\"469\" height=\"194\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/activate-keys.png 469w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/activate-keys-300x124.png 300w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/li>\n<\/ul>\n<p>If all goes well you should see a success message. On the last step, click the &#8220;Save all changes&#8221; to save your theme options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12590\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Captcha-activated.png\" alt=\"\" width=\"903\" height=\"199\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Captcha-activated.png 903w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Captcha-activated-300x66.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Captcha-activated-768x169.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Captcha-activated-705x155.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/03\/Captcha-activated-600x132.png 600w\" sizes=\"auto, (max-width: 903px) 100vw, 903px\" \/><\/p>\n<p>If the API key you entered is for a wrong version or is incorrect an error message is displayed on your screen. Make sure you copy the key correctly and match the CAPTCHA version if not delete the API key and register a new one and repeat the steps.<\/p>\n<p><strong>To set up the Google CAPTCHA v3 you need to register for both v2 and v3. Enfold will use CAPTCHA v2 as a fallback if v3 fails<\/strong>.<\/p>\n<\/div><\/div><\/div><\/section>\n<section class='av_toggle_section av-3twp-21fa9efbae2e0886684aa63b21cd9e11'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-22' data-fake-id='#toggle-id-22' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-22' data-slide-speed=\"200\" data-title=\"Create a form with CAPTCHA\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: Create a form with CAPTCHA\" data-aria_expanded=\"Click to collapse: Create a form with CAPTCHA\">Create a form with CAPTCHA<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-22' aria-labelledby='toggle-toggle-id-22' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><p>Drop a contact form element on to your page.<br \/>\nClick on the contact form element to open the element options.<br \/>\nScroll down until you see &#8220;<strong>Contact Form Captcha&#8221; <\/strong>and select one of the CAPTCHA options.<\/p>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-1lt9z-7b1659c0856103e08b6a2ac9f3d77277 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-edd9b3d514353f51f2992a34da6bb942 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Display default Google CAPTCHA badge<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-edd9b3d514353f51f2992a34da6bb942 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, Enfold would display &#8220;This site is protected by reCAPTCHA and the Google\u00a0<a href=\"https:\/\/policies.google.com\/privacy\">Privacy Policy<\/a>\u00a0and\u00a0<a href=\"https:\/\/policies.google.com\/terms\">Terms of Service<\/a>\u00a0apply.&#8221; text under your contact form.<\/p>\n<p>If you would like to display a Google reCAPTCHA\u00a0badge instead, you can add following code to Functions.php file of your child theme<\/p>\n<pre><code>add_theme_support( \"avia_recaptcha_show_legal_information\" );<\/code><\/pre>\n<p><strong>If you are not using a child theme you need to add the above function after this line in the theme functions.php:<\/strong><\/p>\n<pre><code>if(isset($avia_config['use_child_theme_functions_only'])) return;<\/code><\/pre>\n<p>After adding the code in Functions.php file, you can go to Enfold theme options > Google Services > Google Legal Information and choose between string or badge.<\/p>\n<\/div><\/section>\n<div  class='hr av-1lt9z-7b1659c0856103e08b6a2ac9f3d77277 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Disable CAPTCHA<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To disable the Google CAPTCHA go to <strong>Theme Options > Google Services > Google ReCAPTCHA > Disable reCAPTCHA<\/strong> from the dropdown list.<\/p>\n<p>Once the Google reCAPTCHA is disabled from the theme options no related scripts are loaded at all but you can still use the built-in numeric CAPTCHA.<\/p>\n<\/div><\/section>\n<div  class='hr av-3g0v-6a4ac922bf9d37fb039d40614a87230a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Error handling<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-gabzkb-0d4098064ae17c496309a27dad999b71 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In case we encounter severe problems like:<\/p>\n<ul>\n<li><strong>No internet connection \/ lost connection<\/strong><\/li>\n<li><strong>Invalid tokens<\/strong><\/li>\n<li><strong>Script loading errors<\/strong><\/li>\n<\/ul>\n<p>The submit button is automatically removed from the HTML code to avoid manipulations and give the user feedback to reload the page.<\/p>\n<p>For administrators (&#8216;manage_options&#8221; capability) we provide a more detailed error report. This can be changed with filter avf_reCAPTCHA_show_extended_error_messages.<\/p>\n<\/div><\/section>\n<div  class='hr av-42hd9n-b91078f14888330793ed89a1397a7ff5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3w5cxn-28d113b3a0d5a975af465dada43628e6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Troubleshoot<\/h2>\n<\/div><\/section>\n<div  class='hr av-3shud7-fec87f1faba397a0d584dad2ac1bf650 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3j9a57-7de284ad8ec3c0806f75b013f82d1a15 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>My contact form is not sending emails <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3d0w7n-62886eca13f36b79aef59bdc441c5633 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you are not receiving e-mails from the contact form, here are some troubleshooting tips that you can try before asking in the support forums.<br \/>\n<strong>1. Typos and SPAM<\/strong><br \/>\nDouble check that the e-mail address you\u2019re using does not have any typos. Also be sure to check your spam folder in your e-mail client. If possible, try with another email address which is not linked to a private domain. For example Gmail or Yahoo.<br \/>\n<strong>2. Check if WordPress is able to send e-mails<\/strong><br \/>\nGo to the login screen of your WordPress installation and attempt to recover your user password, if you do get the e-mail then it may be that your server is only allowing e-mails sent from the default WP address (should be like \u201cwordpress@yoursite.com\u201d). In this case, you can set the Enfold contact form to send messages from that address, just add the following snippet to your theme\/child theme functions.php file:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-31r1vf-f2d05703834e1c3a25c76494160b9cf2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>3. Deactivate Plugins<\/strong><br \/>\nIf you see the contact form \u201cSend\u201d button is not responding then it could be that a plugin is causing a JavaScript conflict on the page. Deactivate all plugins and try again.<br \/>\n<strong>4. Third-party plugin form testing<\/strong><br \/>\nInstall the\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\">Contact Form 7<\/a>\u00a0plugin, create a Form and do some tests. If no e-mails are received then it\u2019s most likely a problem with your hosting provider. You will want to contact them and let them know you are having trouble with e-mail sending to see if there are any problems.<br \/>\n<strong>5. Using SMTP<\/strong><br \/>\nIf your hosting provider requires you to use SMTP then you can setup the\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/wp-smtp\/\">WP SMTP plugin<\/a>\u00a0to have WordPress use SMTP instead of PHP\u00a0<a href=\"http:\/\/php.net\/manual\/en\/function.mail.php\">mail<\/a>. You will need to grab the SMTP server information from your hosting provider.<\/p>\n<\/div><\/section>\n<div  class='hr av-af4uj-4efe51f2e42aee2c726b042c23abc66e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2q7tkj-9608f9e8131edec4246384a67e7cae84 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Mailto links not working <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2jj8az-1cc520c10d6bc561a6263ed0d03b8b60 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, some browsers do not handle the mailto links <strong>so nothing happens when you click on the email links<\/strong> in your browser. Do not worry it is a one-time setup. Let\u2019s make sure your browser is set up correctly to handle the mailto links please follow the steps below:<\/p>\n<p>1. If you are using chrome go to Chrome Settings > Content Settings > Manage Handlers<\/p>\n<p>2. If Manage Handler setting is empty click on the double diamond icon that appears when you first log in to Gmail and select \u201cAllow\u201d mail.google.com to open email links and repeat the first step.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4663\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/mailto.png\" alt=\"\" width=\"266\" height=\"148\" \/> <\/p>\n<p>This should open the email links in the browser. If you still have any issue check the mailto link is set up as mentioned here https:\/\/css-tricks.com\/snippets\/html\/mailto-links\/<\/p>\n<p>We recommend using the contact form because some browsers depend on the user settings.<\/p>\n<\/div><\/section>\n<div  class='hr av-2ezexf-26f140e401fdcf4cabd1a583f2371f10 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2afljv-987560da5780a26a440b4a1ad784f56c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Contact form going to SPAM <\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-21mkqr-097c2bbadbb55dddb9b43f62a1c5305d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There is nothing on our side that can control which email gets flagged as spam. That is up to your mail service and your domain reputation to that spam filter, but you can give <a href=\"https:\/\/wordpress.org\/plugins\/easy-wp-smtp\/\" target=\"_blank\" rel=\"noopener noreferrer\">SMTP<\/a> plugin a try.<\/p>\n<\/div><\/section>\n<div  class='hr av-1x95az-b32a638a8dc19b474d087606240ecc03 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1rqo8r-d7160aa26ca381eb31f8c8fbf35420f6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Emails arive late<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1iajn7-be7249df2232e46dd47d38935b96390b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There is not much we can help you with, as it is the mail server that handles outgoing emails. Please contact your host to resolve third party issues.<\/p>\n<\/div><\/section>\n<div  class='hr av-1fc997-6870f0aef620d707a1b93f4dcad6212b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4k22z-e037a010000b0e0af7a32764cd53450c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Developer Info<\/h2>\n<\/div><\/section>\n<div  class='hr av-1fc997-6870f0aef620d707a1b93f4dcad6212b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4k22z-e037a010000b0e0af7a32764cd53450c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Filters<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-1fc997-6870f0aef620d707a1b93f4dcad6212b hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4k22z-e037a010000b0e0af7a32764cd53450c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Resource<\/h3>\n<\/div><\/section>\n<div  class='hr av-15971f-fc8f3067fa7d03a25702b53a19439e2e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-y6fqr-f4b8d4b79a1175f9b2fe2d9f0882401c '   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=QpCgs6mVt9Y\"> Contact Form 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-283","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\/283","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=283"}],"version-history":[{"count":12,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/283\/revisions"}],"predecessor-version":[{"id":13208,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/283\/revisions\/13208"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}