Clicky

  1. Home
  2. How To
  3. How to create a custom form in AMP and add it through shortcodes

How to create a custom form in AMP and add it through shortcodes

If you want to create custom form in AMP and add it through shortcodes in the content for this follow the below steps

Step 1 – create a custom plugin by using below the code

<?php
/**
Plugin Name:form For AMP
Plugin URI: https://wordpress.org/plugins/accelerated-mobile-pages/
Description: WPML For AMP - Accelerated Mobile Pages for WPML Support
Version: 1.7.2
Author: Ahmed Kaludi, Mohammed Kaludi
Author URI: https://ampforwp.com/
Donate link: https://www.paypal.me/Kaludi/25usd
License: GPL2+
Text Domain: accelerated-mobile-pages-WPML-support
 */
function renderField( $opts ) {
$length_insert = '';
if (isset($opts['max-length'])) {
$length_insert .= ' maxlength="' . $opts['max-length'] . '"';
}
if (isset($opts['min-length'])) {
$length_insert .= ' minlength="' . $opts['min-length'] . '"';
}
return '<input type="' . $opts['type'] . '" name="' . $opts['name'] . '" placeholder="' . $opts['label'] . '" title="' . $opts['label'] . '" class="txbx"' . $length_insert . ' />';
}
function ampforwp_form( $atts ) {
$options = shortcode_atts( array(
'title' => 'ampforwp form',
'description' => 'This is short description about Form',
), $atts);
$fields = [
['name' => 'name', 'label' => 'Name', 'type' => 'text', 'max-length' => 255],
['name' => 'email', 'label' => 'Email address', 'type' => 'email'],
['name' => 'phone', 'label' => 'Phone number', 'type' => 'tel', 'max-length' => 15],
['name' => 'zip', 'label' => 'Zip code', 'type' => 'number', 'max-length' => 10],
['name' => 'acres', 'label' => 'Total acreage of your land', 'type' => 'number'],
];
$fields_html = implode("", array_map('renderField', $fields));
$fields_html .= '<button type="submit" class="btn">Learn more</button>';
$messages = '<div submit-success>
<template type="amp-mustache">
Success!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Form failed to submit!
</template>
</div>';
return '<hr/><h1>' . $options['title'] . '</h1><p>' . $options['description'] . '</p><form class="ampforwp-form-allow" target="_top" method="POST" action-xhr="/">' . $fields_html . $messages . '</form>';
}
add_shortcode('ampforwp-form-shortcode', 'ampforwp_form');
 

Step 2 – Open a post in the block editor or add a new one and then click on the + button and pick the shortcode block

Step 3 – After that Add shortcode like below the screenshot

Step 4 – Once you are done, click on the “publish” button.

The output of custom form in AMP and add it through shortcodes

That’s it for this tutorial!

We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.

Ask your Questions Directly!
If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!
Updated on April 29, 2020

    Are you still looking for a solution?

    Then fill out the below form and we will reach out to you within a few hours.


    Was this article helpful?

    Related Articles

    Comments

    1. Dropdown option is not working, its showing blank. Please help

      1. Hi Yogesh Kumar Yadav,

        Will you please elaborate more about your issue so that we will understand and help you.

    Leave a Comment