{"id":17017,"date":"2020-04-02T10:15:21","date_gmt":"2020-04-02T10:15:21","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&p=17017"},"modified":"2020-04-29T12:09:58","modified_gmt":"2020-04-29T12:09:58","slug":"how-to-create-a-custom-form-in-amp-and-add-it-through-shortcodes","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/how-to-create-a-custom-form-in-amp-and-add-it-through-shortcodes\/","title":{"rendered":"How to create a custom form in AMP and add it through shortcodes"},"content":{"rendered":"\n

If you want to create custom form in AMP and add it through shortcodes in the content for this follow the below steps<\/p>\n\n\n\n

Step 1 – <\/strong> create a custom plugin by using below the code<\/p>\n\n\n\n

<?php\n\/**\nPlugin Name:form For AMP\nPlugin URI: https:\/\/wordpress.org\/plugins\/accelerated-mobile-pages\/\nDescription: WPML For AMP - Accelerated Mobile Pages for WPML Support\nVersion: 1.7.2\nAuthor: Ahmed Kaludi, Mohammed Kaludi\nAuthor URI: https:\/\/ampforwp.com\/\nDonate link: https:\/\/www.paypal.me\/Kaludi\/25usd\nLicense: GPL2+\nText Domain: accelerated-mobile-pages-WPML-support\n *\/\nfunction renderField( $opts ) {\n$length_insert = '';\nif (isset($opts['max-length'])) {\n$length_insert .= ' maxlength="' . $opts['max-length'] . '"';\n}\nif (isset($opts['min-length'])) {\n$length_insert .= ' minlength="' . $opts['min-length'] . '"';\n}\nreturn '<input type="' . $opts['type'] . '" name="' . $opts['name'] . '" placeholder="' . $opts['label'] . '" title="' . $opts['label'] . '" class="txbx"' . $length_insert . ' \/>';\n}\nfunction ampforwp_form( $atts ) {\n$options = shortcode_atts( array(\n'title' => 'ampforwp form',\n'description' => 'This is short description about Form',\n), $atts);\n$fields = [\n['name' => 'name', 'label' => 'Name', 'type' => 'text', 'max-length' => 255],\n['name' => 'email', 'label' => 'Email address', 'type' => 'email'],\n['name' => 'phone', 'label' => 'Phone number', 'type' => 'tel', 'max-length' => 15],\n['name' => 'zip', 'label' => 'Zip code', 'type' => 'number', 'max-length' => 10],\n['name' => 'acres', 'label' => 'Total acreage of your land', 'type' => 'number'],\n];\n$fields_html = implode("", array_map('renderField', $fields));\n$fields_html .= '<button type="submit" class="btn">Learn more<\/button>';\n$messages = '<div submit-success>\n<template type="amp-mustache">\nSuccess!\n<\/template>\n<\/div>\n<div submit-error>\n<template type="amp-mustache">\nForm failed to submit!\n<\/template>\n<\/div>';\nreturn '<hr\/><h1>' . $options['title'] . '<\/h1><p>' . $options['description'] . '<\/p><form class="ampforwp-form-allow" target="_top" method="POST" action-xhr="\/">' . $fields_html . $messages . '<\/form>';\n}\nadd_shortcode('ampforwp-form-shortcode', 'ampforwp_form');\n <\/pre><\/div>\n\n\n\n
Step 2 –<\/strong> Open a post in the block editor or add a new one and then click on the + button and pick the shortcode block <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Step 3 –<\/strong> After that Add shortcode like below the screenshot<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
 Step 4 –<\/strong> Once you are done, click on the \u201cpublish<\/strong>\u201d button. <\/p>\n\n\n\n
The output of custom form in AMP and add it through shortcodes<\/h4>\n\n\n\n
\"\"<\/figure>\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