Instagram Leads Form

Простая форма для сбора лидов из Instagram с автоматическим сохранением в Google Sheets.

🚀 Возможности

• ✅ Минимальная форма с двумя полями: имя и телефон
• 📱 Полностью адаптивный дизайн для мобильных устройств
• 🔗 Автоматическое сохранение данных в Google Sheets
• ✨ Современный и красивый UI/UX
• 🔒 Валидация данных на клиенте и сервере
• 📊 Автоматическое форматирование номера телефона
• ⚡ Быстрая загрузка и отзывчивый интерфейс

📋 Требования

• Python 3.7+
• Google Cloud Platform аккаунт
• Google Sheets API доступ

🛠 Установка и настройка

1. Клонирование и установка зависимостей

# Установка зависимостей
pip install -r requirements.txt

2. Настройка Google Sheets API

Автоматическая настройка (рекомендуется):

python setup_google_sheets.py

Скрипт автоматически:

• Создаст новую Google Sheets таблицу
• Настроит заголовки
• Создаст файл .env с конфигурацией
• Предоставит ссылку на таблицу

Ручная настройка:

1. Создайте проект в Google Cloud Console:

   • Перейдите на Google Cloud Console
   • Создайте новый проект или выберите существующий

2. Включите необходимые API:

   • Google Sheets API
   • Google Drive API

3. Создайте Service Account:

   • Перейдите в IAM & Admin > Service Accounts
   • Нажмите "Create Service Account"
   • Заполните название и описание
   • В ролях выберите "Editor"
   • Нажмите "Done"

4. Создайте ключ для Service Account:

   • Найдите созданный Service Account в списке
   • Нажмите на него
   • Перейдите на вкладку "Keys"
   • Нажмите "Add Key" > "Create new key"
   • Выберите "JSON" и нажмите "Create"
   • Скачайте файл и переименуйте его в credentials.json
   • Поместите файл в корень проекта

5. Создайте Google Sheets таблицу:

   • Создайте новую таблицу в Google Sheets
   • Скопируйте ID таблицы из URL
   • Настройте доступ: Поделиться > Расширенный > Доступ: "Все, у кого есть ссылка" > Редактор

6. Создайте файл .env:

GOOGLE_SHEET_ID=your_spreadsheet_id_here
FLASK_ENV=development
FLASK_DEBUG=True
SECRET_KEY=your-secret-key-change-this-in-production

3. Настройка таблицы Google Sheets

В первой строке таблицы создайте заголовки:

A1: Дата и время
B1: Имя  
C1: Телефон

4. Запуск приложения

python app.py

Приложение будет доступно по адресу: http://localhost:5000

📱 Использование

1. Откройте форму в браузере
2. Заполните поля "Имя" и "Телефон"
3. Нажмите "Отправить заявку"
4. Данные автоматически сохранятся в Google Sheets

🎨 Кастомизация

Изменение дизайна

Отредактируйте файл static/css/style.css для изменения:

• Цветовой схемы
• Шрифтов
• Размеров элементов
• Анимаций

Изменение текста

Отредактируйте файл templates/index.html для изменения:

• Заголовков
• Подписей к полям
• Сообщений

Добавление полей

1. Добавьте поле в templates/index.html
2. Обновите валидацию в app.py
3. Добавьте поле в Google Sheets таблицу
4. Обновите sheet.append_row() в функции submit_lead()

🔧 Конфигурация

Переменные окружения

• GOOGLE_SHEET_ID - ID Google Sheets таблицы
• FLASK_DEBUG - Режим отладки (True/False)
• SECRET_KEY - Секретный ключ Flask

Настройка валидации

В файле app.py можно настроить:

• validate_phone() - правила валидации телефона
• validate_name() - правила валидации имени

📊 Структура данных в Google Sheets

Дата и время	Имя	Телефон
2024-01-15 14:30:25	Иван Петров	+7 (999) 123-45-67
2024-01-15 14:32:10	Мария Сидорова	+7 (888) 987-65-43

🚀 Деплой в продакшн

Heroku

1. Создайте Procfile:

web: python app.py

2. Установите переменные окружения в Heroku:

heroku config:set GOOGLE_SHEET_ID=your_sheet_id
heroku config:set SECRET_KEY=your_production_secret_key

3. Загрузите credentials.json как конфиг-переменную

VPS/Сервер

1. Установите зависимости:

pip install -r requirements.txt

2. Настройте веб-сервер (nginx + gunicorn):

pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:8000 app:app

3. Настройте SSL сертификат

🐛 Устранение неполадок

Ошибка "Google Sheets не настроен"

• Убедитесь, что файл credentials.json существует
• Проверьте, что GOOGLE_SHEET_ID указан в .env
• Запустите python setup_google_sheets.py

Ошибка "Ошибка подключения к базе данных"

• Проверьте правильность credentials.json
• Убедитесь, что Service Account имеет доступ к таблице
• Проверьте, что API включены в Google Cloud Console

Форма не отправляется

• Проверьте консоль браузера на ошибки JavaScript
• Убедитесь, что Flask сервер запущен
• Проверьте логи сервера

📝 Лицензия

MIT License

🤝 Поддержка

Если у вас возникли вопросы или проблемы, создайте issue в репозитории.

---

Создано для эффективного сбора лидов из Instagram 🚀