رفتن به مطلب

ساخت فرم به صورت خاص


پست های پیشنهاد شده

سلام به همه دوستان

لطفا به این لینک نگاه کنید

http://nbtele.com/products/

میخام بدونم میشه با وردپرس همچین فرمی ساخت؟

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

چطور این کار با وردپرس انجام میشه؟

یعنی یک فرم رو در قسمت های مختلف آکاردیون پخش کرد؟

لینک به ارسال

آکاردئون شدن فرم هیچ ربطی نه به وردپرس و نه به خود فرم نداره

فرم را می شود در وردپرس یا مستقیما در php ساخت

برای آکاردئون باید از jquery استفاده کرد

در یک ساختار ساده به این شکل


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script><form>
<div class="acardeon">
<div class="f">
<h3>بخش اول</h3>
<div class="part">
محتویات بخش اول
</div>
</div>
<div class="f">
<h3>بخش دوم</h3>
<div class="part">
محتویات بخش دوم
</div>
</div>
<div class="f">
<h3>بخش سوم</h3>
<div class="part">
محتویات بخش سوم
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$(".acardeon .f .part").hide();
$(".acardeon .f:nth-child(1) .part").show();
$(".acardeon .f>h3").click(function() {
var $this = $(this).parent(".f").find(".part");
if($this.is(":hidden"))
{
$(".part").slideUp("slow");
$this.slideDown("slow");
}
});
});
</script>

که اگر به کتابخانه jquery از قبل متصل باشید می توانید


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

را حذف کنید

لینک به ارسال

فکر کنم منظورم رو خوب نرسوندم

من با افزونه آکاردیون ایجاد کردم

همچنین با استفاده از افزونه فرم هم درست کردم

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

لینک به ارسال

کدهای آکاردئون را در هنگام ساخت فرم به کدهاتون اضافه کنید

در زیر محلی که آیتم های فرم را انتخاب می کنید محل کدها مشخصه

لینک به ارسال

شما باید یک فرم بسازی تا یک دکمه ارسال داشته باشی

نیازی به افزونه برای آکاردئون نیست

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

http://jsfiddle.net/j9RzT/1/

و کدهای css و js را هم به محل مناسب منتقل کنید

لینک به ارسال

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

اما چند سوال داشتم

1-من وقتی فرم رو پر میکنم و ارسالش میکنم ایمیلی که دریافت میکنم نوشته ها از چپ به راست و به صورت قاطی هست.

همونطور که گفتم من از contact form 7 استفاده میکنم و هر کاری کردم اون قسمت که مربوط به دریاقت ایمیل میشه رو نمیتونم قارسی کنم که از راست به چپ بنوسیم.

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

چطور این مشکل رو حل کنم؟

2-این کد که دادین:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

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

3-اون لینک سایت که معرفی کردین رفتم و کد جاوا رو برداشتم.بعدش توی فایل هام گشتم یه پوشه جاوا داشتم اما توش چند فایل با پسوند js داشتم . از کجا بدونم از کدومش استقاده کنم و این کد رو داخلش بزارم؟

همینجوری تو یکیش گذاشتم و جواب داد!

4-کمی در مورد اون سایت توضیح میدین که چی هست؟ این کد ها از کجا اومد

ببخشید طولانی شد

من خیلی مبتدی هستم

:(

لینک به ارسال

کدوم سایتی که من لینک دادم؟

اگر منظورتون http://jsfiddle.net/j9RzT/1/ یک سایت عمومیه برای اجرای آزمایشی کدها و من کدهایی که برای شما آماده کردئه بودم رو توش براتون آپلود کردم

و اگر منظورتون

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

است که این لینک نیست این کد در ابتدای کدهاتون قرار داره و متصل کننده است به کتابخانه جی کوئری که چون معمولا همه سایتها الان به این کتابخانه وصلند گفتم اگر سایت شما متصل بود می تونید این بخش رو حذف کنید که کتابخانه دوبار لود نشه

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

و دیگه به اون بخش کد احتیاج ندارید

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


$(document).ready(function() {
$(".acardeon .f .part,.acardeon .f .part table td").hide();
$(".acardeon .f:nth-child(1) .part,.acardeon .f:nth-child(1) .part table td").show();
$(".acardeon .f:nth-child(1) h3").addClass("active");
$(".acardeon .f>h3").click(function() {
var $this = $(this).parent(".f").find(".part");
if($this.is(":hidden"))
{
$(".part").slideUp("slow");
$(".part").find("table td").fadeOut();
$this.slideDown("slow");
$this.find("table td").delay(1000).fadeIn("slow");
$("h3").removeClass("active");
$(this).addClass("active");
}
});
});

و در هنگام ساخت فرم هم بجای نمونه های


[input-radio 2532]

کدهای اینپوتی که ساختید رو بگذارید

این نشانی


//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js

سایت Googlea API استن که CDN مناسب برای کدهاست و البته قرار دادن کد توش برای ایران تحریمه ولی می تونید از کدهای اون استفاده کنید

این نشانی نیازی به پروتکل (http یا https) نداره

لینک به ارسال

ممنون

یه سوال دیگه داشتم

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

همونطور که گفتم من از contact form 7 استفاده میکنم و هر کاری کردم اون قسمت که مربوط به دریاقت ایمیل میشه رو نمیتونم قارسی کنم که از راست به چپ بنوسیم.

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

چطور این مشکل رو حل کنم؟

لینک به ارسال

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

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

اول انگلیسی میاد بعد فارسی

یه سوال دیگه هم داشتم

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

لینک به ارسال

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

مگه ایمیل را خودتون دریافت نمی کنید؟

برای خودتون هم استایل دهی می کنید؟ این استایل ها باعث سنگینی ایمیل و فشار به منابع سرورتون که ارسال کننده است می شه

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

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

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...