با توجه به افزایش استفاده از وب موبایل در سال روی سال، در حال حاضر تمرکز افزایش یافته است روی وب سایت ها را برای بازدیدکنندگان پاسخگو، سازگارتر و کاربرپسندتر می کند روی صفحه نمایش های کوچک یکی از زمینه های کلیدی که اغلب نادیده گرفته می شود و می تواند به راحتی منجر به انبوهی از ناامیدی شود، فرم تماس است. این که آیا کاربر در حال ورود به یک وب سایت است، راه را از طریق ثبت نام جدا کنید process یا در مراحل پایانی تکمیل سفارش آنلاین، قابلیت استفاده خوب و تجربه با کیفیت بالا روی موبایل کلید یک نتیجه موفقیت آمیز است.

بسیاری از شیوه های ساده HTML و CSS فرم های تماس شما را برای بازدیدکنندگان کاربرپسندتر و زیباتر می کند روی دستگاه های تلفن همراه

ورودی های فرم برای کنترل لمسی آسان تر

استفاده از استایل CSS سازگار با لمس برای عناصر فرم، ورودی‌ها، دکمه‌ها و کنترل‌ها را تجربه بسیار بهتری برای کاربران صفحه لمسی می‌سازد.

فیلدهای ورودی فرم از مناطق هدف لمسی بزرگ بهره خواهند برد:

input(type=text), input(type=url), input(type=email), input(type=password), input(type=tel) {
 -webkit-appearance: none; -moz-appearance: none;
 display: block;
 margin: 0;
 width: 100%; height: 40px;
 line-height: 40px; font-size: 17px;
 border: 1px solid #bbb;
}

سایر اشکال کنترل ورودی نیز به راحتی از یک ظاهر طراحی سفارشی CSS سود می برند:

چک باکس‌ها از آسان‌تر شدن ضربه زدن سود می‌برند:

input(type=checkbox) {
 width: 44px; height: 44px;
 -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;
 border: 1px solid #bbb;
}

به همین ترتیب، عناصر دکمه را می توان استایل دهی کرد و با آنها رفتار خاصی داشت:

button(type=submit) {
 -webkit-appearance: none; -moz-appearance: none;
 display: block;
 margin: 1.5em 0;
 font-size: 1em; line-height: 2.5em;
 color: #333;
 font-weight: bold;
 height: 2.5em; width: 100%;
 background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
 border: 1px solid #bbb;
 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

حتی انواع ورودی کمتر رایج، مانند لغزنده های محدوده، از یک ظاهر طراحی اضافی CSS سود می برند:

input(type=range) {
 width: 100%;
}
input(type=range)::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 44px; height: 44px;
 background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
 border: 1px solid #bbb;
 -webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;
}

از انواع ورودی HTML5 برای راه اندازی صفحه کلید مناسب استفاده کنید

HTML5 طیف وسیعی از انواع ورودی را برای کمک به تجربه کاربر ارائه می دهد. اکنون برخی از مرورگرهای وب بسته به کنترل های بومی متعددی ارائه می دهند روی نوع ورودی انتخاب شده این به ویژه برای مرورگرهای تلفن همراه مفید است که برخی از آنها متفاوت هستند onصفحه کلید صفحه برای اشکال مختلف داده

در اینجا روش نمایش صفحه کلیدهای نرم مختلف آمده است روی آیفون (iOS 6)، بسته به روی نوع ورودی مشخص شده:

<label for="website">Website:</label> <input type="url" name="website" placeholder="www.yourwebsite.com" /> 

<label for="tel">Tel:</label> <input type="tel" name="tel" placeholder="Your telephone number" /> 

<label for="email">Email:</label> <input type="email" name="email" placeholder="(email protected)" /> 

<label for="time">Time:</label> <input type="time" name="time" placeholder="9:00 AM" /> 

<label for="date">Date:</label> <input type="date" name="date" placeholder="DD/MM/YYYY" /> 

در این مثال‌ها توجه داشته باشید که با استفاده از عبارت، متن مکان‌نما را نیز مشخص می‌کنیم placeholder صفت. این ما را قادر می سازد نمونه ای از نوع داده هایی را که انتظار می رود در یک فیلد خاص وارد کند به کاربر نشان دهیم.

پیوندهای تلفنی ضربه به تماس را سبک کنید

برخی از مرورگرهای تلفن همراه سعی می کنند شماره تلفن را شناسایی کنند روی صفحات وب و تبدیل آنها به طور خودکار به لینک های قابل لمس. این رفتار برای بازدیدکنندگان مفید است، اما متأسفانه تشخیص خودکار همیشه قابل اعتماد نیست و مرورگرها به طور تصادفی ارقامی را هدف قرار می‌دهند که در واقع شماره تلفن نیستند. بسته به اینکه ضربه زدن به پیوندها نیز دشوار باشد روی یک ظاهر طراحی شده برای آنها

خوشبختانه، این رفتار تشخیص خودکار را می توان غیرفعال کرد روی هر دو دستگاه iOS و Android با قرار دادن عنصر زیر در <head> عنصر وب page:

<meta name="format-detection" content="telephone=no" /> 

این به شما امکان می دهد لینک های تلفن را به صورت دستی مشخص کنید روی صفحات وب شما، به شما کنترل بسیار بیشتری بر مکان ظاهر شدن و ظاهر آنها می دهد:

Tel: <a href="https://www.webdesignerdepot.com/2013/03/how-to-make-your-contact-forms-mobile-friendly/tel:14085555555">1 408 555 5555</a> 

با استفاده از انتخابگر CSS زیر می‌توانید یک پیوند تلفنی را استایل دهید:

a(href^='tel:'):link, a(href^='tel:'):visited {
 color: #333;
 font-weight: bold;
 text-decoration: underline;
}
a(href^='tel:'):hover, a(href^='tel:'):active {
 text-decoration: none;
}

تنها نقطه ضعف این روش دستی این است که بازدیدکنندگان دسکتاپ نیز می‌توانند این پیوندهای تلفنی را ببینند اما نمی‌توانند آنها را فعال کنند. یکی از راه ها این است که درخواست کنید tel استایل پیوند فقط به درگاه‌های نمایش کوچک، با استفاده از پرس و جو رسانه CSS:

/* unstyled tel links as default */
a(href^='tel:'):link, a(href^='tel:'):visited {
 color: #6f757c;
 font-weight: normal;
 text-decoration: none;
}
a(href^='tel:'):hover, a(href^='tel:'):active {
 color: #6f757c;
 text-decoration: none;
}

/* styled tel links for small viewports */
@media screen and (max-width: 600px) {
 a(href^='tel:'):link, a(href^='tel:'):visited {
 color: #333;
 font-weight: bold;
 text-decoration: underline;
 }
 a(href^='tel:'):hover, a(href^='tel:'):active {
 color: #333;
 text-decoration: none;
 }
}

تصحیح خودکار و حروف بزرگ را کنترل کنید

به طور خاص iOS عادت به تصحیح خودکار و بزرگ کردن داده‌های ورودی فرم دارد. برای برخی از انواع زمینه، این بسیار مفید است، اما برای برخی دیگر می تواند به سرعت باعث ناامیدی شود. به عنوان مثال، نام های کاربری اغلب حروف و اعداد را با هم ترکیب می کنند. خوشبختانه iOS به شما این امکان را می دهد که این رفتار را با استفاده از autocorrect و autocapitalize ویژگی های:

<input type="text" name="username" autocorrect="off" autocapitalize="off" />

گزینه های قابل تنظیم بیشتری برای وجود دارد autocapitalize. شما همچنین می توانید مقدار را به words، characters یا sentences، اما به دقت فکر کنید که کجا این ویژگی ها را اعمال می کنید.

<input type="text" name="first-name" autocapitalize="words" />
<input type="text" name="last-name" autocapitalize="words" />
<input type="text" name="state" autocapitalize="characters" />
<textarea name="comment" autocapitalize="sentences"></textarea>

یک یادداشت روی پشتیبانی از مرورگر

در حالی که بسیاری از نمونه های این مقاله ویژگی ها را برجسته می کنند روی iOS Safari، برخی از نکات برای اندروید نیز اعمال می شود (بسته به روی نسخه مرورگر)، و همچنین سایر مرورگرهای تلفن همراه. خوبی ویژگی های فرم HTML5 این است که به تدریج بهبود می یابند. مرورگرهایی که از یک ویژگی پشتیبانی می کنند از آن استفاده می کنند، در حالی که مرورگرهایی که پشتیبانی نمی کنند معمولاً آن را نادیده می گیرند.

آیا سایت های موبایل فرم های سازگار با موبایل را می طلبند؟ چه نکات دیگری را اضافه می کنید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر تماس از طریق Shutterstock.