What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    customizing file upload button

    Asked by cthuaegggh 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
    JotForm Support

    Answered by idarktech 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

    Answered by cthuaegggh 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!