{"id":4051,"date":"2017-10-04T12:48:16","date_gmt":"2017-10-04T12:48:16","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=4051"},"modified":"2020-05-07T05:32:50","modified_gmt":"2020-05-07T05:32:50","slug":"override-blacklist-sanitizer","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/override-blacklist-sanitizer\/","title":{"rendered":"How to Override Blacklist Sanitizer?"},"content":{"rendered":"\n

Let’s override the blacklist sanitizer to allow forms in AMP.<\/strong><\/p>\n\n\n\n

First Create a new plugin say AMP Custom Plugin<\/strong> (You can check this tutorial if you don’t know how to do it: Custom Plugin for AMP<\/a> )<\/p>\n\n\n\n

Create a new file for the class in the AMP Custom Plugin<\/strong> folder you have just created say “<\/em>class-amp-blacklist“<\/em><\/strong><\/p>\n\n\n\n

In“<\/em>class-amp-blacklist“<\/em><\/strong> include the blacklist sanitizer class and write a new class to extend AMP_Blacklist_Sanitizer<\/strong>.<\/strong><\/em><\/p>\n\n\n\n

Here is the code to achieve this task:<\/strong><\/p>\n\n\n\n

AMP New Blacklist Sanitizer<\/a><\/strong><\/p>\n\n\n\n

When you go down in the code you will see a function called get_blacklisted_tags, <\/em><\/strong>this is the function which is stripping the tags like form. As you can see I have commented the elements which will make the form to work in AMP.<\/p>\n\n\n\n

Call this file in the main file of AMP Custom Plugin<\/strong><\/p>\n\n\n\n

add_action('init', 'amp_new_class_sanitizer');\nfunction amp_new_class_sanitizer() {\n    require_once plugin_dir_path(__FILE__) .'\/class-amp-blacklist.php';\n}<\/pre><\/div>\n\n\n\n
Unset the AMP_Blacklist_Sanitizer <\/strong>and add Set our new class for the sanitization.<\/p>\n\n\n\n
add_filter('amp_content_sanitizers','amp_custom_blacklist', 100);\nfunction amp_custom_blacklist( $data ){\n unset($data['AMP_Blacklist_Sanitizer']);\n $data[ 'AMP_New_Blacklist' ] = array();\n return $data;\n}<\/pre><\/div>\n\n\n\n
After doing these steps, forms will not be stripped from the AMP Content.<\/p>\n\n\n\n
But there might still be an error of action in AMP, so there are two options for this, use custom AMP Editor and change action to action-xhr or filter the content and replace the action with action-xhr.<\/p>\n\n\n\n
And also need to add class name ampforwp-form-allow for sanitizing the form.<\/p>\n\n\n\n
You can filter the content like this:<\/strong><\/p>\n\n\n\n
add_filter('the_content','new_form_content');\nfunction new_form_content($content){\n if ( function_exists( 'ampforwp_is_amp_endpoint' ) && ampforwp_is_amp_endpoint() ) {\n $content = preg_replace('#<form action="(.*?)" (.*?)>#ius', '<form action-xhr="$1" class="ampforwp-form-allow" $2 target="_blank">', $content);\n \n }\nreturn $content;\n}<\/pre><\/div>\n\n\n\n
You can style the forms with either custom CSS or with the hook;<\/p>\n\n\n\n
This is how you can do it with the hook:<\/strong><\/p>\n\n\n\n
add_action('amp_post_template_css','new_css_for_form',999);\nfunction new_css_for_form(){ ?>\n .amp-wp-content form>div {\n display:none;\n}\n\n<?php }<\/pre><\/div>\n\n\n\n
Now you can add forms in AMP without any worries.<\/p>\n\n\n\n
You can read more about AMP forms here: Forms in AMP<\/a><\/p>\n\n\n\n
That\u2019s it for this tutorial!<\/strong><\/p>\n\n\n\n
We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n
\n\t\t\tAsk your Questions Directly!<\/strong>
\n\t\t\t
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t