About Teletype
Join
Андрей Мазур
@andrey_tech
January 16, 2024

Код для красивого виджета в GetCourse (с инструкцией)

Всем привет! На своем YouTube-канале в недавнем видео я обещал скинуть шаблон кода красивого виджета. Обещал - делаю)

Содержание статьи:

Инструкция

  1. Создаём новый виджет
  2. Импортируем блок вставляя "Код для импорта", который под инструкцией.
  3. Меняем цвет виджета в html-блоке в разделе "Части формы"
  4. Донастраиваем оплату или регистрацию на вебинар: меняем текст, предложения, действия в обработчике.
  5. Готово 🎉

Видео-инструкция

Код для импорта

eyJ0eXBlIjoiZm9ybS1ub3JtYWwiLCJwcmVzZXQiOiJmb3JtMDIiLCJwYXJhbXMiOiJ7XCJmb3JtXCI6e1wiaXRlbXNcIjp7XCJwYXJ0c1wiOntcImhlYWRlcjFcIjp7XCJpbm5lclwiOntcImhlYWRlclNpemVcIjpcIjM2XCIsXCJ0ZXh0XCI6XCI8cD48c3BhbiBjbGFzcz1cXFwicmVkYWN0b3ItaW5saW5lLWNvbnZlcnRlZFxcXCI+XFx1MDQyMlxcdTA0MzBcXHUwNDQwXFx1MDQzOFxcdTA0NDQgPGJyPlxcdTAwYWJWSVBcXHUwMGJiPFxcL3NwYW4+PFxcL3A+XCIsXCJ0ZXh0VHJhbnNmb3JtXCI6XCJcIixcInRhZ05hbWVcIjpcIlwifSxcIm5hbWVcIjpcImhlYWRlcjFcIixcInBhcnRUeXBlXCI6XCJoZWFkZXJcIixcImhBbGlnblwiOlwidGV4dC1jZW50ZXJcIixcIm1hcmdpblRvcFwiOlwiXCIsXCJtYXJnaW5Cb3R0b21cIjpcIjUwXCIsXCJ0ZXh0Q29sb3JcIjpcIlwiLFwibGluZUhlaWdodFwiOlwiXCIsXCJlbGVtZW50Q3NzQ2xhc3NcIjpcIlwifSxcImZpZWxkNDgwNDRcIjp7XCJpbm5lclwiOntcIm9mZmVyX2lkXCI6XCI1MjU5NDIyXCIsXCJzaG93XCI6XCIwXCIsXCJjaGVja2VkQnlEZWZhdWx0XCI6XCIwXCIsXCJkZWZhdWx0UXVhbnRpdHlcIjpcIjFcIn0sXCJuYW1lXCI6XCJmaWVsZDQ4MDQ0XCIsXCJwYXJ0VHlwZVwiOlwicG9zaXRpb25cIixcImhBbGlnblwiOlwiXCIsXCJtYXJnaW5Ub3BcIjpcIlwiLFwibWFyZ2luQm90dG9tXCI6XCI1cHhcIixcInRleHRDb2xvclwiOlwiXCIsXCJsaW5lSGVpZ2h0XCI6XCJcIixcImVsZW1lbnRDc3NDbGFzc1wiOlwiXCJ9LFwibmFtZUZpZWxkXCI6e1wiaW5uZXJcIjp7XCJmaWVsZFR5cGVcIjpcImZpcnN0X25hbWVcIixcImFkZGl0aW9uYWxGaWVsZE5hbWVcIjpcIlwiLFwiYWRkaXRpb25hbEZpZWxkVHlwZVwiOlwic3RyaW5nXCIsXCJ0aXRsZVwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXFx1MDQxMlxcdTA0MzJcXHUwNDM1XFx1MDQzNFxcdTA0MzhcXHUwNDQyXFx1MDQzNSBcXHUwNDMyXFx1MDQzMFxcdTA0NDhcXHUwNDM1IFxcdTA0MzhcXHUwNDNjXFx1MDQ0ZlwiLFwic2l6ZVwiOlwiXCJ9LFwibmFtZVwiOlwibmFtZUZpZWxkXCIsXCJwYXJ0VHlwZVwiOlwidXNlckZpZWxkXCIsXCJoQWxpZ25cIjpcIlwiLFwibWFyZ2luVG9wXCI6XCJcIixcIm1hcmdpbkJvdHRvbVwiOlwiXCIsXCJ0ZXh0Q29sb3JcIjpcIlwiLFwibGluZUhlaWdodFwiOlwiXCIsXCJlbGVtZW50Q3NzQ2xhc3NcIjpcImlucHV0LW5hbWVcIn0sXCJlbWFpbEZpZWxkXCI6e1wiaW5uZXJcIjp7XCJmaWVsZFR5cGVcIjpcImVtYWlsXCIsXCJhZGRpdGlvbmFsRmllbGROYW1lXCI6XCJcIixcImFkZGl0aW9uYWxGaWVsZFR5cGVcIjpcInN0cmluZ1wiLFwidGl0bGVcIjpcIlwiLFwicGxhY2Vob2xkZXJcIjpcIlxcdTA0MTJcXHUwNDMyXFx1MDQzNVxcdTA0MzRcXHUwNDM4XFx1MDQ0MlxcdTA0MzUgXFx1MDQzMlxcdTA0MzBcXHUwNDQ4IFxcdTA0NGRcXHUwNDNiLiBcXHUwNDMwXFx1MDQzNFxcdTA0NDBcXHUwNDM1XFx1MDQ0MVwiLFwic2l6ZVwiOlwiXCIsXCJyZXF1aXJlZFwiOlwiMVwifSxcIm5hbWVcIjpcImVtYWlsRmllbGRcIixcInBhcnRUeXBlXCI6XCJ1c2VyRmllbGRcIixcImhBbGlnblwiOlwiXCIsXCJtYXJnaW5Ub3BcIjpcIlwiLFwibWFyZ2luQm90dG9tXCI6XCJcIixcInRleHRDb2xvclwiOlwiXCIsXCJsaW5lSGVpZ2h0XCI6XCJcIixcImVsZW1lbnRDc3NDbGFzc1wiOlwiaW5wdXQtbWFpbFwifSxcInBob25lRmllbGRcIjp7XCJpbm5lclwiOntcImZpZWxkVHlwZVwiOlwicGhvbmVcIixcImFkZGl0aW9uYWxGaWVsZE5hbWVcIjpcIlwiLFwiYWRkaXRpb25hbEZpZWxkVHlwZVwiOlwic3RyaW5nXCIsXCJ0aXRsZVwiOlwiXCIsXCJwbGFjZWhvbGRlclwiOlwiXFx1MDQxMlxcdTA0MzJcXHUwNDM1XFx1MDQzNFxcdTA0MzhcXHUwNDQyXFx1MDQzNSBcXHUwNDMyXFx1MDQzMFxcdTA0NDggXFx1MDQ0MlxcdTA0MzVcXHUwNDNiXFx1MDQzNVxcdTA0NDRcXHUwNDNlXFx1MDQzZFwiLFwic2l6ZVwiOlwiXCIsXCJyZXF1aXJlZFwiOlwiMVwifSxcIm5hbWVcIjpcInBob25lRmllbGRcIixcInBhcnRUeXBlXCI6XCJ1c2VyRmllbGRcIixcImhBbGlnblwiOlwiXCIsXCJtYXJnaW5Ub3BcIjpcIlwiLFwibWFyZ2luQm90dG9tXCI6XCJcIixcInRleHRDb2xvclwiOlwiXCIsXCJsaW5lSGVpZ2h0XCI6XCJcIixcImVsZW1lbnRDc3NDbGFzc1wiOlwiaW5wdXQtcGhvbmVcIn0sXCJzdWJtaXRCdXR0b25cIjp7XCJpbm5lclwiOntcInRpdGxlXCI6XCJcXHUwNDFmXFx1MDQzNVxcdTA0NDBcXHUwNDM1XFx1MDQzOVxcdTA0NDJcXHUwNDM4IFxcdTA0M2EgXFx1MDQzZVxcdTA0M2ZcXHUwNDNiXFx1MDQzMFxcdTA0NDJcXHUwNDM1XCIsXCJidXR0b25TaXplXCI6XCJtZFwiLFwiY29sb3JcIjpcIlwiLFwiYmdjb2xvclwiOlwiXCIsXCJib3hTaGFkb3dDb2xvclwiOlwiXCIsXCJib3JkZXJSYWRpdXNcIjpcIlwifSxcIm5hbWVcIjpcInN1Ym1pdEJ1dHRvblwiLFwicGFydFR5cGVcIjpcImJ1dHRvblwiLFwiaEFsaWduXCI6XCJ0ZXh0LWNlbnRlclwiLFwibWFyZ2luVG9wXCI6XCI1MFwiLFwibWFyZ2luQm90dG9tXCI6XCJcIixcInRleHRDb2xvclwiOlwiXCIsXCJsaW5lSGVpZ2h0XCI6XCJcIixcImVsZW1lbnRDc3NDbGFzc1wiOlwiXCJ9LFwiZmllbGQ4MDUzMlwiOntcImlubmVyXCI6e1widmFsdWVcIjpcIjxzY3JpcHQgc3JjPVxcXCJodHRwczpcXC9cXC9mcy5nZXRjb3Vyc2UucnVcXC9maWxlc2VydmljZVxcL2ZpbGVcXC9kb3dubG9hZFxcL2FcXC82NTYxMDBcXC9zY1xcLzIzNFxcL2hcXC9mN2Q5M2VhMWU3ZDZmYzEzYzI5ZjEwNjBkNTgwYTIwZC5qc1xcXCIgZGVmZXI+PFxcL3NjcmlwdD5cXHJcXG48c2NyaXB0PlxcclxcbiQoZnVuY3Rpb24oKXsgIFxcclxcbiAgICAgICAgcGhvbmVBdXRvTWFzaygnaW5wdXRbbmFtZT1cXFwiZm9ybVBhcmFtc1twaG9uZV1cXFwiXScsIHtcXHJcXG4gICAgICAgICAgICBmYWxsYmFja0NvdW50cnk6ICdydScsXFxyXFxuICAgICAgICAgICAgbDEwbjogJ3J1JyxcXHJcXG4gICAgICAgICAgICBpbnRsVGVsSW5wdXQ6IHtcXHJcXG4gICAgICAgICAgICAgICAgcHJlZmVycmVkQ291bnRyaWVzOiBbJ3J1JywgJ3VhJywgJ2J5JywgJ2t6J10sXFxyXFxuICAgICAgICAgICAgfSxcXHJcXG4gICAgICAgIH0pO1xcclxcbn0pO1xcclxcbjxcXC9zY3JpcHQ+XFxyXFxuPHN0eWxlPlxcclxcbjpyb290IHtcXHJcXG4gIC0td2lnZXQtY29sb3I6ICM1QzQ3OUI7XFxyXFxufVxcclxcbjxcXC9zdHlsZT5cIn0sXCJuYW1lXCI6XCJmaWVsZDgwNTMyXCIsXCJwYXJ0VHlwZVwiOlwiaHRtbFwiLFwiaEFsaWduXCI6XCJcIixcIm1hcmdpblRvcFwiOlwiXCIsXCJtYXJnaW5Cb3R0b21cIjpcIlwiLFwidGV4dENvbG9yXCI6XCJcIixcImxpbmVIZWlnaHRcIjpcIlwiLFwiZWxlbWVudENzc0NsYXNzXCI6XCJcIn19fSxcImhhbmRsZXJcIjpcIlwiLFwiZm9ybUJveFwiOntcImJnY29sb3JcIjpcIiNGMEYwRjBcIixcImNvbG9yXCI6XCJcIixcImJnaW1hZ2VcIjp7XCJoYXNoXCI6XCJcIn0sXCJib3JkZXJcIjp7XCJ3aWR0aFwiOlwiMHB4XCIsXCJ0eXBlXCI6XCJzb2xpZFwiLFwiY29sb3JcIjpcIiM5OTk5OTlcIixcInJhZGl1c1wiOlwiXCJ9LFwicGFkZGluZ3NcIjp7XCJob3Jpem9udGFsXCI6XCI0MHB4XCIsXCJ2ZXJ0aWNhbFwiOlwiMzBweFwifSxcImZsZXhEaXJlY3Rpb25cIjpcImNvbHVtblwiLFwidGV4dEFsaWduXCI6XCJcIn19LFwiYmxvY2tDb2RlXCI6XCJiYjdlMFwiLFwidmlld0Jsb2NrTGVmdE9mZnNldFwiOlwiMlwiLFwidmlld0Jsb2NrV2lkdGhcIjpcIjhcIixcImJsb2NrUGFkZGluZ1RvcFwiOlwiMVwiLFwiYmxvY2tQYWRkaW5nQm90dG9tXCI6XCIxXCIsXCJibG9ja0JhY2tncm91bmRDb2xvclwiOlwiXCIsXCJibG9ja0ZvcmVncm91bmRDb2xvclwiOlwiXCIsXCJibG9ja0Nzc0NsYXNzXCI6XCJcIixcImJsb2NrQ292ZXJcIjp7XCJpbWFnZVwiOntcImhhc2hcIjpcIlwifSxcImJhY2tncm91bmRUeXBlXCI6XCJzY3JvbGxcIixcImhlaWdodFwiOlwiMTAwdmhcIixcInZpZGVvXCI6e1wic3JjX3ZpZGVvX2xpbmtcIjpcIlwiLFwiYXV0b3BsYXlcIjpcIjBcIixcInZpbWVvX2hhc2hcIjpcIlwifSxcImJhY2tncm91bmRPcGFjaXR5U3RhcnRcIjpcIjAuM1wiLFwiYmFja2dyb3VuZE9wYWNpdHlGaW5pc2hcIjpcIjAuNlwifSxcImJveFwiOntcImJnY29sb3JcIjpcIiNGMEYwRjBcIixcImNvbG9yXCI6XCJcIixcImJnaW1hZ2VcIjp7XCJoYXNoXCI6XCJcIn0sXCJib3JkZXJcIjp7XCJ3aWR0aFwiOlwiMHB4XCIsXCJ0eXBlXCI6XCJzb2xpZFwiLFwiY29sb3JcIjpcIiM5OTk5OTlcIixcInJhZGl1c1wiOlwiXCJ9LFwicGFkZGluZ3NcIjp7XCJob3Jpem9udGFsXCI6XCI0MHB4XCIsXCJ2ZXJ0aWNhbFwiOlwiMzBweFwifX0sXCJpc01vZGFsXCI6e1wicG9wdXBUeXBlXCI6XCJwb3B1cFwiLFwibW9kYWxXaWR0aFwiOlwiXCIsXCJtb2RhbENsYXNzXCI6XCJcIn0sXCJibG9ja0xpbmtDb2xvclwiOlwiXCIsXCJibG9ja0ZvbnRcIjpcIlwiLFwiYmxvY2tGb250SGVhZGVyXCI6XCJcIixcImJsb2NrQ2xpY2tBY3Rpb25cIjp7XCJ0eXBlXCI6XCJcIixcImxpbmtcIjpcIlwiLFwiamF2YXNjcmlwdFwiOlwiXCIsXCJjaGF0aXVtUmVmdW5uZWxzXCI6XCJcIixcImNoYXRpdW1SZWZ1bm5lbHNDb2RlXCI6XCJcIixcImZvcm1UeXBlXCI6XCJzdWJzY3JpYmVcIixcInBvc2l0aW9uXCI6e1wib2ZmZXJfaWRcIjpcIlwifSxcImZvcm1UaXRsZVwiOlwiXCIsXCJmb3JtQnV0dG9uVGl0bGVcIjpcIlwiLFwiZm9ybUJsb2NrQ29kZVwiOlwiXCIsXCJtb2RhbEJsb2NrQ29kZVwiOlwiXCJ9LFwiYmxvY2tGbGV4XCI6e1wiYmFzaXNcIjpcIlwiLFwic2hyaW5rXCI6XCJcIixcImdyb3dcIjpcIlwifX0iLCJjc3MiOiJAaW1wb3J0IHVybChodHRwczovL2RiLm9ubGluZXdlYmZvbnRzLmNvbS9jLzFhYzNmMjQ4N2UyNzUyY2E3M2Q1YzZhYjEzYTRiMzZmP2ZhbWlseT1IZWx2ZXRpY2FOZXVlQ3lyLU1lZGl1bSk7XG5AaW1wb3J0IHVybCgnaHR0cHM6Ly9mb250cy5jZG5mb250cy5jb20vY3NzL21vbnRzZXJyYXQtYWx0ZXJuYXRlcycpO1xuQGltcG9ydCB1cmwoJ2h0dHBzOi8vZm9udHMuY2RuZm9udHMuY29tL2Nzcy9pbnRlcicpO1xuXG4uaXRpIHt3aWR0aDoxMDAlO31cbi5pdGlfX2ZsYWctY29udGFpbmVye2Rpc3BsYXk6bm9uZSFJbXBvcnRhbnQ7fVxuXG4uZm9ybS1yZXN1bHQtYmxvY2suZXJyb3J7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0td2lnZXQtY29sb3IpO1xuICAgIGNvbG9yOiAjRkZGRkZGO1xuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcbiAgICBwYWRkaW5nOiAxMHB4O1xuICAgIGJvcmRlci1yYWRpdXM6IDIwcHg7XG59XG5cbnAgeyBcbiAgICBmb250LWZhbWlseTogXCJIZWx2ZXRpY2FOZXVlQ3lyLU1lZGl1bVwiO1xuICAgIGZvbnQtc3R5bGU6IG5vcm1hbDtcbiAgICBmb250LXdlaWdodDogYm9sZDtcblx0bGluZS1oZWlnaHQ6IDU1cHg7XG5cdGNvbG9yOiB2YXIoLS13aWdldC1jb2xvcik7XG59IFxuXG4uZm9ybS1wb3NpdGlvbiB7IFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRwYWRkaW5nOiA4cHggMTJweCA4cHggMTVweDtcbn0gXG5cbi5mb3JtLXBvc2l0aW9uLnNlbGVjdGVkIHsgXG5cdGJhY2tncm91bmQtY29sb3I6ICNCODE3MzA1MDtcblx0Ym9yZGVyLXJhZGl1czogMTZweDtcbn0gXG5cbi5vZmZlci10aXRsZSB7IFxuXHRmb250LWZhbWlseTogJ01vbnRzZXJyYXQgQWx0ZXJuYXRlcyc7XG5cdGZvbnQtd2VpZ2h0OiA2MDA7XG5cdGZvbnQtc2l6ZTogMjBweDtcblx0bGluZS1oZWlnaHQ6IDI0cHg7XG5cdGxldHRlci1zcGFjaW5nOiAtMC4wMmVtO1xuXHRjb2xvcjogIzFCMUQyMTtcblx0b3BhY2l0eTogMC44O1xufSBcblxuLmZpbmFsLXByaWNlIHsgXG5cdHBhZGRpbmctbGVmdDogMjRweDtcblx0Zm9udC1mYW1pbHk6ICdNb250c2VycmF0IEFsdGVybmF0ZXMnO1xuXHRmb250LXdlaWdodDogNjAwO1xuXHRmb250LXNpemU6IDMwcHg7XG5cdGxpbmUtaGVpZ2h0OiA0MHB4O1xuXHR0ZXh0LWFsaWduOiByaWdodDtcblx0bGV0dGVyLXNwYWNpbmc6IC0wLjAyZW07XG5cdGNvbG9yOiAjMUIxRDIxO1xuXHRvcGFjaXR5OiAwLjg7XG59IFxuXG4uZi1idG4geyBcblx0cGFkZGluZzogMjBweCA5NHB4O1xuICAgIGZvbnQtZmFtaWx5OiBcIkhlbHZldGljYU5ldWVDeXItTWVkaXVtXCI7XG4gICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG5cdGZvbnQtc2l6ZTogMjBweDtcblx0bGluZS1oZWlnaHQ6IDI0cHg7XG5cdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdGJhY2tncm91bmQ6IHZhcigtLXdpZ2V0LWNvbG9yKTtcblx0Ym9yZGVyOiAxcHggc29saWQgdmFyKC0td2lnZXQtY29sb3IpO1xuXHRib3JkZXItcmFkaXVzOiAxMHB4O1xuXHRjb2xvcjogI2ZmZjtcblx0ZmlsdGVyOiBkcm9wLXNoYWRvdygwcHggMnB4IDE0cHggdmFyKC0td2lnZXQtY29sb3IpKTtcbn0gXG5cbi5mLWlucHV0IHsgXG5cdHBhZGRpbmc6IDEycHggMHB4IDE0cHggNDhweDtcblx0Ym9yZGVyOiBub25lO1xuXHRib3JkZXItYm90dG9tOiAxcHggc29saWQgdmFyKC0td2lnZXQtY29sb3IpO1xufSBcblxuLmZpZWxkLWNvbnRlbnQgaW5wdXQ6Zm9jdXMgeyBcblx0cmVzaXplOiBub25lO1xuXHRib3JkZXI6IG5vbmU7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xuXHRib3JkZXItYm90dG9tOiAxcHggc29saWQgdmFyKC0td2lnZXQtY29sb3IpO1xufSBcblxuaW5wdXRbcGxhY2Vob2xkZXJdIHsgXG5cdGZvbnQtZmFtaWx5OiAnSW50ZXInO1xuXHRmb250LXdlaWdodDogNTAwO1xuXHRmb250LXNpemU6IDE4cHg7XG5cdGxpbmUtaGVpZ2h0OiAyMnB4O1xuXHRjb2xvcjogdmFyKC0td2lnZXQtY29sb3IpO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICNGRkZGRkYwMDtcbn0gXG5cbi5maWVsZC1jb250ZW50IHsgXG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcbn0gXG5cbi5pbnB1dC1uYW1lIC5maWVsZC1jb250ZW50OjphZnRlciB7IFxuXHRjb250ZW50OiAnXFxmMmMwJztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRjb2xvcjogdmFyKC0td2lnZXQtY29sb3IpO1xuXHRmb250LWZhbWlseTogJ0ZvbnRBd2Vzb21lJztcblx0Zm9udC1zaXplOiAyNHB4O1xuXHR0b3A6IDUwJTtcblx0bGVmdDogMDtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpO1xufSBcblxuLmlucHV0LXBob25lIC5maWVsZC1jb250ZW50OjphZnRlciB7IFxuXHRjb250ZW50OiAnXFxmMDk1Jztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRjb2xvcjogdmFyKC0td2lnZXQtY29sb3IpO1xuXHRmb250LWZhbWlseTogJ0ZvbnRBd2Vzb21lJztcblx0Zm9udC1zaXplOiAyNHB4O1xuXHR0b3A6IDUwJTtcblx0bGVmdDogMDtcblx0dHJhbnNmb3JtOiB0cmFuc2xhdGVZKC01MCUpO1xufSBcblxuLmlucHV0LW1haWwgLmZpZWxkLWNvbnRlbnQ6OmFmdGVyIHsgXG5cdGNvbnRlbnQ6ICdcXGYwMDMnO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdGNvbG9yOiB2YXIoLS13aWdldC1jb2xvcik7XG5cdGZvbnQtZmFtaWx5OiAnRm9udEF3ZXNvbWUnO1xuXHRmb250LXNpemU6IDI0cHg7XG5cdHRvcDogNTAlO1xuXHRsZWZ0OiAwO1xuXHR0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoLTUwJSk7XG59IFxuXG4uZm9ybS1wb3NpdGlvbi1pbnB1dCB7IFxuXHRkaXNwbGF5OiBub25lO1xufSBcblxuXG4uZm9ybS1wb3NpdGlvbi10aXRsZSB7IFxuXHRmbGV4OiAyO1xufSBcblxuLmZvcm0tcG9zaXRpb24tcHJpY2UgeyBcblx0ZmxleDogMS4yO1xufVxuXG5AbWVkaWEgKG1heC13aWR0aDogMTEwNnB4KSB7IFxuXHQuZmluYWwtcHJpY2UsIFxuXHQub2ZmZXItdGl0bGUgeyBcblx0XHRmb250LXNpemU6IDEuMWVtO1xuXHR9IFxuXHRcblx0LmJ1aWxkZXJbZGF0YS1wYXRoPVwiZm9ybS9pdGVtc1wiXSB7IFxuXHRcdHBhZGRpbmc6IDIwcHg7XG5cdH1cbn1cblxuQG1lZGlhIChtYXgtd2lkdGg6IDk4MHB4KSB7IFxuI2x0QmxvY2sxNzQ0NzA4NTgwIFxuXHQuZmluYWwtcHJpY2UsXG5cdC5vZmZlci10aXRsZSB7IFxuXHRcdGZvbnQtc2l6ZTogMC45ZW07XG5cdH1cbn1cblxuQG1lZGlhIChtYXgtd2lkdGg6IDgwOXB4KSB7IFxuXHQuYnVpbGRlcltkYXRhLXBhdGg9XCJjb2x1bW4yXCJdIHsgXG5cdFx0ZGlzcGxheTogbm9uZTtcblx0fSBcblx0XG5cdC5sdC1ub3JtYWwtZm9ybSB7IFxuXHRcdHBhZGRpbmctbGVmdDogMTVweDtcblx0fSBcblx0XG5cdC5maW5hbC1wcmljZSxcblx0Lm9mZmVyLXRpdGxlIHsgXG5cdFx0Zm9udC1zaXplOiBpbmhlcml0O1xuXHR9IFxuXHRcblx0LmZvcm0tcG9zaXRpb24tcHJpY2UgeyBcblx0XHR0ZXh0LWFsaWduOiByaWdodDtcblx0fVxufVxuXG5AbWVkaWEgKG1heC13aWR0aDogNTAwcHgpIHsgXG5cdC5mLWJ0biB7IFxuXHRcdHBhZGRpbmc6IDIwcHg7XG5cdFx0d2lkdGg6IDEwMCU7XG5cdH0gXG5cdFxuXHQuZm9ybS1wb3NpdGlvbiB7IFxuXHRcdGZsZXgtd3JhcDogd3JhcDtcblx0fSBcblx0XG5cdC5mb3JtLXBvc2l0aW9uLXByaWNlIHsgXG5cdFx0ZmxleC1iYXNpczogMTAwJTtcblx0fSBcblx0XG5cdC5sdC1ibG9jay13cmFwcGVyIHsgXG5cdFx0cGFkZGluZy10b3A6IDIwcHggIWltcG9ydGFudDtcblx0fVxufSJ9

Или CSS (для продвинутых)

@import url(https://db.onlinewebfonts.com/c/1ac3f2487e2752ca73d5c6ab13a4b36f?family=HelveticaNeueCyr-Medium);
@import url('https://fonts.cdnfonts.com/css/montserrat-alternates');
@import url('https://fonts.cdnfonts.com/css/inter');

.iti {width:100%;}
.iti__flag-container{display:none!Important;}

.form-result-block.error{
    background-color: var(--wiget-color);
    color: #FFFFFF;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
}

p { 
    font-family: "HelveticaNeueCyr-Medium";
    font-style: normal;
    font-weight: bold;
	line-height: 55px;
	color: var(--wiget-color);
} 

.form-position { 
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 8px 12px 8px 15px;
} 

.form-position.selected { 
	background-color: #B8173050;
	border-radius: 16px;
} 

.offer-title { 
	font-family: 'Montserrat Alternates';
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: -0.02em;
	color: #1B1D21;
	opacity: 0.8;
} 

.final-price { 
	padding-left: 24px;
	font-family: 'Montserrat Alternates';
	font-weight: 600;
	font-size: 30px;
	line-height: 40px;
	text-align: right;
	letter-spacing: -0.02em;
	color: #1B1D21;
	opacity: 0.8;
} 

.f-btn { 
	padding: 20px 94px;
    font-family: "HelveticaNeueCyr-Medium";
    font-style: normal;
    font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	text-transform: uppercase;
	background: var(--wiget-color);
	border: 1px solid var(--wiget-color);
	border-radius: 10px;
	color: #fff;
	filter: drop-shadow(0px 2px 14px var(--wiget-color));
} 

.f-input { 
	padding: 12px 0px 14px 48px;
	border: none;
	border-bottom: 1px solid var(--wiget-color);
} 

.field-content input:focus { 
	resize: none;
	border: none;
    outline: none;
    box-shadow: none;
	border-bottom: 1px solid var(--wiget-color);
} 

input[placeholder] { 
	font-family: 'Inter';
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: var(--wiget-color);
    background-color: #FFFFFF00;
} 

.field-content { 
	position: relative;
} 

.input-name .field-content::after { 
	content: '\f2c0';
	position: absolute;
	color: var(--wiget-color);
	font-family: 'FontAwesome';
	font-size: 24px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
} 

.input-phone .field-content::after { 
	content: '\f095';
	position: absolute;
	color: var(--wiget-color);
	font-family: 'FontAwesome';
	font-size: 24px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
} 

.input-mail .field-content::after { 
	content: '\f003';
	position: absolute;
	color: var(--wiget-color);
	font-family: 'FontAwesome';
	font-size: 24px;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
} 

.form-position-input { 
	display: none;
} 


.form-position-title { 
	flex: 2;
} 

.form-position-price { 
	flex: 1.2;
}

@media (max-width: 1106px) { 
	.final-price, 
	.offer-title { 
		font-size: 1.1em;
	} 
	
	.builder[data-path="form/items"] { 
		padding: 20px;
	}
}

@media (max-width: 980px) { 
#ltBlock1744708580 
	.final-price,
	.offer-title { 
		font-size: 0.9em;
	}
}

@media (max-width: 809px) { 
	.builder[data-path="column2"] { 
		display: none;
	} 
	
	.lt-normal-form { 
		padding-left: 15px;
	} 
	
	.final-price,
	.offer-title { 
		font-size: inherit;
	} 
	
	.form-position-price { 
		text-align: right;
	}
}

@media (max-width: 500px) { 
	.f-btn { 
		padding: 20px;
		width: 100%;
	} 
	
	.form-position { 
		flex-wrap: wrap;
	} 
	
	.form-position-price { 
		flex-basis: 100%;
	} 
	
	.lt-block-wrapper { 
		padding-top: 20px !important;
	}
}

Бонус. Оформление виджета в Tilda (вставить под кодом виджета)

<style>
    .t-popup_show .t-popup__container{
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 25px;
}
/* Медиа-запрос для мобильных устройств */
@media (max-width: 768px) {
    .t-popup__close-icon {
        filter: brightness(0);
    }
}
</style>

Бесплатная консультация по техническим настройкам 👇
https://t.me/ma_andrey

Больше наших кейсов и гайдов 👇
https://t.me/tech_cases

Андрей Мазур
January 16, 2024, 08:51
0 views
1 reaction
0 replies
0 reposts