Rubin Shrestha
Zend certified PHP/Magento developer
Rubin Shrestha
Blog

Add Captcha to widget with Custom Form

by |Published

I have added a widget to a custom extension that includes a form. The form needs to have a Captcha on it. I cannot figure out what I am missing to get it to display on the form.

The form opens in a modal that slides in from the right side of the screen.

I think I just am not tying something correctly in the XML files, but I don’t see what I am missing or doing wrong.

/app/code/Vendor/Module/etc/widget.xml

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget class="VendorModuleBlockWidgetShareables" id="vendor_module_shareables">
    <label>Wigdet Label</label>
    <containers>
        <container name="content">
            <template name="grid" value="default" />
            <template name="list" value="list" />
        </container>
    </containers>
</widget>
</widgets>

/app/code/Vendor/Module/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="content">
        <block class="VendorModuleBlockWidgetShareables" name="ecards.widget.captcha" template="Vendor_Module::widget/shareables.phtml">
            <container name="form.additional.info" label="Form Additional Info">
                <block class="MagentoCaptchaBlockCaptcha" name="captchaecards" after="-" cacheable="true">
                    <action method="setFormId">
                        <argument name="formId" xsi:type="string">ecard-message-edit</argument>
                    </action>
                    <action method="setImgWidth">
                        <argument name="width" xsi:type="string">230</argument>
                    </action>
                    <action method="setImgHeight">
                        <argument name="width" xsi:type="string">50</argument>
                    </action>
                </block>
            </container>
        </block>
    </referenceContainer>
    <referenceBlock name="head.components">
        <block class="MagentoFrameworkViewElementJsComponents" name="captcha_page_head_components_ecards" template="Magento_Captcha::js/components.phtml"/>
    </referenceBlock>
</body>
</page>

/app/code/Vendor/Module/etc/config.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
    <customer>
        <captcha>
            <shown_to_logged_in_user>
                <ecard-message-edit>1</ecard-message-edit>
            </shown_to_logged_in_user>
            <always_for>
                <ecard-message-edit>1</ecard-message-edit>
            </always_for>
        </captcha>
    </customer>
    <captcha translate="label">
        <frontend>
            <areas>
                <ecard-message-edit>
                    <label>Ecards Send Form</label>
                </ecard-message-edit>
            </areas>
        </frontend>
    </captcha>
</default>
</config>

/app/code/Vendor/Module/view/frontend/templates/widget/shareables.phtml

<form id="ecard-message-edit" class="ecard-email-form" action="#" method="post" data-mage-init='{"validation":{}}'>
    <?php if($block->getCustomer() == 'null') { ?>
            <span class="sendasguesttitle"><?php echo $block->escapeHtml(__('SEND BY EMAIL')) ?></span>
    <?php } ?>
        <div class="ecard-email-inputfield">
        <input type="text" placeholder="Your Full Name" name="message[name]" id="name" value="<?php echo $block->getCustomerName(); ?>" class="input-text required-entry ecard-fullname" aria-labelledby="label-full-name">
        </div>
        <div class="ecard-email-emailfield">
        <input type="email" placeholder="Your Email Address" name="message[sender_data]" id="sender_data" value="<?php echo $block->getCustomerEmail(); ?>" class="input-text required-entry ecard-email" aria-labelledby="label-full-name">
        </div>
        <div class="ecard-email-recipientsemail">
        <textarea name="recipient[email_address]" cols="60" rows="2" id="recipients" class="input-text validate-emails required-entry ecard-email-form__field" placeholder="Recipient Email Address" aria-labelledby="label-recepient-email"></textarea>
        <span class="ecard-recipientsemailmax" id="error">Up to 10 Addresses, Separate with Commas</span>
        </div>
        <div class="ecard-email-message">
        <textarea placeholder="Personalized Message" name="message[message]" rows="2" class="ecards-maxlength-area input-text required-entry ecard-email-field-textarea" maxlength="500" aria-label="Message" id="message"></textarea>
        <div id="character-count">500 Characters Remaining</div>
        </div>
        <input type="hidden" name="message[content]" value="" class="contentid" id="content">
        <input type="hidden" name="message[content_type]" value="" class="content_type" id="content_type">
            <?php echo $block->getBlockHtml('formkey'); ?>
            <?php echo $block->getChildHtml('form.additional.info'); ?>
            <span class="customerrormsg" style="display:none;">Please enter the required fields.</span>
            <span class="customsuccessmsg" style="display:none;">Captcha Successfully validated.</span>
            <span class="customcaptcherrormsg" style="display:none;">Incorrect Captcha.</span>
            <button type="button" class="custombutton ecard-email-form__button" value="Send" id="custombuttonecards" >Send Ecard</button>
            <button type="button" class="button ecard-email-form__button" value="Send" style="display:none;" id="sendecardform" >Send Ecard</button>
        <span class="termsandconditions">By clicking send, I agree to receive emails from Vendor.</span>
    </form>

<?php
echo $block->getLayout()->createBlock('VendorModuleBlockLanding')->setTemplate('Vendor_Module::captchjs.phtml')->toHtml();
?>

/app/code/Vendor/Module/Controller/Captcha/Sendform.php

<?php

namespace KensiumEcardsControllerCaptcha;

use MagentoFrameworkControllerResultFactory;
use MagentoFrameworkEventObserverInterface;
use MagentoFrameworkAppRequestDataPersistorInterface;
use MagentoFrameworkAppObjectManager;
use MagentoCaptchaObserverCaptchaStringResolver;
use MagentoFrameworkExceptionLocalizedException;
use MagentoFrameworkAppActionInterface;

class Sendform extends LaminasCaptchaDumb implements ActionInterface
{
/**
 * @var MagentoCaptchaHelperData.
 */
protected $_helper;

/**
 * @var MagentoFrameworkAppActionFlag
 */
protected $_actionFlag;

/**
 * @var MagentoFrameworkMessageManagerInterface
 */
protected $messageManager;

/**
 * @var MagentoFrameworkAppResponseRedirectInterface
 */
protected $redirect;

/**
 * @var CaptchaStringResolver
 */
protected $captchaStringResolver;

/**
 * @var DataPersistorInterface
 */
private $dataPersistor;

/**
 * @var MagentoFrameworkControllerResultJsonFactory
 */
protected $_resultPageFactory;

/**
 * @param MagentoBackendAppActionContext $context
 * @param MagentoFrameworkControllerResultJsonFactory $resultJsonFactory
 * @param MagentoCaptchaHelperData $helper
 * @param MagentoFrameworkAppActionFlag $actionFlag
 * @param MagentoFrameworkMessageManagerInterface $messageManager
 * @param MagentoFrameworkAppResponseRedirectInterface $redirect
 * @param CaptchaStringResolver $captchaStringResolver
 */

public function __construct(
    MagentoFrameworkControllerResultJsonFactory $resultJsonFactory,
    MagentoCaptchaHelperData $helper,
    MagentoFrameworkAppActionFlag $actionFlag,
    MagentoFrameworkMessageManagerInterface $messageManager,
    MagentoFrameworkAppResponseRedirectInterface $redirect,
    CaptchaStringResolver $captchaStringResolver,
    MagentoFrameworkAppRequestHttp $request,
    MagentoFrameworkSessionSessionManagerInterface $sessionManager,
    MagentoFrameworkEventManagerInterface $eventManager
) {
  
    $this->resultJsonFactory = $resultJsonFactory;
    $this->_helper = $helper;
    $this->_actionFlag = $actionFlag;
    $this->messageManager = $messageManager;
    $this->redirect = $redirect;
    $this->captchaStringResolver = $captchaStringResolver;
    $this->request = $request;
    $this->sessionManager = $sessionManager;
    $this->_eventManager = $eventManager;
}

public function execute()
{
    $params = $this->request->getParams();
    $user_entered_captcha = $params['captcha'];
    $action = $this->request->getFullActionName();
    $result = [];
    $result['error'] = false;
    $result['message'] = 'Captcha Successfully validated';
    
    $formId = 'ecard-message-edit';
    $captcha = $this->_helper->getCaptcha($formId);

    if(isset($_SESSION['customer_base']['ecard-message-edit_word'])) {
        $captcha_from_session = $_SESSION['customer_base']['ecard-message-edit_word'];
        $session_captcha = $captcha_from_session['data'];
    } else {
        $session_captcha = $captcha->getWord();
    }

    if($user_entered_captcha == $session_captcha) {
            $result['error'] = 'false';
            $result['message'] = 'Captcha Successfully validated';
    } else {
            $result['error'] = 'true';
            $result['message'] = 'Incorrect Captcha !!';
    }

    $objectManager = MagentoFrameworkAppObjectManager::getInstance();
    $jsonResultFactory = $objectManager->create('MagentoFrameworkControllerResultJsonFactory');
    $resultJson = $jsonResultFactory->create();
    $resultJson->setData($result);

    return $resultJson;
}

}

You may also like