Hugging Face's logo

Spaces:
pixip2015
/
formafzar
Running

App Files Community
formafzar / index.html
pixip2015's picture
pixip2015
لطفا برای صفحه فرمساز یک صفحه جدید طراحی کن و باید تمام بخشهای ان کار کند - Initial Deployment
471e5c5 verified
raw
history blame contribute delete
39.9 kB
 <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>امکانات و ابزارهای فرم ساز تحت وب انلاین | فرم ساز | فرم افزار</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
body {
font-family: 'Vazirmatn', sans-serif;
}
.gradient-bg {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.nav-link:hover {
color: #7c3aed;
}
.btn-primary {
transition: all 0.3s ease;
}
.btn-primary:hover {
background-color: #5b21b6;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-8">
<a href="https://formafzar.com/" class="flex items-center">
<img src="https://formafzar.com/assets/img/logo/formAfzar-logo-fa.png" alt="فرم افزار" class="h-10">
</a>
<nav class="hidden lg:flex space-x-6">
<a href="https://formafzar.com/Features" class="nav-link font-medium text-gray-700 hover:text-purple-600">امکانات</a>
<a href="https://formafzar.com/Pricing" class="nav-link font-medium text-gray-700 hover:text-purple-600">تعرفه</a>
<a href="https://formafzar.com/gallery?type=3&p=%D9%86%D9%85%D9%88%D9%86%D9%87-%D9%81%D8%B1%D9%85" class="nav-link font-medium text-gray-700 hover:text-purple-600">نمونه فرم‌ها</a>
<a href="https://formafzar.com/quiz-builder" class="nav-link font-medium text-gray-700 hover:text-purple-600">آزمون ساز</a>
<a href="https://formafzar.com/Blog" class="nav-link font-medium text-gray-700 hover:text-purple-600">مقالات</a>
<a href="https://formafzar.com/video" class="nav-link font-medium text-gray-700 hover:text-purple-600">ویدئو</a>
<a href="https://formafzar.com/Contact" class="nav-link font-medium text-gray-700 hover:text-purple-600">تماس با ما</a>
</nav>
</div>
<div class="flex items-center space-x-4">
<a href="#" id="open-form-builder" class="btn-primary bg-green-600 text-white px-4 py-2 rounded-md font-medium hover:bg-green-700">فرمساز</a>
<a href="https://formafzar.com/Register" class="btn-primary bg-purple-600 text-white px-4 py-2 rounded-md font-medium">ثبت نام</a>
<a href="https://formafzar.com/Login" class="border border-purple-600 text-purple-600 px-4 py-2 rounded-md font-medium hover:bg-purple-50">ورود</a>
<button class="lg:hidden text-gray-600 focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="lg:hidden bg-white py-2 px-4 shadow-md hidden">
<div class="flex flex-col space-y-3">
<a href="https://formafzar.com/Features" class="nav-link font-medium text-gray-700 hover:text-purple-600">امکانات</a>
<a href="https://formafzar.com/Pricing" class="nav-link font-medium text-gray-700 hover:text-purple-600">تعرفه</a>
<a href="https://formafzar.com/gallery?type=3&p=%D9%86%D9%85%D9%88%D9%86%D9%87-%D9%81%D8%B1%D9%85" class="nav-link font-medium text-gray-700 hover:text-purple-600">نمونه فرم‌ها</a>
<a href="https://formafzar.com/quiz-builder" class="nav-link font-medium text-gray-700 hover:text-purple-600">آزمون ساز</a>
<a href="https://formafzar.com/Blog" class="nav-link font-medium text-gray-700 hover:text-purple-600">مقالات</a>
<a href="https://formafzar.com/video" class="nav-link font-medium text-gray-700 hover:text-purple-600">ویدئو</a>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="gradient-bg text-white py-16">
<div class="container mx-auto px-4 flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">فرم ساز ساده و حرفه‌ای برای شما</h1>
<p class="text-lg mb-8 opacity-90">فرم‌ساز ساده و قدرتمند همراه با توانمندی‌های فراوان شما را در ساخت فرم‌ها یاری می نماید</p>
<a href="https://formafzar.com/Features#" class="btn-primary bg-white text-purple-600 px-6 py-3 rounded-md font-medium inline-block">چگونه کار می‌کند</a>
</div>
<div class="lg:w-1/2 flex justify-center">
<img src="https://formafzar.com/assets/img/Feature/Feature.png" alt="فرم ساز فرم افزار" class="w-full max-w-lg">
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">ویژگی‌های فرم ساز</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-paint-brush text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold">طراحی آسان فرم کلاسیک و مرحله‌ای</h3>
</div>
<p class="text-gray-600">استفاده آسان از ابزارهای فرم‌ساز در ساخت فرم های خطی و کلاسیک</p>
</div>
<!-- Feature 2 -->
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-bolt text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold">پویا</h3>
</div>
<p class="text-gray-600">به صورت پویا فیلدهای فرم به انتخاب های واکشن نشان می‌دهد</p>
</div>
<!-- Feature 3 -->
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-credit-card text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold">پرداخت آنلاین</h3>
</div>
<p class="text-gray-600">قابلیت پرداخت آنلاین در فرم</p>
</div>
<!-- Feature 4 -->
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fab fa-wordpress text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold">آسان در وردپرس و جوملا</h3>
</div>
<p class="text-gray-600">استفاده کاملا آسان در وردپرس و جوملا برای نمایش فرم در وب سایت شما</p>
</div>
<!-- Feature 5 -->
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-calculator text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold">فرمول نویسی و محاسبه‌گر</h3>
</div>
<p class="text-gray-600">فرمول نویسی در فرم ساز و محاسبات ریاضی به صورت خودکار بر اساس مقادیر فیلدها</p>
</div>
<!-- Feature 6 -->
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i class="fas fa-comments text-purple-600 text-xl"></i>
</div>
<h3 class="text-xl font-semibold">گفتگوی آنلاین در فرم</h3>
</div>
<p class="text-gray-600">هنگام نمایش فرم، بصورت زنده با ثبت کننده‌ی فرمتان گفتگو کنید.</p>
</div>
</div>
</div>
</section>
<!-- System Features -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">امکانات سیستم فرم ساز</h2>
<p class="text-center text-lg mb-12 max-w-3xl mx-auto">با ابزارهای مختلف می‌تونین هر نوع فرمی که لازم دارین طراحی کنین</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- System Feature 1 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold mb-3">شرط گذاری</h3>
<p class="text-gray-600 mb-4">تعیین شرط برای فیلد‌های فرم</p>
<a href="https://formafzar.com/%D8%B1%D8%A7%D9%87%D9%86%D9%85%D8%A7%DB%8C-%D8%B4%D8%B1%D8%B7-%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C" class="text-purple-600 font-medium flex items-center">
بیشتر بدانید
<i class="fas fa-arrow-left mr-2"></i>
</a>
</div>
<!-- System Feature 2 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold mb-3">تنظیم زمینه نمایش</h3>
<p class="text-gray-600 mb-4">فرم‌های زیبا و مطابق با برند و نام تجاری طراحی کنید</p>
<a href="https://formafzar.com/%D9%82%D8%A7%D9%84%D8%A8-%D8%A8%D9%86%D8%AF%DB%8C-%D9%81%D8%B1%D9%85" class="text-purple-600 font-medium flex items-center">
بیشتر بدانید
<i class="fas fa-arrow-left mr-2"></i>
</a>
</div>
<!-- System Feature 3 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold mb-3">واکنش گرا</h3>
<p class="text-gray-600 mb-4">متناسب با ابزار مشاهده</p>
</div>
<!-- System Feature 4 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold mb-3">فرم‌های چندمرحله‌ای</h3>
<p class="text-gray-600 mb-4">امکان ایجاد فرم به صورت چند مرحله‌ای</p>
<a href="https://formafzar.com/%D9%81%D8%B1%D9%85-%D9%85%D8%B1%D8%AD%D9%84%D9%87-%D8%A7%DB%8C" class="text-purple-600 font-medium flex items-center">
بیشتر بدانید
<i class="fas fa-arrow-left mr-2"></i>
</a>
</div>
<!-- System Feature 5 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold mb-3">نقشه گوگل</h3>
<p class="text-gray-600 mb-4">پشتیبانی از نقشه گوگل</p>
<a href="https://formafzar.com/%D8%AB%D8%A8%D8%AA-%D9%85%DA%A9%D8%A7%D9%86-%D8%A8%D8%B1-%D8%B1%D9%88%DB%8C-%D9%86%D9%82%D8%B4%D9%87" class="text-purple-600 font-medium flex items-center">
بیشتر بدانید
<i class="fas fa-arrow-left mr-2"></i>
</a>
</div>
<!-- System Feature 6 -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
<h3 class="text-xl font-semibold mb-3">پرداخت آنلاین</h3>
<p class="text-gray-600 mb-4">امکان پرداخت آنلاین در فرم‌ها</p>
<a href="https://formafzar.com/%D9%BE%D8%B1%D8%AF%D8%A7%D8%AE%D8%AA-%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86-%D9%81%D8%B1%D9%85-%D8%B3%D8%A7%D8%B2" class="text-purple-600 font-medium flex items-center">
بیشتر بدانید
<i class="fas fa-arrow-left mr-2"></i>
</a>
</div>
</div>
<div class="text-center mt-12">
<a href="#" class="btn-primary bg-purple-600 text-white px-6 py-3 rounded-md font-medium inline-block">مشاهده تمام امکانات</a>
</div>
</div>
</section>
<!-- Tools Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">ابزارها</h2>
<p class="text-center text-lg mb-12 max-w-3xl mx-auto">بیش از 30 ابزار مختلف برای طراحی فرم</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Basic Tools -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-6 pb-3 border-b border-gray-200">ابزارهای پایه</h3>
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد متن</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد ایمیل</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد تاریخ</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد عدد</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد موبایل</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد ساعت</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد متن چند‌خطی</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد تلفن</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد برچسب</span>
</li>
</ul>
</div>
<!-- Advanced Tools -->
<div class="bg-gray-50 p-6 rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-6 pb-3 border-b border-gray-200">ابزارهای پیشرفته</h3>
<ul class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد جدول انتخابی</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>ویرایشگر متن</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد رتبه</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد شرایط استفاده</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>امضاء دیجیتال</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد رضایتمندی</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>لیست‌های مرتبط</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>مالتی‌مدیا</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-purple-600 mr-2"></i>
<span>فیلد نقشه</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- SMS Panels -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">امکان اتصال به پنل های پیامک</h2>
<p class="text-center text-lg mb-12 max-w-3xl mx-auto">ارسال پیامک به ثبت کننده فرم با شماره دلخواه شما</p>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
<!-- SMS Panel 1 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex flex-col items-center">
<img src="https://formafzar.com/assets/img/SmsSender/adp.jpg" alt="آتیه داده پرداز" class="h-16 mb-3">
<h3 class="text-center font-medium">آتیه داده پرداز</h3>
<p class="text-sm text-gray-500 mt-1">AdpDigital</p>
</div>
<!-- SMS Panel 2 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex flex-col items-center">
<img src="https://formafzar.com/assets/img/SmsSender/ipsms.jpg" alt="ایده پردازان" class="h-16 mb-3">
<h3 class="text-center font-medium">ایده پردازان</h3>
<p class="text-sm text-gray-500 mt-1">sms.ir</p>
</div>
<!-- SMS Panel 3 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex flex-col items-center">
<img src="https://formafzar.com/assets/img/SmsSender/rahyab.jpg" alt="رهیاب" class="h-16 mb-3">
<h3 class="text-center font-medium">رهیاب</h3>
<p class="text-sm text-gray-500 mt-1">rahyab</p>
</div>
<!-- SMS Panel 4 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex flex-col items-center">
<img src="https://formafzar.com/assets/img/SmsSender/farapayamak.jpg" alt="فراپیامک" class="h-16 mb-3">
<h3 class="text-center font-medium">فراپیامک</h3>
<p class="text-sm text-gray-500 mt-1">farapayamak</p>
</div>
<!-- SMS Panel 5 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex flex-col items-center">
<img src="https://formafzar.com/assets/img/SmsSender/ghasedak-ict.jpg" alt="قاصدک" class="h-16 mb-3">
<h3 class="text-center font-medium">قاصدک</h3>
<p class="text-sm text-gray-500 mt-1">ghasedak</p>
</div>
<!-- SMS Panel 6 -->
<div class="bg-white p-4 rounded-lg shadow-sm flex flex-col items-center">
<img src="https://formafzar.com/assets/img/SmsSender/kavenegar.jpg" alt="کاوه نگار" class="h-16 mb-3">
<h3 class="text-center font-medium">کاوه نگار</h3>
<p class="text-sm text-gray-500 mt-1">kavenegar</p>
</div>
</div>
</div>
</section>
<!-- App Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4 flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-10 lg:mb-0 flex justify-center">
<img src="https://formafzar.com/assets/img/App/formbuilderApplication4.png" alt="اپلیکیشن فرم ساز" class="w-full max-w-md">
</div>
<div class="lg:w-1/2">
<h2 class="text-3xl font-bold mb-6">اپلیکیشن فرم ساز</h2>
<p class="text-lg mb-8 text-gray-600">با اپلیکیشن فرم‌افزار، تمام امکانات فرمساز فرم‌افزار را همراه خود داشته باشید و به آسانی فرم‌های خود را مدیریت و اطلاعات ثبت شده را مشاهده نمایید. همین حالا اپلیکیشن فرم ساز فرم‌افزار را دانلود نمایید.</p>
<a href="https://formafzar.com/FormBuilderApplication#downloadApp" class="btn-primary bg-purple-600 text-white px-6 py-3 rounded-md font-medium inline-block">دانلود اپلیکیشن</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white pt-16 pb-8">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
<!-- Column 1 -->
<div>
<img src="https://formafzar.com/assets/img/logo/applify-logo-white-fa.png" alt="فرم افزار" class="h-10 mb-6">
<div class="space-y-3">
<p class="flex items-center">
<i class="fas fa-phone ml-2"></i>
<span>88547827-9 (021)</span>
</p>
<p class="flex items-center">
<i class="fas fa-envelope ml-2"></i>
<span>info@farsicom.com</span>
</p>
<p class="flex items-center">
<i class="fas fa-envelope ml-2"></i>
<span>sales@farsicom.com</span>
</p>
<p class="flex items-start">
<i class="fas fa-map-marker-alt ml-2 mt-1"></i>
<span>تهران - خیابان سهروردی شمالی ، بین تقاطع عباس آباد و هویزه ، کوچه متحیر ، پلاک 60 ، واحد 4 کدپستی 1559813915</span>
</p>
</div>
</div>
<!-- Column 2 -->
<div>
<h3 class="text-xl font-semibold mb-6">لینک های مفید</h3>
<ul class="space-y-3">
<li><a href="https://formafzar.com/panel/support" class="hover:text-purple-400">پشتیبانی</a></li>
<li><a href="https://formafzar.com/Contact" class="hover:text-purple-400">ثبت شکایات</a> | <a href="https://formafzar.com/%D8%AB%D8%A8%D8%AA-%D8%AA%D8%AE%D9%84%D9%81" class="hover:text-purple-400">ثبت تخلف</a></li>
<li><a href="https://formafzar.com/faq" class="hover:text-purple-400">سوالات متداول قبل از خرید</a></li>
<li><a href="https://formafzar.com/TermsOfService" class="hover:text-purple-400">قوانین و مقررات</a></li>
<li><a href="https://formafzar.com/video" class="hover:text-purple-400">ویدئوها</a></li>
<li><a href="https://formafzar.com/FormBuilderApplication" class="hover:text-purple-400">اپلیکیشن فرم ساز</a></li>
</ul>
</div>
<!-- Column 3 -->
<div>
<h3 class="text-xl font-semibold mb-6">صفحه‌های دیگر</h3>
<ul class="space-y-3">
<li><a href="https://formafzar.com/AboutUs" class="hover:text-purple-400">درباره ما</a></li>
<li><a href="https://formafzar.com/%D9%81%D8%B1%D9%85-%D8%B3%D8%A7%D8%B2-%D8%A2%D9%86%D9%84%D8%A7%DB%8C%D9%86-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D9%81%D8%A7%D8%B1%D8%B3%DB%8C" class="hover:text-purple-400">فرم ساز آنلاین</a></li>
<li><a href="https://formafzar.com/help" class="hover:text-purple-400">مرکز راهنمایی</a></li>
<li><a href="https://formafzar.com/Pricing" class="hover:text-purple-400">تعرفه‌های فرم ساز</a></li>
<li><a href="https://formafzar.com/whats-new" class="hover:text-purple-400">لیست تغییرات</a></li>
<li><a href="https://formafzar.com/Survey" class="hover:text-purple-400">نظرسنجی فرم افزار</a></li>
</ul>
</div>
<!-- Column 4 -->
<div>
<h3 class="text-xl font-semibold mb-6">لینک شبکه های اجتماعی</h3>
<div class="flex space-x-4 mb-6">
<a href="https://t.me/formafzar" class="bg-gray-800 hover:bg-purple-600 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-telegram"></i>
</a>
<a href="https://www.instagram.com/formafzar_/" class="bg-gray-800 hover:bg-purple-600 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.facebook.com/formafzar.formbuilder.9" class="bg-gray-800 hover:bg-purple-600 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://www.twitter.com/formafzar/" class="bg-gray-800 hover:bg-purple-600 w-10 h-10 rounded-full flex items-center justify-center">
<i class="fab fa-twitter"></i>
</a>
</div>
<div class="flex items-center space-x-4">
<img src="https://formafzar.com/assets/img/samandehi.png" alt="لوگوی ساماندهی" class="h-12">
<img src="https://trustseal.enamad.ir/logo.aspx?id=126230&Code=yMDy1iueZRBys2KXRbmO" alt="نماد اعتماد الکترونیکی" class="h-12">
</div>
</div>
</div>
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2025 Formafzar.com</p>
<div class="flex space-x-6">
<a href="https://formafzar.com/help" class="text-gray-400 hover:text-white">مرکز راهنمایی</a>
<a href="https://formafzar.com/help?t=%D8%B3%D9%88%D8%A7%D9%84%D8%A7%D8%AA-%D8%B9%D9%85%D9%88%D9%85%DB%8C" class="text-gray-400 hover:text-white">سوالات عمومی</a>
<a href="https://formafzar.com/privacy" class="text-gray-400 hover:text-white">حریم خصوصی</a>
</div>
</div>
</div>
</footer>
<!-- Form Builder Panel -->
<div id="form-builder-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl w-full max-w-6xl h-[90vh] flex flex-col">
<!-- Header -->
<div class="border-b p-4 flex justify-between items-center">
<h3 class="text-xl font-bold">فرم ساز پیشرفته</h3>
<button id="close-form-builder" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<!-- Main Content -->
<div class="flex flex-1 overflow-hidden">
<!-- Tools Panel -->
<div class="w-64 border-r p-4 overflow-y-auto">
<h4 class="font-bold mb-4">ابزارهای فرم</h4>
<div class="space-y-2">
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="text">
<i class="fas fa-font mr-2"></i> فیلد متن
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="email">
<i class="fas fa-envelope mr-2"></i> فیلد ایمیل
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="number">
<i class="fas fa-calculator mr-2"></i> فیلد عددی
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="date">
<i class="fas fa-calendar mr-2"></i> فیلد تاریخ
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="select">
<i class="fas fa-list mr-2"></i> لیست انتخابی
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="checkbox">
<i class="fas fa-check-square mr-2"></i> چک باکس
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="radio">
<i class="fas fa-dot-circle mr-2"></i> رادیو باتن
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="textarea">
<i class="fas fa-align-left mr-2"></i> متن چندخطی
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="file">
<i class="fas fa-file-upload mr-2"></i> آپلود فایل
</div>
<div class="tool-item p-2 border rounded cursor-move" draggable="true" data-type="section">
<i class="fas fa-columns mr-2"></i> بخش بندی
</div>
</div>
</div>
<!-- Form Canvas -->
<div class="flex-1 p-4 overflow-y-auto" id="form-canvas">
<div class="border-2 border-dashed rounded-lg p-8 text-center text-gray-500 h-full flex items-center justify-center" id="drop-area">
ابزارهای فرم را به اینجا بکشید و رها کنید
</div>
</div>
<!-- Properties Panel -->
<div class="w-64 border-l p-4 overflow-y-auto">
<h4 class="font-bold mb-4">ویژگی‌های فیلد</h4>
<div id="field-properties" class="space-y-4">
<p class="text-gray-500">فیلدی انتخاب نشده است</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="border-t p-4 flex justify-end space-x-3">
<button class="px-4 py-2 border rounded-md">انصراف</button>
<button class="px-4 py-2 bg-purple-600 text-white rounded-md">ذخیره فرم</button>
</div>
</div>
</div>
</div>
<script>
// Form Builder Modal Toggle
document.getElementById('open-form-builder').addEventListener('click', function() {
document.getElementById('form-builder-modal').classList.remove('hidden');
});
document.getElementById('close-form-builder').addEventListener('click', function() {
document.getElementById('form-builder-modal').classList.add('hidden');
});
// Mobile menu toggle
document.querySelector('header button').addEventListener('click', function() {
const mobileMenu = document.querySelector('.lg\\:hidden.hidden');
mobileMenu.classList.toggle('hidden');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Form Builder Drag and Drop
const toolItems = document.querySelectorAll('.tool-item');
const dropArea = document.getElementById('drop-area');
toolItems.forEach(item => {
item.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', this.dataset.type);
});
});
dropArea.addEventListener('dragover', function(e) {
e.preventDefault();
this.classList.add('border-purple-500', 'bg-purple-50');
});
dropArea.addEventListener('dragleave', function() {
this.classList.remove('border-purple-500', 'bg-purple-50');
});
dropArea.addEventListener('drop', function(e) {
e.preventDefault();
this.classList.remove('border-purple-500', 'bg-purple-50');
const fieldType = e.dataTransfer.getData('text/plain');
addFieldToForm(fieldType);
});
function addFieldToForm(type) {
if (dropArea.innerHTML.includes('ابزارهای فرم')) {
dropArea.innerHTML = '';
}
let fieldHtml = '';
switch(type) {
case 'text':
fieldHtml = `
<div class="mb-4 p-4 border rounded bg-white">
<label class="block text-gray-700 mb-2">فیلد متن</label>
<input type="text" class="w-full p-2 border rounded">
</div>
`;
break;
case 'email':
fieldHtml = `
<div class="mb-4 p-4 border rounded bg-white">
<label class="block text-gray-700 mb-2">ایمیل</label>
<input type="email" class="w-full p-2 border rounded">
</div>
`;
break;
// Add more field types as needed...
}
dropArea.insertAdjacentHTML('beforeend', fieldHtml);
}
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=pixip2015/formafzar" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>