ফর্ম স্টাইলিং
অটো ফর্ম বিল্ডার আপনাকে ফর্মের স্টাইলিংয়ের ওপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। আপনার ব্র্যান্ডের রঙের সাথে মেলান, আপনার ফন্ট ব্যবহার করুন, স্পেসিং ঠিক করুন এবং এমন ফর্ম ডিজাইন করুন যা আপনার সাইটের একটি স্বাভাবিক অংশ বলে মনে হয়।
ফর্ম স্টাইলিং কেন গুরুত্বপূর্ণ
আপনার ওয়েবসাইটের একটি ব্র্যান্ড আছে। আপনার ফর্মগুলিতে এটি প্রতিফলিত হওয়া উচিত।
যখন ফর্মগুলি আপনার সাইটের বাকি অংশ থেকে আলাদা দেখায়, তখন দর্শকরা দ্বিধাগ্রস্ত হন। তারা ভাবতে থাকেন যে তারা এখনও একই ওয়েবসাইটে আছে কিনা। এই দ্বিধা রূপান্তরের জন্য ব্যয়বহুল।
স্টাইল করা ফর্মগুলি পেশাদারিত্বেরও পরিচয় দেয়। একটি মসৃণ ফর্ম দর্শনার্থীদের জানায় যে আপনি বিশদ সম্পর্কে যত্নশীল - এবং যদি আপনি ফর্ম ডিজাইনের বিষয়ে যত্নশীল হন, তবে সম্ভবত আপনি তাদের ডেটা সম্পর্কেও যত্নশীল।
ফর্ম স্টাইলিং কীভাবে কাজ করে
অটো ফর্ম বিল্ডারের ফর্ম বিল্ডার ইন্টারফেসে একটি ভিজ্যুয়াল স্টাইল এডিটর অন্তর্ভুক্ত রয়েছে।
- কী স্টাইল করবেন তা বেছে নিন। ফর্ম কন্টেইনার, ফিল্ড লেবেল, ইনপুট ফিল্ড, বোতাম, অথবা ত্রুটি বার্তা থেকে বেছে নিন।
- সেটিংস সামঞ্জস্য করুন। মান পরিবর্তন করতে রঙ পিকার, স্লাইডার এবং ড্রপডাউন ব্যবহার করুন। শেখার বা মনে রাখার জন্য কোনও CSS সিনট্যাক্স নেই।
- তাৎক্ষণিকভাবে প্রিভিউ করুন। প্রতিটি পরিবর্তন সরাসরি প্রিভিউতে তাৎক্ষণিকভাবে প্রদর্শিত হবে। প্রকাশের আগে আপনার ফর্মটি কেমন দেখাবে তা ঠিক দেখুন।
- ডিফল্ট হিসেবে সংরক্ষণ করুন। নতুন ফর্মগুলিতে স্বয়ংক্রিয়ভাবে আপনার স্টাইলিং প্রয়োগ করুন। একবার তৈরি করুন, সর্বত্র পুনরায় ব্যবহার করুন।
আপনি যা কাস্টমাইজ করতে পারেন
রং
আপনার ফর্মের প্রতিটি রঙ নিয়ন্ত্রণ করুন। ফর্ম কন্টেইনার এবং পৃথক ক্ষেত্রের জন্য পটভূমির রঙ। লেবেল, স্থানধারক এবং ইনপুট পাঠ্যের জন্য পাঠ্যের রঙ। ডিফল্ট, ফোকাস এবং ত্রুটির অবস্থার জন্য সীমানার রঙ। পটভূমি, পাঠ্য এবং হোভার প্রভাবের জন্য বোতামের রঙ।
ছাপাখানার বিদ্যা
লেবেল এবং ইনপুট ফিল্ডের জন্য ফন্ট বেছে নিন। ফন্টের আকার স্বাধীনভাবে সামঞ্জস্য করুন—জোর দেওয়ার জন্য বড় লেবেল, গৌণ তথ্যের জন্য ছোট সহায়ক টেক্সট। মোটা লেবেল বা হালকা ইনপুট টেক্সটের জন্য ফন্টের ওজন নিয়ন্ত্রণ করুন।
ব্যবধান এবং বিন্যাস
শ্বাস-প্রশ্বাসের জায়গা তৈরি করতে ক্ষেত্রের মধ্যে ব্যবধান নির্ধারণ করুন। আরামদায়ক টেক্সট এন্ট্রির জন্য ক্ষেত্রের ভিতরে প্যাডিং সামঞ্জস্য করুন। আপনার পৃষ্ঠার বিন্যাসের মধ্যে এটিকে নিখুঁতভাবে স্থাপন করার জন্য পুরো ফর্মের চারপাশে মার্জিন নিয়ন্ত্রণ করুন।
সীমানা এবং কোণ
সীমানার প্রস্থ, স্টাইল এবং রঙ নির্ধারণ করুন। আধুনিক চেহারার জন্য গোলাকার কোণগুলি ব্যবহার করুন অথবা ন্যূনতম নকশার জন্য তীক্ষ্ণ রাখুন। বিভিন্ন ফর্ম স্টেটে বিভিন্ন সীমানা শৈলী প্রয়োগ করুন—ডিফল্টরূপে সূক্ষ্ম সীমানা, ফোকাসে বিশিষ্ট সীমানা।
বাটন
আপনার ব্র্যান্ডের সাথে মেলে এমন সাবমিট বোতাম ডিজাইন করুন। ব্যাকগ্রাউন্ডের রঙ, টেক্সটের রঙ, বর্ডার রেডিয়াস, প্যাডিং, ফন্টের আকার এবং ফন্টের ওজন। হোভার এবং অ্যাক্টিভ স্টেট কাস্টমাইজ করুন যাতে বোতামগুলি প্রতিক্রিয়াশীল এবং ক্লিকযোগ্য বোধ করে।
ফর্ম কনটেইনার
সামগ্রিক ফর্ম র্যাপারটি স্টাইল করুন। একটি ব্যাকগ্রাউন্ড রঙ যোগ করুন অথবা স্বচ্ছ রাখুন। গভীরতার জন্য বক্স শ্যাডো প্রয়োগ করুন। গোলাকার ফর্ম কন্টেইনারের জন্য সীমানা ব্যাসার্ধ সেট করুন। ফর্মগুলি যাতে খুব বেশি প্রসারিত না হয় তার জন্য সর্বোচ্চ-প্রস্থ নিয়ন্ত্রণ করুন।
সাধারণ ফর্ম স্টাইলিং পরিস্থিতি
ব্র্যান্ড নির্দেশিকা ম্যাচ করুন
আপনার কোম্পানির নির্দিষ্ট রঙ আছে—প্রাথমিক রঙের জন্য #0F2D5F, অ্যাকসেন্টের জন্য #F59E0B। স্টাইল এডিটরে সেই মানগুলি লিখুন। ফর্ম বোতামগুলি আপনার অ্যাকসেন্ট রঙ ব্যবহার করে। ফর্ম লেবেলগুলি আপনার প্রাথমিক রঙ ব্যবহার করে। নিখুঁত ব্র্যান্ডের ধারাবাহিকতা।
উচ্চ-বৈপরীত্য ফর্ম তৈরি করুন
গাঢ় পটভূমির ওয়েবসাইট? এমন হালকা ফর্ম তৈরি করুন যা আলাদাভাবে দেখা যায়। হালকা পটভূমি? দৃশ্যত প্রতিযোগিতা না করে ফর্ম এরিয়া নির্ধারণ করতে সূক্ষ্ম ছায়া সহ সীমানাযুক্ত ফর্ম ব্যবহার করুন।
ন্যূনতম ফর্ম ডিজাইন করুন
সীমানা সরিয়ে ফেলুন, ব্যবধান কমিয়ে দিন, স্বচ্ছ ব্যাকগ্রাউন্ড ব্যবহার করুন। এমন ফর্ম তৈরি করুন যা বাক্সে বসে থাকার পরিবর্তে পৃষ্ঠার সাথে একীভূত বোধ করে।
বোল্ড কল-টু-অ্যাকশন ফর্ম তৈরি করুন
বড় বোতাম, শক্তিশালী রঙ, উদার প্যাডিং। আপনার সবচেয়ে গুরুত্বপূর্ণ লিড জেনারেশন পৃষ্ঠাগুলির জন্য এমন ফর্ম তৈরি করুন যা মনোযোগ দাবি করে।
যেকোনো থিমের সাথে মেলে এমন ফর্ম
অটো ফর্ম বিল্ডার প্রতিটি ওয়ার্ডপ্রেস থিমের সাথে কাজ করে। আপনার স্টাইল করা ফর্মগুলো যেকোনো ডিজাইন প্রেক্ষাপটের সাথে খাপ খাইয়ে নেয়।
Woodmart, Astra, GeneratePress, Divi, অথবা অন্য কোন থিম ব্যবহার করছেন? আপনার ফর্মগুলি দেখতে নেটিভ দেখাবে। স্টাইল এডিটর আপনাকে যেকোনো ডিজাইন সিস্টেমের সাথে মানানসই যথেষ্ট নিয়ন্ত্রণ দেয়।
কোনও থিমের দ্বন্দ্ব নেই। কোনও স্টাইলের উত্তরাধিকারের সমস্যা নেই। কেবল এমন ফর্ম যা দেখতে ঠিক আপনার পছন্দ মতো।
কোন CSS প্রয়োজন নেই
আপনার ফর্ম স্টাইল করার জন্য কাস্টম CSS লেখার প্রয়োজন নেই। ভিজ্যুয়াল এডিটর সবকিছু পরিচালনা করে।
কিন্তু আপনি যদি CSS-এর উপর সম্পূর্ণ নিয়ন্ত্রণ চান, তাহলে অটো ফর্ম বিল্ডার প্রতিটি ফর্মের জন্য কাস্টম CSS সমর্থন করে। বিশেষ ক্ষেত্রের জন্য ওভাররাইড যোগ করুন অথবা এমন উন্নত স্টাইলিং প্রয়োগ করুন যা ভিজ্যুয়াল এডিটরে উপলব্ধ নয়। অভিজ্ঞ ব্যবহারকারীরা তাদের প্রয়োজনীয় নমনীয়তা পান।
