امنیت سایت و سرور

امنیت سایت

رفع خطاهای w3c

رفع خطاهای w3c

افزایش سرعت سایت

سرعت سایت

ریسپانسیو

ریسپانسیو

پشتیبانی

پشتیبانی سایت

سئو و بهینه سازی

سئو و بهینه سازی

فروشگاه انجمن

فروشگاه انجمن

هاست وردپرس

هاست وردپرس


نمایش نتایج: از 1 به 8 از 8

موضوع: کلاس css برای فرم ساز

  1. #1
    کاربر سایت kenzo آواتار ها
    تاریخ عضویت
    Nov 2017
    نوشته ها
    79
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض کلاس css برای فرم ساز

    با سلام خدمت اساتید محترم

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

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

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

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

    خواهشمندم هریک از دوستان که توانایی اش رو داره راهنمایی بکنه یا css مربوطه رو در صورت امکان بده

    باتشکر

  2. #2
    مدیر بخش yazdanian آواتار ها
    تاریخ عضویت
    Oct 2017
    نوشته ها
    172
    تشکر تشکر کرده 
    1
    تشکر تشکر شده 
    15
    Thanked in
    8 پست

    پیش فرض

    سلام وقت بخیر دسترسی بفرستید به پیام خصوصی انجام میشه.

  3. #3
    مدیریت کل سایت admin آواتار ها
    تاریخ عضویت
    Oct 2017
    نوشته ها
    768
    تشکر تشکر کرده 
    13
    تشکر تشکر شده 
    5
    Thanked in
    5 پست

    پیش فرض

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

    تلگرام بنده :
    برای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنیدبرای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنید

  4. #4
    کاربر سایت kenzo آواتار ها
    تاریخ عضویت
    Nov 2017
    نوشته ها
    79
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض

    پیام خصوصی کردم خدمتتون
    لظفا نشر عمومی نشه

  5. #5
    کاربر سایت kenzo آواتار ها
    تاریخ عضویت
    Nov 2017
    نوشته ها
    79
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض

    استایل فرم مرجع
    کد:
    @font-face{font-family:'Yekan';src:url('../fonts/BYekan.ttf') format('truetype'), url('../fonts/BYekan.eot?#') format('eot'), url('../fonts/BYekan.woff') format('woff');font-style:normal;font-weight:normal;}
    @font-face{font-family:'iran';src:url('../fonts/iran.ttf') format('truetype'), url('../fonts/iran.eot?#') format('eot'), url('../fonts/iran.woff') format('woff');font-style:normal;font-weight:normal;}
    .body{
    	background: url("../images/bg.jpg") no-repeat;
    	direction:rtl;
    	padding:5px;
    }
    hr {
           border : 0;
           height : 1px;
           background : #d9d9d9;
           margin : 1em 0;
           }
    .form-style-6{
        font: 95% Yekan;
        max-width: 500px;
        margin: 10px auto;
        padding: 16px;
        background: #F7F7F7;
    }
    .form-style-6 h1{
        background: #6ea000;
        padding: 20px 0;
        font-size: 140%;
        font-weight: 300;
        text-align: center;
        color: #fff;
        margin: -8px -8px 8px -8px;
    	border-radius: 3px 3px 0px 0px;
    }
    .form-style-6 input[type="text"],
    .form-style-6 input[type="date"],
    .form-style-6 input[type="datetime"],
    .form-style-6 input[type="email"],
    .form-style-6 input[type="number"],
    .form-style-6 input[type="phone"],
    .form-style-6 input[type="search"],
    .form-style-6 input[type="time"],
    .form-style-6 input[type="url"],
    .form-style-6 textarea,
    .form-style-6 select 
    {
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;
        -ms-transition: all 0.30s ease-in-out;
        -o-transition: all 0.30s ease-in-out;
        outline: none;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        background: #fff;
        margin-bottom: 4%;
        border: 1px solid #ccc;
        padding: 3%;
        color: #555;
        font: 95% Yekan;
        text-align: right;
    }
    .form-style-6 input[type="text"]:focus,
    .form-style-6 input[type="date"]:focus,
    .form-style-6 input[type="datetime"]:focus,
    .form-style-6 input[type="email"]:focus,
    .form-style-6 input[type="number"]:focus,
    .form-style-6 input[type="search"]:focus,
    .form-style-6 input[type="time"]:focus,
    .form-style-6 input[type="url"]:focus,
    .form-style-6 textarea:focus,
    .form-style-6 select:focus
    {
        box-shadow: 0 0 5px #6ea000;
        padding: 3%;
        border: 1px solid #6ea000;
    }
    
    .form-style-6 input[type="submit"],
    .form-style-6 input[type="button"]{
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        padding: 3%;
        background: #6ea000;
        border-bottom: 2px solid #577f00;
        border-top-style: none;
        border-left-style: none;
        border-right-style: none;    
        color: #fff;
    }
    .form-style-6 input[type="submit"]:hover,
    .form-style-6 input[type="button"]:hover{
        background: #577f00;
    }
    #formmarina label{
    	font-size:18px;
    }
    #formmarina{
    	background:#fcfcfc;
    	-webkit-box-shadow: 0px 0px 5px 0px rgba(161,161,161,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(161,161,161,1);
    box-shadow: 0px 0px 5px 0px rgba(161,161,161,1);
    padding:10px;
    border-radius:3px;
    -webkit-box-shadow: 0px 0px 33px 0px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 33px 0px rgba(255,255,255,1);
    box-shadow: 0px 0px 33px 0px rgba(255,255,255,1);
    }
    
    [type="checkbox"]:checked,
    [type="checkbox"]:not(:checked) {
        position: absolute;
        right: -9999px;
    }
    [type="checkbox"]:checked + label,
    [type="checkbox"]:not(:checked) + label
    {
        position: relative;
        padding-right: 28px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #666;
    }
    [type="checkbox"]:checked + label:before,
    [type="checkbox"]:not(:checked) + label:before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        width: 18px;
        height: 18px;
        border: 1px solid #ddd;
        border-radius: 100%;
        background: #fff;
    }
    [type="checkbox"]:checked + label:after,
    [type="checkbox"]:not(:checked) + label:after {
        content: '';
        width: 12px;
        height: 12px;
        background: #F87DA9;
        position: absolute;
        top: 4px;
        right: 4px;
        border-radius: 100%;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    [type="checkbox"]:checked + label:after {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:    #ccc;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
       color:    #ccc;
       opacity:  1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
       color:    #ccc;
       opacity:  1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
       color:    #ccc;
    }
    ::-ms-input-placeholder { /* Microsoft Edge */
       color:    #ccc;
    }
    .mfmverify{
        	background:#fcfcfc;
    	-webkit-box-shadow: 0px 0px 5px 0px rgba(161,161,161,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(161,161,161,1);
    box-shadow: 0px 0px 5px 0px rgba(161,161,161,1);
    padding:10px;
    border-radius:3px;
    -webkit-box-shadow: 0px 0px 33px 0px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 33px 0px rgba(255,255,255,1);
    box-shadow: 0px 0px 33px 0px rgba(255,255,255,1);
        width: 50%;
        margin-top:40px;
    }
    @media only screen and (max-width: 500px) {
        .mfmverify{
            width: 90%;
            margin:10px;
        }
    }

    دایو و کلاس های فرم مرجع :
    کد HTML:
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=90%, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
    
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/boot.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    
    <link rel="stylesheet" href="css/style.css" />
    <meta charset="utf-8" />
    </head>
    <body class="body">
    <div class="form-style-6" id="formmarina">
    <h1>  طراحی سايت مارينا</h1>
    <form id="formmarina" action="send.php" method="post" onsubmit='return checkLength();'>
    <input type="text" name="name" placeholder="نام و نام خانوادگی" required/>
    <input type="email" name="email" placeholder="ایمیل" />
    <input type="number" name="code"  onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)" placeholder="کد انتخابی شما" maxlength = "3"
        min = "100"
        max = "999" required/>
    <input type="number" class="textfield" placeholder="شماره تماس: مثال 09121234567" oninput="maxLengthCheck2(this)" id="extra7" maxlength = "11" name="extra7"   required />
    <input id='1' type='checkbox' name='chk' value='4000000'  onclick='calculate()' />
    	<label for='1'>
    400,000 تومان پیش پرداخت
    	</label>
    	<br />
    	<input id='2' type='checkbox' name='chk' value='5000000' onclick='calculate()' />
    	<label for='2'>
    500,000 تومان هزینه باقیمانده
    	</label>
    	<p>
    	<select id='op1' onchange='calculate()' style='color:#4b6176; '>
    	  <option value='0' >-- تعداد زبان سايت --</option>
    	  <option value='2000000' >دو زبانه</option>
    	  <option value='3500000' >سه زبانه</option>
    	</select>
    	</p>
    	<div style="border:2px dashed #ccc; padding:10px">
    	<span style='font-size:18px; color: #666;'>مبلغ قابل پرداخت: </span><br /><label type='text' id='labelmfm' style='font-size:24px; color: #666;'>0</label><span style='font-size:24px; color: #666;'> ریال</span>
    	<input type='hidden' value='0' id='example' name='amount' style='font-size:24px' readonly >
    	</div>
    	<br />
    	<center><span style='font-size:14px; font-family:iran'>تمامی هزینه های فوق با احتساب مالیات می باشد.</span></center>
    	<input type="submit" value="پرداخت" style='font-size:18px; font-family:yekan' />
    </form>
    </div>
    
    </body>
    <script type="text/javascript">
    
    function calculate() {
    var one = document.getElementById("op1").value;
    var el, i = 0;
    var total = 0;
    while(el = document.getElementsByName("chk")[i++]) {
    if(el.checked) { total= total + Number(el.value);}
    }
    mfm= parseInt(total) + parseInt(one);
    document.getElementById("example").setAttribute('value', mfm);
    document.getElementById("labelmfm").textContent = mfm;
    }
    function maxLengthCheck(object) {
        if (object.value.length > object.maxLength)
          object.value = object.value.slice(0, object.maxLength)
      }
    function maxLengthCheck2(object) {
        if (object.value.length > object.maxLength)
          object.value = object.value.slice(0, object.maxLength)
      }  
    function isNumeric (evt) {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode (key);
        var regex = /[0-9]|\./;
        if ( !regex.test(key) ) {
          theEvent.returnValue = false;
          if(theEvent.preventDefault) theEvent.preventDefault();
        }
      }
    </script>

  6. #6
    کاربر سایت kenzo آواتار ها
    تاریخ عضویت
    Nov 2017
    نوشته ها
    79
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض

    ااستایل فرم بنده :
    ( نذارد لطفا راهنمایی نمایید .

    کد های فرم ساز بنده :
    کد HTML:
    			<div class="row">
    				
    				
    
     
    
    				
    					
    		
    		
                    <div class="gf_browser_gecko gform_wrapper" id="gform_wrapper_2"><form method="post" enctype="multipart/form-data" target="gform_ajax_frame_2" id="gform_2" action="/pay/">
                            <div class="gform_heading">
                                <span class="gform_description"></span>
                            </div>
                            <div class="gform_body"><ul id="gform_fields_2" class="gform_fields top_label form_sublabel_below description_below"><li id="field_2_4" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2_4"><span class="gfield_required">*</span></label><div class="ginput_container ginput_container_email">
                                <input name="input_4" id="input_2_4" value="" class="medium" tabindex="1001" placeholder="ایمیل" aria-required="true" aria-invalid="false" type="text">
                            </div></li><li id="field_2_15" class="gfield formmarina gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2_15"><span class="gfield_required">*</span></label><div class="ginput_container ginput_container_text"><input name="input_15" id="input_2_15" value="" class="medium" tabindex="1000" placeholder="نام و نام خانوادگی" aria-required="true" aria-invalid="false" type="text"></div></li><li id="field_2_7" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2_7"><span class="gfield_required">*</span></label><div class="ginput_container ginput_container_phone"><input name="input_7" id="input_2_7" value="" class="medium" tabindex="1002" placeholder="تلفن" aria-required="true" aria-invalid="false" type="text"></div></li><li id="field_2_10" class="gfield gfield_price gfield_price_2_10 gfield_product_2_10 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2_10">محصول انتخابی شما<span class="gfield_required">*</span></label><div class="ginput_container ginput_container_select"><select name="input_10" id="input_2_10" class="medium gfield_select" tabindex="1003" aria-required="true" aria-invalid="false"><option value="شرکتی کد 1|3500000" selected="selected">شرکتی کد ۱</option><option value="شرکتی کد 2|3500000">شرکتی کد ۲</option><option value="شرکتی کد 3|3500000">شرکتی کد ۳</option></select></div></li><li id="field_2_12" class="gfield gfield_price gfield_price_2_ gfield_total gfield_total_2_ field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2_12">مبلغ قابل پرداخت</label><div class="ginput_container ginput_container_total">
    						<span class="ginput_total ginput_total_2">3,500,000 ریال</span>
    						<input name="input_12" id="input_2_12" class="gform_hidden" value="3500000" type="hidden">
    					</div></li>
                                </ul></div>
            <div class="gform_footer top_label"> <input id="gform_submit_button_2" class="gform_button button" value="پرداخت" tabindex="1004" onclick="if(window[&quot;gf_submitting_2&quot;]){return false;}  window[&quot;gf_submitting_2&quot;]=true;  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_2&quot;]){return false;} window[&quot;gf_submitting_2&quot;]=true;  jQuery(&quot;#gform_2&quot;).trigger(&quot;submit&quot;,[true]); }" type="submit"> <input name="gform_ajax" value="form_id=2&amp;title=&amp;description=1&amp;tabindex=1" type="hidden">
                <input class="gform_hidden" name="is_submit_2" value="1" type="hidden">
                <input class="gform_hidden" name="gform_submit" value="2" type="hidden">
                
                <input class="gform_hidden" name="gform_unique_id" value="" type="hidden">
                <input class="gform_hidden" name="state_2" value="WyJ7XCIxMFwiOltcImE0ZmQ4ZDI1ZjU2N2E3MmMzYWMxOTkzOGJkYTY0YzkxXCIsXCJjOTZlYjAxZmIyNzY1YjFkNGM4N2ZlYTQzMDIyNTQwNlwiLFwiMjgzMGEyM2IzZDhiMGY0N2ZiOTVlY2ExNWU5ZjJkZTBcIl19IiwiNGY4ZWNkMmRkNGJlNTA1YjM3NGMwOWNkNzcxM2IwZDciXQ==" type="hidden">
                <input class="gform_hidden" name="gform_target_page_number_2" id="gform_target_page_number_2" value="0" type="hidden">
                <input class="gform_hidden" name="gform_source_page_number_2" id="gform_source_page_number_2" value="1" type="hidden">
                <input name="gform_field_values" value="" type="hidden">
                
            </div>
                            </form>
                            </div>
                    <iframe style="display:none;width:0px;height:0px;" src="about:blank" name="gform_ajax_frame_2" id="gform_ajax_frame_2">This iframe contains the logic required to handle Ajax powered Gravity Forms.</iframe>
                    <script type="text/javascript">jQuery(document).ready(function($){gformInitSpinner( 2, 'http://i-navid.ir/wp-content/plugins/gravityforms-master/images/spinner.gif' );jQuery('#gform_ajax_frame_2').load( function(){var contents = jQuery(this).contents().find('*').html();var is_postback = contents.indexOf('GF_AJAX_POSTBACK') >= ۰;if(!is_postback){return;}var form_content = jQuery(this).contents().find('#gform_wrapper_2');var is_confirmation = jQuery(this).contents().find('#gform_confirmation_wrapper_2').length > ۰;var is_redirect = contents.indexOf('gformRedirect(){') >= ۰;var is_form = form_content.length > ۰ && ! is_redirect && ! is_confirmation;if(is_form){jQuery('#gform_wrapper_2').html(form_content.html());if(form_content.hasClass('gform_validation_error')){jQuery('#gform_wrapper_2').addClass('gform_validation_error');} else {jQuery('#gform_wrapper_2').removeClass('gform_validation_error');}setTimeout( function() { /* delay the scroll by 50 milliseconds to fix a bug in chrome */  }, 50 );if(window['gformInitDatepicker']) {gformInitDatepicker();}if(window['gformInitPriceFields']) {gformInitPriceFields();}var current_page = jQuery('#gform_source_page_number_2').val();gformInitSpinner( 2, 'http://i-navid.ir/wp-content/plugins/gravityforms-master/images/spinner.gif' );jQuery(document).trigger('gform_page_loaded', [2, current_page]);window['gf_submitting_2'] = false;}else if(!is_redirect){var confirmation_content = jQuery(this).contents().find('.GF_AJAX_POSTBACK').html();if(!confirmation_content){confirmation_content = contents;}setTimeout(function(){jQuery('#gform_wrapper_2').replaceWith(confirmation_content);jQuery(document).trigger('gform_confirmation_loaded', [2]);window['gf_submitting_2'] = false;}, 50);}else{jQuery('#gform_2').append(contents);if(window['gformRedirect']) {gformRedirect();}}jQuery(document).trigger('gform_post_render', [2, current_page]);} );} );</script><script type="text/javascript"> if(typeof gf_global == 'undefined') var gf_global = {"gf_currency_config":{"name":"\u0631\u06cc\u0627\u0644","symbol_left":"","symbol_right":"\u0631\u06cc\u0627\u0644","symbol_padding":" ","thousand_separator":",","decimal_separator":".","decimals":0},"base_url":"http:\/\/i-navid.ir\/wp-content\/plugins\/gravityforms-master","number_formats":[],"spinnerUrl":"http:\/\/i-navid.ir\/wp-content\/plugins\/gravityforms-master\/images\/spinner.gif"};jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 2) {gf_global["number_formats"][2] = {"15":{"price":false,"value":false},"4":{"price":false,"value":false},"7":{"price":false,"value":false},"10":{"price":"decimal_dot","value":false},"12":{"price":false,"value":false}};if(window["gformInitPriceFields"]) jQuery(document).ready(function(){gformInitPriceFields();} );if(typeof Placeholders != 'undefined'){
                            Placeholders.enable();
                        }} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type="text/javascript"> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [2, 1]) } ); </script>
    					
    			
    
    
    							</div>

  7. #7
    مدیریت کل سایت admin آواتار ها
    تاریخ عضویت
    Oct 2017
    نوشته ها
    768
    تشکر تشکر کرده 
    13
    تشکر تشکر شده 
    5
    Thanked in
    5 پست

    پیش فرض

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

    تلگرام بنده :
    برای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنیدبرای استفاده از امکانات سایت کنید
    برای استفاده از امکانات سایت کنید

  8. #8
    کاربر سایت kenzo آواتار ها
    تاریخ عضویت
    Nov 2017
    نوشته ها
    79
    تشکر تشکر کرده 
    0
    تشکر تشکر شده 
    0
    Thanked in
    0 پست

    پیش فرض

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

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

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

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

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

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