حالت موضوعی | حالت خطی

**محمدسلیمانی**

به نام خدا

یکی از مهم ترین قسمتی که خیلی برای کاربران یا بهتر بگم مهم ترین پل ارتباطی بین ما و کاربران است فرم است

هرچه فرم زیبا و روان تری داشته باشید کاربر تمایل بیشتری پیدا میکنم که به ما اعتماد کنم و اطلاعاتش را برای ما ارسال کنند

در رابطه با اهمیت و نحوه چیدمان فرم و روانشناسی فروش و همچنین بازاریابی عصبی میتوان ساعت ها نوشت و خواند

در اینجا هم قصد آموزش این موارد را ندارم اما احتمال میدهم که تنها جایی که این مطالب را میخوانید همین جاست

بگذریم

یکی از مواردی که باعث تمرکز کاربر در پرکردن فرم میشود و از پراکندگی و گیجی کاربر جلوگیری میکند جدول بندی یا دسته بندی کردن اطلاعات است

برای مثال این فرم را ببینید (این فرم رو با اراس فرم ساختم)

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

همونطور که میبینید فرم با خط هایی دسته بندی و تفکیک شدند

برای ایجاد این کادر بندی (قبلا دو آموزش در این رابطه منتشر کردم اما ین کاملا فرق داره) اول یک کد css مینویسیم

کد: (انتخاب همه)

.mohammad#fieldset {

    display: block;    

    padding: 25px 30px 5px;

    border: none;

    background: rgba(255,255,255,.9);

}

.mohammad fieldset + fieldset {

    border-top: 1px solid rgba(0,0,0,.1);

در این کد همونطور که حتما میدنید اسم کلاسش رو برای قابل فهم تر شدن گذاشتم "mohammad"

و در ادامه قطر خط رنگ و بقیه چهارچوب های خط رو مشخص کردیم (چون قرار نیست css آموزش بدم از توضیح بیشتر صرف نظر میکنم)

حالا کاری که نمیاز هست خیلی خوب درک کنید و انجام بدید اینه که این کد رو اول جایی که میخواهید خط از انجا شروع شود کپی کنید

کد: (انتخاب همه)

<fieldset id="fieldset">

<legend> متنی دلخواه </legend>

و این کد رو انتهای جایی که میخواهید خط به انجا ختم شود.

کد: (انتخاب همه)

</fieldset>

برای مثال اگر میخواهید خط به یک جا ختم شود و از همان جا برای کارد بعدی دوباره شروع شود

باید بلافاصله بعد از کد انتهایی دوباره کد انتهایی رو کپی کنید

مثال:
<fieldset id="fieldset">
<legend> متنی دلخواه </legend>
اطلاعات کاربری
</fieldset>
<fieldset id="fieldset">
<legend> متنی دلخواه </legend>
اطلاعات شخصی
</fieldset>

کد: (انتخاب همه)

<fieldset id="fieldset">

<legend> متنی دلخواه </legend>

اطلاعات کاربری

</fieldset>

<fieldset id="fieldset">

<legend> متنی دلخواه </legend>

اطلاعات شخصی 

</fieldset>

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

امیدوارم کاربردی بوده باشه

توضیح: به دلیل اینکه فرم را تجاری عرضه میکنم از پیوست نکردنش متاسفم.

موفق باشید