نمایش نتایج: از شماره 1 تا 1 , از مجموع 1

موضوع: طراحی سایت وایجاد فرم با قابلیت Pop up

  1. #1
    کاربر سایت

    آخرین بازدید
    چهارشنبه ۲۷ خرداد ۹۴ [ ۱۲:۲۶]
    محل سکونت
    تهران
    نوشته ها
    97
    امتیاز
    1,193
    سطح
    1
    Points: 1,193, Level: 1
    Level completed: 99%, Points required for next Level: 0
    Overall activity: 16.0%
    دستاوردها:
    Tagger Second Class3 months registered1000 Experience Points
    سپاس ها
    0
    سپاس شده 11 در 11 پست

    طراحی سایت وایجاد فرم با قابلیت Pop up

    ممکن است شما در طراحی سایت خود ملزم به درج فرمی برای گرفتن اطلاعاتی از کاربران باشید. این فرم ها می توانند با قابلیت ها و ایفکت های زیبا در طراحی وب سایت شما پیاده سازی شوند. فرض نمایید شما قصد دارید با کلید کاربر بر روی فیلد خاص اطلاعاتی را به صورت Pop up به نمایش بگذارید و موجب هدایت کاربر در درج اطلاعات شوید. اگر کاربر در صفحه سایت ما احساس سردرگمی کند دیگر تمایلی به رجوع دوباره نخواهد داشت که این روند تاثیر منفی در سئو سایت خواهد داشت. بدین منظور می توانید از زبان های html و css در صفحه طراحی سایت مورد نظر بهره گیرری نمایید. در اینجا نمونه ای از درج این کد در طراحی وب سایت را به نمایش می گذاریم. کد css زیر را در تگ head صفحه طراحی سایت خود درج نمایید.


    <style>


    form div.dynamiclabel{ /* div container for each form field with pop up label */


    display: block;


    margin: 30px;


    font: 16px;


    position: relative;


    }





    form div.dynamiclabel input[type="text"], form div.dynamiclabel textarea{


    width: 320px;


    padding: 10px;


    border: 1px solid #c3c3c3;


    border-radius: 7px;


    }





    form div.dynamiclabel textarea{


    height: 200px;


    }








    form div.dynamiclabel label{ /* pop up label style */


    position: absolute;


    left: 0;


    background: lightyellow;


    border: 1px solid yellow;


    border-radius: 2px;


    padding: 3px 10px;


    box-shadow: 4px 1px 5px gray;


    font-weight: bold;


    -webkit-backface-visibility: hidden;


    top: 10px; /* initial top position of label relative to dynamiclabel container */


    -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);


    -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */


    -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);


    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);


    opacity: 0;


    z-index: -1;


    }








    form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */


    border: 1px solid #45bcd2;


    box-shadow: 0 0 8px 2px #98d865;


    }








    form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */


    opacity: 1;


    z-index:100;


    top: -35px; /* Post top position of label on focus relative to dynamiclabel container */


    -ms-transform: rotate(-3deg);


    -moz-transform: rotate(-3deg);


    -webkit-transform: rotate(-3deg);


    transform: rotate(-3deg);


    }





    </style>








    و حال کد html زیر را در بخشی از صفحه وب سایت و در تگ <body> که در صدد درج فرم هستید درج نمایید.


    <form>


    <div class="dynamiclabel">


    <input id="name" placeholder="Name" type="text">


    <label for="name">Name</label>


    </div>





    <div class="dynamiclabel">


    <input id="email" placeholder="Email Address" type="text">


    <label for="email">Email Address</label>


    </div>





    <div class="dynamiclabel">


    <textarea id="feedback" placeholder="Feedback"></textarea>


    <label for="feedback">Feedback</label>


    </div>


    </form>


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



    منبع: [برای مشاهده لینک ها شما باید عضو سایت باشید | عضویت]

  2. کاربر روبرو از پست مفید elham1388 سپاس کرده است .

    salamatism (سه شنبه ۰۵ بهمن ۹۵)

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •