افزونه ی معروف و حرفه ای contact form 7 برای ساخت فرم تماس

افزونه ی معروف و حرفه ای contact form 7 برای ساخت فرم تماس

افزونه ی معروف و حرفه ای contact form 7 برای ساخت فرم تماس

حتما تا حالا اسم افزونه ی contact form 7 به گوشتون خورده یا شاید بعضی ها هم حتی باهاش کار کردن به هر حال, این افزونه ی معروف و حرفه ای ساخت فرم تماس واقعا افزونه ی خوب و کاربردی هستش که در بیشتر وب سایت ها شاهد حضور این افزونه هستیم. با استفاده از این افزونه ی شما می توانید به راحتی یک فرم تماس ایجاد کنید البته میشه هر فرمی باهاش ساخت تو یه قسمت واسه تماس با ما تو یه قسمت میشه یه فرم دیگه با خصوصیات دیگه ای برای سفارش و یا … ایجاد کرد.

خود افزونه ی contact form 7 به صورت پیش فرض یک فرم ایجاد کرده که می تونید از اون استفاده کنید و اگر دوست دارید که فرم را به صورت دلخواه بسازید می تونید روی دکمه جدید که در مدیریت این افزونه هستش رو کلیک کنید و فرم رو به راحتی ایجاد کنید.

بنده یه فرم آماده هم ایجاد کردم که می تونید از این کد هم استفاده کنید. خوب بعد از دانلود افزونه افزونه را نصب و فعالش کنید , بعد از نصب افزونه میبینید که یک گزینه به پیشخوان وردپرس شما افزوده میشه به اسم ” تماس ” روی این گزینه کلیک کنیدتا صفحه ی مربوط به افزونه ی contact form 7 باز شود. میبینید که یک فرم آماده به اسم ” فرم تماس 1 ” هستش , اکر روی گزینه ویرایش در زیر فرم تماس 1 کلیک کنید می بینید که به قسمت کدهایی که سبب نمایش فرم تماس می شود انتقال پیدا می کنید. خوب می تونید به راحتی ویرایش کنید و … .

کدی که بنده براتون آماده کردم یه فرم شبیه تصویر زیر براتون درست می کنه :

افزونه ی معروف و حرفه ای contact form 7

فقط اون قسمت کد امنیتی رو که مشاهده می کنید , با افزونه ی contat form 7 نمیشه اون قسمت رو اضافه کرد اگر شما می خواید که این گزینه هم فعال باشه باید افزونه ی really simple captcha رو هم دانلود و نصبش کنید. خوب این کد امنیتی برای چیست؟ برای جلوگیری از فرستادن برخی ایمیل ها توسط رباط ها, همو ایمیل هایی که اسپم هستند.

اینم کدش :

<p><label for="first-name">نام *</label>

<pre class=”lang:default decode:true”>&lt;/p&gt; &lt;p&gt;&lt;label for=”last-name”&gt;فامیلی *&lt;/label&gt;</pre>

</p> <p><label for="your-email">ایمیل *</label>[email* your-email id:your-email]</p> <p><label for="your-phone">شماره تلفن *</label>

<pre class=”lang:default decode:true”>&lt;/p&gt; &lt;p&gt;&lt;label for=”your-subject”&gt;موضوع&lt;/label&gt;</pre>

</p> <p><label for="your-massege">پیغام شما</label>[textarea your-massege id:your-massege]</p> <h4>لطفا این کد امنیتی را با دقت در کادر زیر تایپ کنید [captchac captcha-714]</h4> <p><label for="captcha-714">کد امنیتی *</label>[captchar captcha-714 id:captcha-714]</p> <p id="wpcf7-indicates-required">* دارها = لازمند</p> <p>[submit "ارسال"]</p>

کد زیر را نیز در قسمت پست الکترونیک بریزید.

From: [first-name] [last-name] <[your-email]>
Subject Body:
[your-email]
Phone: [your-phone]

به تصویر زیر توجه کنید:

contact form 7

کد زیر را هم تو فایل style.css بریزید. ( می تونید با سلیقه ی خودتون استایلاشم ویرایش کنید ).

input[type="text"], textarea {
border: 1px solid #0B2678; 
}

.wpcf7-form {margin-top:20px;}
.wpcf7-form label {
float:right;
text-align:left;
display:block;
margin-left:0.5em;
width: 8em;
font-weight:bold;
}
.wpcf7-form input[type="radio"] {
vertical-align:top;
}
div.wpcf7-mail-sent-ok,
div.wpcf7-mail-sent-ng,
div.wpcf7-spam-blocked,
div.wpcf7-validation-errors {
border:1px solid #EC8800 !important;
}
p#wpcf7-indicates-required {
font-size:.9em;
color:#888888;
}

And for the submit button, you will see rounded corners in Firefox or WebKit (safari, chrome) browsers as well as IE9:

input[type="submit"]{
background:#0b2678;
color:#FFFFFF;
padding:3px;
border:none;
font-size:1.1em;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
letter-spacing:.07em;
}
input[type="submit"]:hover, input[type="submit"]:focus{
color: #ababcc;
}

 

بعداز اینکه کد رو در قسمت ایجاد فرم جدید وارد کردید روی گزینه ذخیره کلیک کنید تا فرم شما ساخته شود,حال کد CSS رو هم در فایل استایلتون اضافه کنید. کار تمام است در قسمت اسم فرمی که ساخته اید یک گزینه به اسم Shortcode هست که شورت کد هر فرم در مقابل آن است. حال شما شورت کد فرمی که می خواهید در سایت نمایش داده شود را کپی کنید و یک برگه ی جدید بسازید و در داخل آن کپی کنید.

برای دانلود افزونه به لینک افزونه contact form 7 در مخزن مراجعه کنید.

ارائه ای از بیگ تم

 

یک پینگ

  1. پینگ‌بک: نکاتی که قبل از تعویض قالب سایت باید انجام دهیم (2) - قالب وردپرس | پوسته وردپرس | افزونه وردپرس | بیگ تم

  2. پینگ‌بک: نحوه قرار دادن shortcode در داخل کدهای قالب| قالب های وردپرس

یک نظر

  1. مریم

    ببخشید این تیکه کدی که گفتین تو stayle.css بریزیم ، از کجا باید این stayle.css رو پیدا کنیم؟منظورتون چیه ازیم؟

  2. وحید

    با سلام
    همه چی افزونه و سایتتان عالیست …
    ولی فیلد بارگذاری فایل و عکس کار نمیکند ..
    کامنت های بالا رو خوندم گفتین آموزش /لینک این اموزش رو بزارین ممنون میشم

  3. محمد

    سلام
    گفته بودید که “وقتی قابلیت آپلود فایل به فرم اضافه می کنید باید فایل پیوست هم مشخص کنید به زودی یه اموزش در این رابطه قرار خواهم داد”

    خیلی وقته منتظرم ولی الان هم آموزشی در این زمینه برای فرم ساز Contact Form 7 توی سایتتون پیدا نکردم.

  4. هادی قربانی

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

  5. هادی قربانی

    اگر دست فیلد مربوط به بارگذاری فایل رو داخل فرم قرار بدید قابلیت ارسال فایل رو بدون مشکل براتون انجام میده

  6. فردین

    با سلام من این افزونه رو نصب کردم همه چیش کار میکنه ولی نگاه کنید استایلش چجوریه
    maktabeabas.ir/%D8%AA%D9%85%D8%A7%D8%B3-%D8%A8%D8%A7-%D9%85%D8%A7

  7. محمد

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

  8. سینا امین زاده

    لطفا بفرمایید از چه افزونه ای استفاده می کنید برای این کار؟
    و امکان این هست در تنظیمات افزونه تنظیم کرده باشید که اطلاعات در دیتابیس ذخیره نشود.

  9. کاوه

    سلام من فرمی را درست کردم ولی هنگام ارسال اظلاعات داخل فرم و بعد از ارسال کردن و رسیدن ایمیل به دست من اظلاعات ارسال نشده است ممنون میشم راهنمایی کنید
    wpcity.net/link-excheng
    نمونه فرم
    متشکرم

  10. هادی قربانی

    این کد مربوط به قالبتون هست می تونید با فایرباک کد css بخش مروبط به textarea رو پیدا کرده و تغییر بدید

  11. یاسمین

    سلام دوستان متخصص.
    چطور میتونم اندازه کادر متن پیام رو (textarea) در Contact Form 7 کوچکتر کنم؟
    ان کد رو در style.css تغییر دادم اما تغییری در فرم ایجاد نمیشه!
    form.contact_form textarea {
    width:360px;
    padding:8px;
    }

  12. میثم محمدی

    بله، دقیقاً…
    با آپدیت جدید هم اینجور شده!
    توی فروم مربوط به این افزونه خیلی ها این مشکل رو مطرح کردن، اما کسی جواب نداده…
    میشه شرت کدهای مربوط به فرم تماس خودتون رو که در قسمت ایمیل وارد می کنین، بگین؟
    مثلاً در قسمت: از… به… سربرگ های اضافی و…

  13. هادی قربانی

    با سلام میثم عزیز
    متوجه نشدم . منظورتون اینه که وقتی یه ایمیل ارسال میشه به جیمیل شما با این فرم شما در پاسخ به اون ایمیل مجددا به خودتون بر می گرده ؟؟!!

  14. میثم محمدی

    سلام
    با آپدیت جدید فرم تماس 7، وقتی یکی فرم رو پر می کنه و ارسال می کنه، ما که می خوایم جواب بدیم، جواب اون ایمیل مربوط به فرم تماس که باید جواب ما واسه ارسال کننده ی فرم بره، واسه خودمون Reply میشه و واسه اون شخص نمیره! مشکل از کجاست؟
    زمانی که از جیمیل می خوام جواب بدم، در قسمت To آدرس ایمیل خودم هست، آدرس ایمیل شخص ارسال کننده ی فرم نیست که بهش پاسخ بدیم!

  15. هادی قربانی

    تنظیماتش رو بررسی کنید که درست باشه
    اگه همه چی رسته اما ایمیل ارسال نمیشه از افزونه Email SMTP هم در کنار افزونه باید استفاده کنید
    این مشل به سرویس گوگل و یاهو بر می گرده شما می تونید با ایمیل دیگه ای هم بررسی کنید

  16. هادی قربانی

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

  17. امیرمحسن

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

    در هاستم قسمت wp-content/uploads نیز یک فایل به نام wpcf7_uploads نیز ایجاد شد

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

    حال این عکس چرا به همراه متن به ایمیلم نیامده؟ میشه راهنماییم کنید

  18. هادی قربانی

    اگه درست ایجاد کرده باشید نباید همچین مشکلی پیش بیاد البته شنیدم وقتی ایمیل یاهو وارد میشه ایمیل ارسال نمی کنه فعلا وقت نشده بررسی کنم

  19. سعید

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

    دلیلش چی میتون هباشه ؟؟

    مرسییییی

  20. iman

    با سلام

    من فرم رو درست کردم اما وقتی فرم رو پر میکنند و ارسال رو میزنن فرم به ایمیلی که بهش دادم فرستاده نمیشه…

    مشکل از کجا میتونه باشه؟
    ممنون میشم راهنمایی کنید

  21. جلال

    سلام . ممنون از راهنماییتون . نمی شه کاری کرد که تو پنل مدیریت ورد پرس بیاد (منظورم پیام هاست )

  22. هادی قربانی

    سلام دوست من
    در قسمت تنظیمات فرم باید ادرس ایمیل خودتون رو وارد کنید , در این صورت پیغامی که از فرم تماس ارسال میشه به ایمیلی که در تنظیمات افزونه قرار دادید ارسال میشه.

  23. jalal

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *