Yandex SmartCaptcha (Яндекс Капча)

Настройка Yandex SmartCaptcha на стороне Яндекса

Актуальная инструкцию по созданию капчи со стороны Яндекса находится здесь:

https://yandex.cloud/ru/docs/smartcaptcha/quickstart#creat-captcha

Выполнить все действия до пункта с добавлением виджета на страницу, далее настройка идет на стороне Платформы LP. В конечном итоге вы должны получить:

• Ключ клиента

Настройка Yandex SmartCaptcha со стороны Платформы LP

После того как вы получили Ключ клиента. 

Копируем код поля формы для капчи ниже:

{"className":"WidgetField","data":{"style":{"handlers":"style","vals":{"bgType":"clear","bgImage":{"pack":"bg-tech","file":"//s.lpcdn.site/img/bg-tech/1.jpg","color":[0.55,1,0.5],"size":[1600,1046],"datamix":{"img":"3.3"}},"bgImage_Blur":0,"bgImage_Attach":false,"bgImage_Size":"cover","bgImage_Repeat":"repeat","bgImage_Valign":"center","bgImage_Halign":"center","bgVideo_Source":"youtube","bgVideo_Youtube":"http://www.youtube.com/watch?v=3oem-M2tQU4","bgVideo_YoutubeImageSource":"youtube","bgVideo_YoutubeImage":{"file":"http://img.youtube.com/vi/3oem-M2tQU4/maxresdefault.jpg","size":[1920,1080],"pack":"users","datamix":{"img":"3.3"}},"bgVideo_Mp4":"//s.lpcdn.site/bgvideo/island.mp4","bgVideo_Webm":"//s.lpcdn.site/bgvideo/island.webm","bgVideo_Ogv":"//s.lpcdn.site/bgvideo/island.ogv","bgVideo_DirectImage":{"file":"//s.lpcdn.site/bgvideo/island.jpg","size":[1280,720],"pack":"users","datamix":{"img":"3.3"}},"bgColor":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"}},"bgColor_Alpha":0.25,"bgColor_Bright":0,"bgBright":-0.5,"bgGradientDirection":"to bottom","bgGradientColor1":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"}},"bgGradientColor1_Alpha":0.8,"bgGradientColor2":{"from":"global","global":{"id":0},"datamix":{"color":"3.3"}},"bgGradientColor2_Alpha":0.2,"bgParticlesShapeParticle":"circle","bgParticlesColorParticle":{"from":"contrast","contrast":{"type":"frontcolor"},"parent":{"type":"frontcolor"},"datamix":{"color":"3.3"}},"bgParticlesOpacityParticle":1,"bgParticlesNumberParticle":80,"bgParticlesSizeParticle":5,"bgParticlesLink":true,"bgParticlesLinkDistance":150,"bgParticlesMoveState":true,"bgParticlesMoveSpeed":2,"bgParticlesMoveDirection":"none","bgParticlesMoveOutMode":"out","bgParticlesInteractHoverState":false,"bgParticlesInteractHoverType":"grab","bgParticlesInteractHoverGrabDistance":250,"bgParticlesInteractHoverGrabOpacity":0.8,"bgParticlesInteractHoverRepulseDistance":150,"bgParticlesInteractHoverBubbleDistance":150,"bgParticlesInteractHoverBubbleSize":10,"bgParticlesInteractClickState":false,"bgParticlesInteractClickType":"push","bgParticlesInteractClickCount":2,"padTop":5,"padBottom":5,"padLeft":10,"padRight":10,"borderWidth":3,"borderRadius":0,"borderStyle":"none","borderColor":{"from":"parent","parent":{"type":"frontcolor"},"datamix":{"color":"3.3"}},"shadow":false,"shadowInset":false,"shadowX":0,"shadowY":2,"shadowBlur":5,"shadowScale":0,"shadowColor":{"from":"self","data":[0,0,0],"datamix":{"color":"3.3"}},"shadowAlpha":0.5,"wow":false,"wowType":"bounceIn","wowDelay":0,"hover":false,"hoverType":"hvr-grow-mini","id":"","classes":"","hidexs":false,"hidesm":false,"hidemd":false,"hidelg":false,"usePadTopXs":false,"padTopXs":5,"usePadBottomXs":false,"padBottomXs":5,"usePadLeftXs":false,"padLeftXs":5,"usePadRightXs":false,"padRightXs":5,"usePadTopSm":false,"padTopSm":5,"usePadBottomSm":false,"padBottomSm":5,"usePadLeftSm":false,"padLeftSm":5,"usePadRightSm":false,"padRightSm":5,"usePadTopMd":false,"padTopMd":5,"usePadBottomMd":false,"padBottomMd":5,"usePadLeftMd":false,"padLeftMd":5,"usePadRightMd":false,"padRightMd":5}},"datamix":{"nodebg":"3.3","widgetpaddings":"3.3","widgetborders":"3.3","widgetshadow":"3.3","widgetfx":"3.3","widgetparameters":"3.3","widgetadaptive":"3.3","metahtml":"3.3"},"settings":{"handlers":"settings","vals":{"name":"HTML виджет","html":"<div class=\"inline-captcha\"></div>\n\n<div class=\"only-for-editor\">\n\n<style>\n.only-for-editor .CheckboxCaptcha {\n  background-color: #fff;\n  background-color: var(--smart-captcha-background-color,#fff);\n  border-radius: 11px;\n  border-radius: var(--checkbox-captcha-border-radius,11px);\n  box-sizing: border-box;\n  font-family: YS Text,Helvetica Neue,Helvetica,Arial,sans-serif;\n  padding: 15px 0 0 15px;\n  position: relative;\n  user-select: none;\n}\n\n.only-for-editor .CheckboxCaptcha-Inner {\n  display: flex;\n}\n\n.only-for-editor .CheckboxCaptcha-Anchor {\n  background-color: #fff;\n  background-color: var(--anchor-background-color,#fff);\n  border-radius: 4px;\n  border-radius: var(--anchor-border-radius,4px);\n  height: 28px;\n  width: 28px;\n}\n\n.only-for-editor .CheckboxCaptcha-Button {\n  background: none;\n  border: 1px solid rgba(0,0,0,.15);\n  border: var(--checkbox-captcha-border,1px solid rgba(0,0,0,.15));\n  border-radius: 11px;\n  border-radius: var(--checkbox-captcha-border-radius,11px);\n  cursor: pointer;\n  font-size: 0;\n  height: 100%;\n  left: 0;\n  outline: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: 1;\n}\n\n.only-for-editor .CheckboxCaptcha-Checkbox {\n  align-items: center;\n  border: 2px solid #ccc;\n  border: var(--anchor-border,2px solid #ccc);\n  border-radius: 4px;\n  border-radius: var(--anchor-border-radius,4px);\n  box-sizing: border-box;\n  display: flex;\n  height: 28px;\n  justify-content: center;\n  width: 28px;\n}\n\n.only-for-editor .CheckboxCaptcha-Label {\n  display: flex;\n  flex-direction: column;\n  margin-left: 16px;\n}\n\n.only-for-editor .CaptchaLinks.Text {\n  font-size: 12px;\n}\n\n.only-for-editor .Text.Text_weight_regular {\n  font-weight: 400;\n}\n\n.only-for-editor .CheckboxCaptcha-Links {\n  letter-spacing: 0;\n  padding: 13px 0 8px 44px;\n  z-index: 2;\n}\n\n.only-for-editor .CaptchaLinks {\n  padding: 13px 0 8px;\n}\n\n.only-for-editor .Text_typography_control-s {\n  font-family: YS Text,Helvetica Neue,Helvetica,Arial,sans-serif;\n  font-size: .8125rem;\n  letter-spacing: .0065em;\n  line-height: 1rem;\n}\n\n.only-for-editor .Text_color_ghost {\n  color: rgba(0,0,0,.3);\n}\n\n.only-for-editor .Text {\n  color: #000;\n  color: var(--color-typo-primary,#000);\n  font-weight: 400;\n}\n\n.only-for-editor .CaptchaLinks .CaptchaButton,\n.only-for-editor .CaptchaLinks .Link {\n  z-index: 1;\n}\n\n.only-for-editor .CaptchaLinks-ToggleButton {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  width: 32px;\n}\n\n.only-for-editor .CaptchaButton_size_m {\n  height: 32px;\n  line-height: 32px;\n}\n\n.only-for-editor .CaptchaButton_view_clear {\n  background: none;\n  color: #000;\n  color: var(--color-typo-primary,#000);\n  font-size: 18px;\n  opacity: .65;\n  transition: opacity .1s ease-out;\n}\n\n.only-for-editor .CaptchaButton {\n  -moz-user-focus: ignore;\n  -webkit-tap-highlight-color: rgba(0,0,0,0);\n  border-width: 0;\n  box-sizing: border-box;\n  display: inline-block;\n  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;\n  font-weight: inherit;\n  margin: 0;\n  outline: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  touch-action: manipulation;\n  transform: scale(1);\n  transition: transform .1s ease-out,color .15s linear;\n  user-select: none;\n  white-space: nowrap;\n}\n</style>\n\n<div class=\"Theme Theme_color_yandex-default Theme_root_default\">\n  <div class=\"CheckboxCaptcha\" data-testid=\"checkbox-captcha\">\n    <div class=\"CheckboxCaptcha-Inner\">\n      <div class=\"CheckboxCaptcha-Anchor\">\n        <input type=\"submit\" id=\"js-button\" class=\"CheckboxCaptcha-Button\" value=\"\" aria-checked=\"false\" aria-labelledby=\"checkbox-label\" aria-describedby=\"checkbox-description\" role=\"checkbox\">\n        <noscript><input type=\"submit\" class=\"CheckboxCaptcha-Button\" value=\"\" aria-checked=\"false\" aria-labelledby=\"checkbox-label\" aria-describedby=\"checkbox-description\" role=\"checkbox\"/></noscript>\n        <div class=\"CheckboxCaptcha-Checkbox\" data-checked=\"false\">\n          <svg class=\"SvgIcon CheckIcon\" width=\"24\" height=\"24\" viewBox=\"0 0 24 25\" fill=\"none\">\n            <path d=\"M4 12.5L9.5 18.5L20 6.5\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </div>\n      </div>\n\n      <div class=\"CheckboxCaptcha-Label\">\n        <span class=\"Text Text_weight_regular Text_typography_control-xxl CheckboxCaptcha-LabelText\">\n          <span id=\"checkbox-label\">I'm not a robot&nbsp;</span>\n        </span>\n        <span class=\"Text Text_weight_regular Text_typography_control-l CheckboxCaptcha-SecondaryText\">\n          <span id=\"checkbox-description\">Press to continue</span>\n        </span>\n      </div>\n    </div>\n\n    <div class=\"Text Text_color_ghost Text_weight_regular Text_typography_control-s CaptchaLinks CheckboxCaptcha-Links\">\n      <button aria-label=\"Показать ссылки\" aria-pressed=\"false\" type=\"button\" class=\"CaptchaButton CaptchaButton_view_clear CaptchaButton_size_m CaptchaLinks-ToggleButton CaptchaLinks-ToggleButton_checkbox\">\n        <svg class=\"SvgIcon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\">","css":"","meta_js":"cr.api(function (page) {\n  const field = page.getComponent(el);\n  \n  function init() {\n    $(el).find('.inline-captcha').html('<div class=\"y-recaptcha\"></div>');\n    window.smartCaptcha.render($(el).find('.inline-captcha > .y-recaptcha')[0], {\n      sitekey : params.key,\n      callback: function (response) {\n        field.setValue('✓');\n      }\n    });\n  }\n  \n  field.form.on('submit', event => {\n    init();\n  });\n  \n  init();\n});","meta_js_lazy":true,"meta_js_state":"return {\n  initialState: {},\n  eventListeners: {},\n  reset: function () {},\n};","encapsulation":true,"components":[],"meta_cdn":["https://smartcaptcha.yandexcloud.net/captcha.js"],"tabs":[{"id":"main","name":"Главные"}],"variables":[{"macros":"key","name":"Ключ сайта","showCondition":"","useInJs":true,"tab":"main","type":"string","message":"Тут текст подсказки","value":""}],"type":"hackable","text":"Я не робот","hidename":false,"list":[{"text":"Гамбургер","image":{"file":"//f1.lpcdn.site/c16a5320fa475530d9583c34fd356ef5/85600fbdcfcd98c68092c8ee78fef443.jpg","size":[600,600]},"value":0,"name":"Вариант 1"},{"text":"Чай","image":{"file":"//f1.lpcdn.site/c16a5320fa475530d9583c34fd356ef5/d07611e14f2f6512eb82382ddb5812dd.jpg","size":[600,600]},"value":0,"name":"Вариант 2"},{"text":"Мороженное","image":{"file":"//f1.lpcdn.site/c16a5320fa475530d9583c34fd356ef5/ca0be5f5cd84b6891c5a611b252bc904.jpg","size":[600,600]},"value":0}],"visual_width":30,"visual_height":100,"required":true,"id":"","min":"0","max":"100","step":"1","align":"sides","fontsize":120,"typing":"string","format":"%result% руб.","file_text":"Прикрепить файл...","formula":"","condition":"","template":"","variable":"","valueOn":"1","valueOff":"0","privacy_button":"Политика конфиденциальности","privacy_checkbox":"Даю согласие на <обработку персональных данных>","privacy_text":"Нажимая кнопку, вы даете согласие на <обработку персональных данных>","privacy_source":"global"},"tabs":{"primary":"field","field":"field_metahtml","field_metahtml__soft":"field_metahtml__soft_main","field_metahtml__hard":"field_metahtml__hard_variables"},"toggles":{"field_metahtml":"soft"}},"state":{},"components":{},"templates":{"cont":{"sources":[],"datamix":{"cont":"3.3"},"tplname":"cont"},"text":{"html":"<p>Редактируемый текст</p>","datamix":{"html":"3.3"},"tplname":"text"},"icon":{"handlers":"rawsvgicon","vals":{"src":{"file":"//s.lpcdn.site/img/icons-simple-thin/49--black.png","pack":"icons-simple-thin","size":[256,256],"svg":"<style type=\"text/css\"><![CDATA[ .st0{fill:none;stroke:#231F20;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} ]]></style><polygon class=\"st0\" points=\"30.001,2.421 38.965,20.576 59,23.49 44.499,37.622 47.922,57.579 30.001,48.156 12.076,57.579 15.5,37.622 1,23.49 21.041,20.576 \"/>","datamix":{"img":"3.3"}}},"datamix":{"rawsvgicon":"3.3"},"tplname":"icon"},"image":{"handlers":"rawimage","vals":{"src":{"file":"//f1.lpcdn.site/63d3a6c9689d0a310bdb33ba48a9f341/194594eafe8a83db5eb472d202544c73.png","size":[477,500],"pack":"users","datamix":{"img":"3.3"}}},"datamix":{"rawimage":"3.3"},"tplname":"image"}},"value":{"name":"","phone":"","email":"","count":"0","slider":"0","text":"","textarea":"","checkbox-input":false,"radio-list":[false,false,false],"radio-visual":[true,false,false],"checkbox-list":[false,false,false],"checkbox-visual":[false,false,false],"select-menu":[false,false,false],"hidden":"","hackable":"","result":0,"file":"","privacy-checkbox":false},"cont":{"sources":[],"datamix":{"cont":"3.3"}}},"multilandings":[],"locked":false,"locks":0,"variants":[],"redactor":"3.3.2"}

Переходим к настройке формы в редакторе, вставляем скопированный код импортом в любое поле формы:

Во вкладке Расширение, в поле Ключ сайта вставляем Ключ клиента, полученный из Yandex SmartCaptcha.

После того как компонент поля с каптчей появился в форме и вставили ключ клиента, публикуем страницу и проверяем результат:

Готово, теперь сайт защищен от возможного спама заявками.