آیا تا به حال فرمی در سایت خود ایجاد کرده اید که اطلاعات را از دست بدهید؟ ایجاد یک فرم ایمیل HTML یک راه موثر برای حل این مشکل است.

صاحب وب سایت یاد می گیرد که چگونه یک فرم html ایجاد کند که ایمیل ارسال کند

بازدیدکنندگان ناشناس را به سرنخ تبدیل کنید. HubSpot Forms را به صورت رایگان امتحان کنید.

در زیر، نحوه ایجاد فرمی را خواهید آموخت که پس از ارسال، برای شما و همچنین مشتری ایمیل ارسال می کند. این ترفند ساده به شما کمک می کند تا یک استراتژی ورودی یکپارچه بسازید.

محتوا

فرم HTML چیست؟

یک فرم HTML در یک وب سایت برای جمع آوری اطلاعات وارد شده توسط بازدیدکنندگان استفاده می شود. اگر می‌خواهید هنگام ارسال اطلاعات شخصی به شما اطلاع داده شود، می‌توانید فرآیندی را تنظیم کنید که ایمیل‌ها را از یک فرم HTML ارسال می‌کند.

در حالت ایده آل، مرورگرها به شما این امکان را می دهند که فرم های ارسالی را مستقیماً به آدرس ایمیل هدایت کنید. با این حال، دلیل این کار این است که ارسال یک ایمیل مستقیماً از یک فرم وب HTML، آدرس ایمیل بازدیدکننده را نشان می دهد و کاربر را در برابر فعالیت های مخرب مانند فیشینگ آسیب پذیر می کند.

همچنین، HTML گزینه ای برای ایجاد فرمی که پس از ارسال ایمیل ارسال می کند، ارائه نمی دهد. درعوض، می‌توانید از عنصر اقدام فرم برای تنظیم یک آدرس mailto: (در این مورد آدرس خودتان) استفاده کنید، و باعث باز شدن کلاینت ایمیل فرستنده شود. اگر نمی توانید یک فرم مبتنی بر PHP ایجاد کنید، این آخرین راه حل است.

با این حال، چندین مشکل با گزینه mailto: وجود دارد.

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

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

نحوه ایجاد یک فرم HTML که ایمیل ارسال می کند

چندین گزینه برای ایجاد یک فرم HTML وجود دارد که هنگام ارسال یک ورودی جدید برای شما ایمیل می فرستد. گزینه ای که انتخاب می کنید بستگی به نحوه کار و پلتفرم مورد استفاده شما دارد.

این بدان معنی است که اگر برنامه استفاده از ترکیبی از HTML و اسکریپت های مختلف باشد، اوضاع کمی متفاوت است. گزینه ای را انتخاب کنید که با مجموعه مهارت های تیم شما بهترین کار را دارد.

روش 1: ایجاد فرم ارسال ایمیل با استفاده از HTML (توصیه نمی شود)

فقط از HTML استفاده می کنید؟ اگر تازه شروع کرده اید، تیم ما اینجاست تا به شما کمک کند. این کد به شما کمک می کند تا فرمی بسازید که از طریق ایمیل به شما اطلاع دهد.

فرم نام و پیام مخاطب را می خواهد. همچنین شامل یک دکمه ارسال است (در CodePen قابل مشاهده نیست) که کاربران برای ارسال اطلاعات خود روی آن کلیک می کنند.

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

یادم می آید: اگرچه شما فقط می توانید از HTML اولیه استفاده کنید، این گزینه ایده آل نیست. این فرم مستقیماً به آدرس های ایمیل ارسال نمی شود، بلکه یک سرویس گیرنده ایمیل یا پنجره ابزار برای ارسال فرم باز می شود. این می تواند کاربر را از ارسال نکردن فرم به هیچ وجه بترساند.

بنابراین کدام کد HTML به شما امکان می دهد فرم ها را مستقیماً به آدرس ایمیل ارسال کنید؟

برای اینکه فرم با سرور ایمیل شما کار کند و آن را به صندوق پستی بفرستید، PHP راه حل است. بیایید اکنون این گزینه را بررسی کنیم.

روش 2: ایجاد فرم ارسال ایمیل با استفاده از PHP (پیشرفته)

برای ایجاد فرمی که ایمیل ارسال می کند، PHP بهترین دوست شما خواهد بود. PHP مخفف Hypertext Preprocessor است و این زبان برای پردازش فرم با HTML همکاری می کند.

قبل از اینکه در این فرآیند غوطه ور شویم، اجازه دهید چند اصول اولیه قالب را بشکافیم.

فرم های PHP: آنچه باید بدانید

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

مرورگر وب بازدید کننده از کد HTML برای نمایش فرم استفاده می کند. هنگامی که فرم ارسال می شود، مرورگر اطلاعات را با استفاده از پیوند ذکر شده در ویژگی “action” تگ فرم به پشتیبان ارسال می کند و داده های فرم را به این URL ارسال می کند.

مثلا:

.

سپس سرور داده ها را به اسکریپت مشخص شده در URL اقدام می دهد – در این مورد myform-processor.php. با استفاده از این داده ها، اسکریپت سرور می تواند یک پایگاه داده از فرم های ارسالی ایجاد کند، کاربر را به صفحه دیگری هدایت کند (مثلاً پرداخت) و یک ایمیل ارسال کند.

زبان های برنامه نویسی دیگری نیز وجود دارد که می توانید در برنامه نویسی باطن از آنها استفاده کنید، مانند Ruby، Perl یا ASP برای ویندوز. با این حال، PHP محبوب ترین است و تقریباً توسط همه ارائه دهندگان میزبانی وب استفاده می شود.

اگر از ابتدا یک فرم ایجاد می کنید، در اینجا مراحلی وجود دارد که می توانید انجام دهید.

مرحله 1: از PHP برای ایجاد یک صفحه استفاده کنید.

برای این مرحله، باید به سی پنل وب سایت خود در پلتفرم هاست خود دسترسی داشته باشید.

هنگام ایجاد یک صفحه وب، به جای استفاده از پسوند “.html”، “.php” را وارد کنید. این شبیه چیزی است که وقتی یک تصویر را به صورت “jpg” در مقابل “png” ذخیره می کنید، اتفاق می افتد.

با انجام این کار، سرور می داند که PHP شما را میزبانی می کند. به جای اینکه صفحه خالی HTML را ذخیره کنید، آن را به صورت چیزی مانند: “subscriberform.php” ذخیره کنید. هنگامی که صفحه شما ایجاد و ذخیره شد، می توانید فرم را ایجاد کنید.

مرحله 2: فرم را با استفاده از کد بسازید.

در این مرحله کد ایجاد فرم را می نویسید.

اگر مطمئن نیستید که چگونه فرم ها را در HTML ایجاد کنید، منبع HTML Dog را برای آغازگر اصول اولیه بررسی کنید.

کد زیر برای یک فرم اصلی مورد نیاز است:

 

<form method="post" action="subscriberform.php">


<textarea name="message"></textarea>


<input type="submit">


</form>

از آنجایی که این شبیه به نوشتن فقط در HTML است، این خطوط همچنین یک نام برای فرم و منطقه ای برای مشترکین ایجاد می کند تا یک پیام سفارشی بنویسند و برای شما ارسال کنند.

یک تفاوت مهم قسمت action=”subscriberform.php” است. این قطعه کد چیزی است که باعث می شود صفحه هنگام ارسال فرم را ارسال کند.

مرحله 3: فرم را یک ایمیل ارسال کنید.

هنگامی که فرم را ایجاد کردید و تنظیمات مناسب را بر اساس ترجیحات طراحی خود اضافه کردید، نوبت به ایجاد بخش ایمیل می رسد.

برای انجام این کار، به بالای صفحه (بالا، حتی قبل از تعریف HTML Doctype) بروید. برای اینکه اجازه دهیم داده ها در ایمیل ارسال شوند، باید کدی را اضافه کنیم که داده ها را پردازش کند. این کد را کپی کنید یا چیزی مشابه ایجاد کنید:

 

<?php


if($_POST["message"]) {


mail("[email protected]", "Here is the subject line",


$_POST["insert your message here"]. "From: [email protected]");


}


?>

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

با تفکیک بیشتر، “mail” فرم تکمیل شده را به عنوان ایمیل به “[email protected]” ارسال می کند و خط موضوع همان چیزی است که در زیر آمده است. در خط بعدی، می توانید یک کپی از پیام ایمیل را در گیومه بنویسید تا از آدرس ایمیلی که انتخاب می کنید ارسال شود.

پس از ارسال فرم، صفحه داده ها را برای خود ارسال می کند. اگر داده ها با موفقیت ارسال شوند، صفحه آن را به عنوان ایمیل ارسال می کند. سپس مرورگر کد HTML صفحه را بارگیری می کند – فرم موجود.

با آن، شما کد اصلی مورد نیاز برای ایجاد فرم را دارید.

توجه داشته باشید که این تنها یک راه برای انجام این کار است. از طرف دیگر، می‌توانید با استفاده از سازنده یک فرم ایجاد کنید و سپس آن را در وب‌سایت خود جاسازی کنید.

روش 3: یک فرم ارسال ایمیل با استفاده از فرم ساز ایجاد کنید

اگر از وردپرس برای ساخت وب سایت خود استفاده نمی کنید و با کدنویسی آشنا نیستید، ممکن است در مورد نحوه ایجاد یک فرم دچار مشکل شوید. این امر مخصوصاً زمانی صادق است که CMS شما ویرایشگر صفحه را با کشیدن و رها کردن ارائه نمی دهد.

هر یک از ابزارهای زیر به شما امکان می دهد فرمی ایجاد کنید که بدون هیچ کدنویسی ایمیل ارسال کند. بهترین بخش این است که اگر نمی خواهید مجبور نیستید سیستم های مدیریت محتوا را تغییر دهید. در عوض، می توانید فرم را با استفاده از کد جاسازی هر ابزار در وب سایت خود جاسازی کنید.

(نکته حرفه ای: یک ویرایشگر کشیدن و رها کردن می تواند ایجاد فرم ارسال ایمیل را بسیار ساده تر و آسان تر کند. CMS Hub را امتحان کنید. 100٪ رایگان است!)

1. HubSpot: به طور کلی بهترین فرم ساز ایمیل

فرم ساز ایمیل html، HubSpot

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

فرم ساز HubSpot به ابزارهای دیگر در پلتفرم از جمله Marketing Hub و CMS Hub متصل است. همچنین نیازی به دانش فنی خاصی ندارید. اگر می‌خواهید فرم را به گونه‌ای گسترش دهید که فرصت‌های بازاریابی را شامل شود، می‌توانید این کار را نیز انجام دهید.

به عنوان مثال، می توانید فرم های سفارشی ایجاد کنید که به لیست مخاطبین شما پیوند دارند. همچنین می‌توانید این فرم‌ها را سفارشی کنید و ایمیل‌های خودکار را بر اساس تکمیل‌های فرم خود راه‌اندازی کنید. (توجه داشته باشید که دومی نیاز به ارتقاء حق بیمه دارد.)

اگر می‌خواهید نحوه دریافت ایمیل پس از ارسال فرم را بیاموزید، مقاله پایگاه دانش ما را بررسی کنید.

2. Forms.io: بهترین ابزار برای ایجاد فرم های ایمیل سریع

فرم ساز ایمیل html، Forms.io

Forms.io به شما امکان می دهد به سرعت یک فرم را در رابط کشیدن و رها کردن آن ایجاد کنید. سپس می توانید فرم را با استفاده از کد تعبیه شده HTML در سایت خود جاسازی کنید. شما یک هشدار یا اعلان دریافت خواهید کرد و سپس می توانید پاسخ ها را در قسمت پشتی ابزار مدیریت کنید.

برای 10 کاربر رایگان است. اگر شرکت شما به صندلی های بیشتری نیاز دارد، می توانید با 14.99 دلار در ماه دسترسی داشته باشید.

3. Jotform: بهترین ایمیل ساز برای چندین فرم

فرم ساز ایمیل html, jotform

اگر انتظار دارید به بیش از یک فرم نیاز داشته باشید، Jotform یک انتخاب عالی است. چندین گزینه برای جاسازی فرم ها در وب سایت شما در اختیار شما قرار می دهد: جاوا اسکریپت، iFrame یا کل کد منبع فرم. شما همچنین می توانید یک لایت باکس یا فرم پاپ آپ ایجاد کنید.

Jotform با نام تجاری خود رایگان است. اگر فرمی بدون واترمارک می خواهید، قیمت از 24 دلار در ماه شروع می شود.

فرم سازهای بیشتر را اینجا ببینید.

روش 4: با استفاده از یک افزونه یک فرم ارسال ایمیل ایجاد کنید

اگر یک وب سایت وردپرسی دارید، خبر خوبی داریم: تعداد زیادی افزونه فرم ساز موجود است که اکثر آنها رایگان هستند. همه این ابزارها پس از دریافت ارسال، یک ایمیل ارسال می کنند.

1. پلاگین فرم HubSpot: بهترین برای Lead Generation

اگر قصد دارید از فرم خود به عنوان ابزار تولید سرنخ استفاده کنید، توصیه می کنیم از افزونه فرم HubSpot استفاده کنید. مستقیماً به حساب HubSpot شما متصل می شود و به شما امکان می دهد از آن در کنار HubSpot CRM، Marketing Hub، Sales Hub و موارد دیگر استفاده کنید.

افزونه فرم ایمیل html، HubSpot

2. WPForms: بهترین برای تعبیه در هر جایی

WPForms یک فرم ساز با کشیدن و رها کردن است که به شما امکان می دهد آن را پیکربندی کنید تا هنگام دریافت ارسال به شما ایمیل شود. همچنین می توانید فرم را در هر جایی از سایت خود از جمله نوار کناری و پاورقی جاسازی کنید.

افزونه فرم ایمیل html، WPForms

3. ARForms: بهترین برای سازگاری

ARForms به شما امکان می دهد اعلان های ایمیل را بر اساس شرایطی که تعیین کرده اید دریافت کنید، اما همچنین می توانید اعلان های ایمیل را برای همه موارد ارسالی دریافت کنید. همچنین می توانید آن را با ابزارهای دیگر در پشته فناوری خود، از جمله HubSpot، PayPal و Google Sheets ادغام کنید.

افزونه فرم ایمیل html، ARForms

اهمیت فرم های HTML که ایمیل ارسال می کنند

چه بخواهید بازدیدکنندگان بیشتری را به سرنخ تبدیل کنید، اطلاعاتی را برای تیم فروش خود جمع آوری کنید یا طرفداران برند وفادار ایجاد کنید، فرم ها برای استراتژی ورودی شما ضروری هستند.

اگر فرمی ندارید که ایمیل بفرستد، ممکن است مشتریان بیشتری را از دست بدهید، تبدیل‌های بیشتری را افزایش دهید و مشتریانی را جذب کنید.

از همین امروز شروع به تراز کردن اشکال خود کنید.

یادداشت سردبیر: این پست در ابتدا در دسامبر 2019 منتشر شد و برای کامل شدن به روز شده است.

فراخوانی جدید برای اقدام