customizing file upload button

  • Profile Image
    cthuaegggh
    Asked on May 14, 2012 at 07:33 AM

    hi guys,

    o.k. i tried and tried for hours now. o.O*

    but i can't get it working.

    i want to customize my file upload button just the way i customize the submit button.

    .qq-upload-button and the link http://www.jotform.com/help/139-Custom-Colors-for-Multi-upload-Buttons

    didn't work for me cause i am unable to realize what to do exactly...

    could u help?

     

    <script src="//max.jotfor.ms/min/g=jotform?3.0.3553" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init(function(){

          $('input_16').hint('ex: myname@example.com');

          JotForm.initCaptcha('input_19');

          JotForm.alterTexts({"alphabetic":"This field can only contain letters","alphanumeric":"This field can only contain letters and numbers.","confirmClearForm":"Are you sure you want to clear the form","confirmEmail":"E-mail does not match","email":"Enter a valid e-mail address","incompleteFields":"","lessThan":"Your score should be less than","numeric":"This field can only contain numeric values","pleaseWait":"Please wait...","required":"Fehlerhafte Eingabe.","uploadExtensions":"You can only upload following files:","uploadFilesize":"File size cannot be bigger than:"});

       });

    </script>

    <link target="_blank" href="http://max.jotfor.ms/min/g=formCss?3.0.3553" rel="nofollow noopener" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotformeu.com/css/styles/big.css?3.0.3553" rel="nofollow noopener" />

    <style type="text/css">

        .form-label{

            width:150px !important;

        }

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:12px;

            padding-bottom:12px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:912px;

            background:transparent;

            color:#555555 !important;

            font-family:'Default';

            font-size:14px;

        }

        .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{

            color:#555555;

        }

     

        /* Injected CSS Code */

    .form-line-active {

    background:none repeat scroll 0 0;

    }

    .form-required-off {

    color: transparent;

    }

    .form-line-error-off {

    background:none repeat scroll 0 0;

    }

    .form-line-error {

    background:red repeat scroll 0 0;

    }

    .form-error-message {

    display: none !important;

    }

    .form-validation-error {

    -moz-box-shadow:none;

    -webkit-box-shadow:none;

    box-shadow:none;

    }

    .form-button-error {

    display: none;

    }.form-submit-button:hover {

    background: #ffe100;

    border: 2px solid #ff0000;

    color: #ff0000;

    }

    .form-submit-button, .form-submit-reset, .form-submit-print {

    background: #ff0000;

    border: 2px solid #ffe100;

    color: #ffe100;

    font-size: 18px;

    font-family: 'MetaPro-Black', normal;

    margin: 0;

    overflow: visible;

    padding: 10px;

    width: 200px;

    -moz-border-radius:10px 10px;

    -webkit-border-radius:10px 10px;

    border-radius:10px 10px;

    cursor:pointer;

    }

    .form-submit-button:hover {

    background: #ffe100;

    border: 2px solid #ff0000;

    color: #ff0000;

    }

     

        /* Injected CSS Code */

    </style>

     

    <form class="jotform-form" action="http://submit.jotformeu.com/submit/21336001392340/" method="post" enctype="multipart/form-data" name="form_21336001392340" id="21336001392340" accept-charset="utf-8">

      <input type="hidden" name="formID" value="21336001392340" />

      <div class="form-all">

        <ul class="form-section">

          <li class="form-line" id="id_21">

            <label class="form-label-left" id="label_21" for="input_21">

              Vor- und Nachname:<span class="form-required">*</span>

            </label>

            <div id="cid_21" class="form-input">

              <input type="text" class="form-textbox validate[required]" id="input_21" name="q21_vorUnd" size="60" />

            </div>

          </li>

          <li class="form-line" id="id_16">

            <label class="form-label-left" id="label_16" for="input_16">

              E-Mail:<span class="form-required">*</span>

            </label>

            <div id="cid_16" class="form-input">

              <input type="email" class="form-textbox validate[required, Email]" id="input_16" name="q16_email" size="60" />

            </div>

          </li>

          <li class="form-line" id="id_17">

            <label class="form-label-left" id="label_17" for="input_17">

              Nachricht:<span class="form-required">*</span>

            </label>

            <div id="cid_17" class="form-input">

              <textarea id="input_17" class="form-textarea validate[required]" name="q17_nachricht17" cols="60" rows="9"></textarea>

            </div>

          </li>

          <li class="form-line" id="id_22">

            <label class="form-label-left" id="label_22" for="input_22"> Anhang hinzufügen:(optional) </label>

            <div id="cid_22" class="form-input">

              <input class="form-upload" type="file" id="input_22" name="q22_anhangHinzufugenoptional" file-accept="pdf, doc, docx, xls, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" file-maxsize="10240" />

            </div>

          </li>

          <li class="form-line" id="id_19">

            <label class="form-label-left" id="label_19" for="input_19">

              Sicherheitscode eingeben:<span class="form-required">*</span>

            </label>

            <div id="cid_19" class="form-input">

              <div class="form-captcha">

                <label for="input_19"> <img alt="Captcha - Reload if it's not displayed" id="input_19_captcha" class="form-captcha-image" style="background:url(http://jotformeu.com/images/loader-big.gif) no-repeat center;" src="//jotformeu.com/images/blank.gif" width="150" height="41" /> </label>

                <div style="white-space:nowrap;">

                  <input type="text" id="input_19" class="form-textbox validate[required]" name="captcha" style="width:130px;" />

                  <img src="//jotformeu.com/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_19');" />

                  <input type="hidden" name="captcha_id" id="input_19_captcha_id" value="0" />

                </div>

              </div>

            </div>

          </li>

          <li class="form-line" id="id_23">

            <div id="cid_23" class="form-input-wide">

              <div style="margin-left:156px" class="form-buttons-wrapper">

                <button id="input_23" type="submit" class="form-submit-button">

                  SENDEN

                </button>

              </div>

            </div>

          </li>

          <li style="display:none">

            Should be Empty:

            <input type="text" name="website" value="" />

          </li>

        </ul>

      </div>

      <input type="hidden" id="simple_spc" name="simple_spc" value="21336001392340" />

      <script type="text/javascript">

      document.getElementById("si" + "mple" + "_spc").value = "21336001392340-21336001392340";

      </script>

    </form>

  • Profile Image
    idarktech
    Answered on May 14, 2012 at 07:53 AM

    Hi,

    Be sure to switch first your file upload tool to multi-upload tool before you'll inject the css codes for multi-upload button.

    Let me know if you need any further assistance or clarifications about this. Thanks!

  • Profile Image
    cthuaegggh
    Answered on May 14, 2012 at 08:22 AM

    Thank you so much^^. I missed the fact somehow...

    Just enabled allow multiple option and .qq-upload-button and .qq-upload-button:hover works fine to customize the file upload button via injected CSS.

    JotForm is the best!