Как поменять кнопку uploadcare в тильде
Перейти к содержимому

Как поменять кнопку uploadcare в тильде

  • автор:

Как получить ключ сервиса Uploadcare

Мы не предоставляем услугу хранения файлов, поэтому, если вы хотите, чтобы посетители вашего сайта могли в форме приема данных прикрепить файл и отправить его вам (например, резюме) вам нужно воспользоваться внешним сервисом Uploadcare (есть бесплатный план).

disclaimer: сервис Uploadcare не является аффилированным по отношению к Tilda Publishing. В инструкции описана возможность получения ключа сервиса для того, чтобы получать внешние файлы. Мы не гарантируем бесперебойную работу сервиса Uploadcare. Используя сервис Uploadcare, вы соглашаетесь с условиями, которые предлагает поставщик услуг Uploadcare.

Перейдите на https://uploadcare.com и зарегистрируйтесь на сервисе.

У бесплатного аккаунта есть ограничения:
загрузок в месяц: 3000
максимальный размер файла: 10 MB
объем хранилища: 3 GB
пропускная способность: 3 GB

После регистрации и подтверждения почты, вы попадете на Dashboard, где можно создать новый проект или зайти в созданный по умолчанию.

Скопируйте публичный ключ проекта:

Перейдите на Тильду и в меню «Контент» блока с формой укажите ключ.

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

Файл будет отправлен в ваш личный кабинет в Uploadcare.

Чтобы загружать файлы формата .pdf, .doc или другие не графические файлы, необходимо добавить данные платежной карты в настройках Uploadcare по этой инструкции. Как только вы добавите данные карты, вы сможете загружать файлы любого формата.

Платежная информация — это способ идентифицировать пользователя и предотвратить возможность загрузки вирусов или нелегального контента.

При этом сервис обязуется не хранить данные карты и не взымать никаких средств без согласия пользователя, в том числе для проверки карт.

Как настроить форму приема данных

Посмотрите видеоурок о том, как добавить настроить форму или прочитайте подробную инструкцию ниже.

Формы приема данных — блоки с полями, в которых посетители сайта вводят информацию (email, телефон), а вы получаете ее в сервисы приема данных.

Блоки с формами находятся в категории «Форма», также несколько блоков есть в категории «Обложка», «Контакты», «Подвал».

Готовые страницы опросов (форм с множеством полей) можно найти в шаблонах, в категории «Анкеты».

Рассказываем, как настроить поля в формах, отредактировать их внешний вид и как посмотреть полученные заявки внутри интерфейса Тильды.

Редактирование полей формы

В одной форме может быть до 100 полей.

Поля в форме настраиваются в меню «Контент» формы во вкладке «Поля для ввода».

Откройте меню «Контент» блока с формой
Перейдите в раздел «Поля для ввода»

Для каждого поля в форме есть отдельная карточка, в которой можно задать тип поля, заголовок и подзаголовок, подсказку значения, имя переменной и обязательность заполнения поля.

Заголовок поля — напишите, какую информацию нужно ввести, например, «Ваше полное имя». Этот текст выводится над полем.

Подзаголовок поля — если необходимо, расшифруйте заголовок, дайте инструкцию, например, «Укажите имя, фамилию и отчество». Этот текст выводится над полем, после заголовка.

Подсказка значения — напишите пример, как должно быть заполнено поле. Например, «Михайлов Сергей Александрович». Этот текст виден внутри поля до ввода в него данных.

Обязательно для заполнения — поставьте галочку, чтобы невозможно было отправить пустое поле, если наличие информации в этом поле критично.

Имя переменной задается по умолчанию в зависимости от типа поля. Если сервис приема данных из форм требует определенное имя переменной, то его можно поменять. Например, свои заранее заданные имена переменных есть у Mailchimp и Bitrix24.

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

Убрать пиктограмму личного кабинета, добавить свои кнопки «Редактировать профиль» и «Выйти»

Многим не нравится стандартная плашка для действий с личным кабинетом, поэтому её скрывают. Однако это чревато тем, что пользователь не сможет выйти из кабинета или изменить профиль.

Вы можете создать собственные кнопки «Войти» и «Зарегистрироваться», используя стандартные ссылки (или ссылку на регистрацию в определённую группу). А для кнопок «Изменить профиль» и «Выход» потребуется использовать код. Но мы объединили всё это в один скрипт, чтобы вы не мучались. Обратите внимание на другие модификации, которые могут вам пригодиться.

Внимание! Скрипт будет работать только на страницах, которые подключены к личному кабинету.

Выберите, нужно ли скрывать значок профиля со страницы и пропишите ссылку регистрации:

Затем создайте на странице кнопки в Zero-блоке для действий с соответствующими ссылками или в любом блоке маркированный список, где каждая строка — это отдельная текстовая ссылка:
«Изменить профиль» — #profile:edit
«Логин» — #login;
«Регистрация» — #signup;
«Выход» — #logout.

Если какая-то из ссылок не нужна, можете просто не добавлять её.

Скопируйте код и вставьте его в блок T123. Сам блок расположите под задействованными элементами на странице (если ваши ссылки в меню, значит код надо размещать под меню).

 script>const nProjectId=parseInt(document.querySelector("#allrecords").dataset.tildaProjectId),nLsUser=window.localStorage.getItem("tilda_members_profile"+nProjectId),nUserEmail=!(null==nLsUser||!JSON.parse(nLsUser).login)&&JSON.parse(nLsUser).login;let userbarReady=!1;const generateUserbar=()=>const o=document.querySelector(".tlk-userbar"),e=o.querySelector(".tlk-userbar__popup");t=o.querySelector(".tlk-userbar__popup-wrap"),r=o.querySelector(".tlk-userbar__popup-content"),s=o.querySelector(".tlk-userbar__user-image"),tma__userbar__showPreloader(s,t,r),tma__getObjProfile((function( ))),tma__userbar__showWidgetPanel(o,e,t),tma__userbar__calcCoordinatsWidgetPanel(o,e,t);const waitUserbarPopup=e=>"tlk-userbar__popup-login")&&(o.removeEventListener("DOMNodeInserted",waitUserbarPopup),tma__profile__drawProfilePopup(),userbarReady=!0)>;o.addEventListener("DOMNodeInserted",waitUserbarPopup,!1)>,waitUserbar=e=>if(e.target.classList.contains("tlk-userbar"))document.body.removeEventListener("DOMNodeInserted",waitUserbar),generateUserbar();const userbarPopupInterval=setInterval(()=>document.querySelectorAll('[href="#signup"]').forEach(btn=>btn.parentNode.remove()),document.querySelectorAll('[href="#login"]').forEach(btn=>btn.parentNode.remove()),document.querySelectorAll('[href="#profile:edit"]').forEach(btn=>"click",()=>var i=tma__getProfileObjFromLS(),e=tma__profile__getFormEditProfileHtml(i);tma__drawPopup("edit-profile",main:document.getElementById("app"),content:tma__translate(e,"userbar_dict"),closeBtns:[".tlk-popup__close-cancel"]>),tma__profile__addUploadEvents();var p=document.getElementById("edit-profile"),l=document.getElementById("form-change-profile"),e=l.querySelector(".tlk-popup__change-password"),t=l.querySelector(".tlk-popup__change-lang"),o=l.querySelector('button[type="submit"]'),s=!1;i.memberlogo_uuid&&(tildaMembers.upload.id=i.memberlogo_uuid,tildaMembers.upload.oldId=i.memberlogo_uuid),l.addEventListener("submit",(function(e)0<(e=tma__validationFormFields(l)).length?tma__showErrorFields(l,e,"userbar_dict"):((e=tma__serializeArray(l)).projectid=i.projectid,e.token=i.token,e.tzoffset=(new Date).getTimezoneOffset(),tildaMembers.upload&&tildaMembers.upload.id&&(e.memberlogo=tildaMembers.upload.id),tildaMembers.userLang!==t.value&&(e.lang=t.value,s=!0),e=JSON.stringify(e),tma__request("/api/editprofile/",e,o,(function(e)var t;"ok"===e.status&&"object"==typeof e.data?(t=e.data,tildaMembers.upload.id="",i.name=t.name,i.login=t.login,t.memberlogo_uuid?(i.memberlogo=t.memberlogo,i.memberlogo_uuid=t.memberlogo_uuid):(i.memberlogo="",i.memberlogo_uuid=""),tma__showSuccessRequest(l,tma__translate(">","userbar_dict")),t="tilda_members_profile"+i.projectid,localStorage.setItem(t,JSON.stringify(i)),localStorage.setItem(t+"_timestamp",Math.floor(Date.now()/1e3)),s?setTimeout((function( )window.location.reload()>),1e3):tma__userbar__updateDataProfile()):tma__showErrorRequest(l,e.code,"userbar_dict","edit_profile")>)))>)),e.addEventListener("click",(function( )var e=tma__profile__getFormChangePasswordHtml();tma__drawPopup("change-password",main:document.getElementById("app"),content:tma__translate(e,"userbar_dict"),closeBtns:[".tlk-popup__close-cancel"]>);var t=document.getElementById("change-password"),l=document.getElementById("form-change-password"),o=l.querySelector('button[type="submit"]');tma__profile__addButtonShowHidePasswordEvents(l),l.addEventListener("submit",(function(e)0<(e=tma__validationFormFields(l)).length?tma__showErrorFields(l,e,"userbar_dict"):((e=tma__serializeArray(l)).projectid=i.projectid,e.token=i.token,e.tzoffset=(new Date).getTimezoneOffset(),e=JSON.stringify(e),tma__request("/api/editpassword/",e,o,(function(e)"ok"===e.status?(tma__showSuccessRequest(l,tma__translate(">","userbar_dict")),setTimeout((function( )),1e3)):tma__showErrorRequest(l,e.code,"userbar_dict","change_password")>)))>))>))>)>))>,500);document.querySelectorAll('[href="#logout"]').forEach(btn=>"click",(function(e)window.localStorage.removeItem("tilda_members_profile"+nProjectId),window.localStorage.removeItem("tilda_members_profile"+nProjectId+"_timestamp"),window.location.replace("/")>))>)>>;document.addEventListener("DOMContentLoaded",()=>document.body.addEventListener("DOMNodeInserted",waitUserbar,!1):(document.querySelectorAll('[href="#signup"]').forEach(btn=>btn.setAttribute("href","/members/signup/")),document.querySelectorAll('[href="#login"]').forEach(btn=>btn.setAttribute("href","/members/login/")),document.querySelectorAll('[href="#logout"]').forEach(btn=>btn.parentNode.remove()),document.querySelectorAll('[href="#profile:edit"]').forEach(btn=>btn.parentNode.remove()))>); script> style>.tlk-userbar, .tlk__userbar display: none !important;> style>

как стилизовать поле загрузки файлов в любой форме tilda?

Модификация может кастомизировать поле загрузки файлов, загрузить свою иконку, размер и цвет текста, цвет фона до и после загрузки, тип и толщину бордера.

  • Генератор кода
  • Видеоинструкция
  • Пример

Загрузи свой файл
Прикрепи файл и увидишь как работает кнопка загрузки
Инструкция (Развернуть↓)

1. Если нужно чтобы все поля загрузки во всех формах на сайте были одинаковыми, то можно не указывать id блока формы или Zero блока в которой находится форма;

2. Настраиваешь стили кнопки: цвет текста, фона, бордера, толщина и тип обводки, радиус скругления, размер и насыщенность текста внутри кнопки;

3. Настраиваешь дополнительный текст кнопки, сам текст, цвет, размер и насыщенность;

4. Вставляешь галерею GL12 и загружаешь в неё свою иконку «загрузка». Переходишь по ссылке и копируешь её. Вставляешь в генератор. Формат файла советуем использовать svg;

5. Настраиваешь стили кнопки при наведении;

6. Настраиваешь стиль кнопки при статусе «Файл загружен»;

7. Добавляешь блок Т123 и вставляешь в него сгенерированный HTML код на страницу, где находится форма или в шапку сайта.

ВАЖНО: Модификация не работает с Uploadcare!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *