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

    How can I stop fields from moving out of place

    Asked by Tmanic on July 06, 2012 at 06:13 AM

    Hi

    My Form County League Results Form caters for two situations. If the user selects Championship Teams from the event field some fields are automatically suppressed. If they select any of the County League options all fields are dispalyed.

    The problem shows when you select Championship Teams. The 'Losing Captain' and 'Losing Team Members' fields jump out of place. How can I prevent this from happening.

    Also how can I change the colour of the Caption and center it and finally I only need the Date field to show years from 2010. Can I do this?

    Many thanks

     

    Tony Manickam

    Screenshot
  • Profile Image

    Answered by pinoytech on July 06, 2012 at 12:33 PM

    Hi,

    Your form is working properly in my end upon checking it using Chrome, Firefox and IE. Please take a look screenshot here. Regarding on your second question, please take a look at here if this is what you want to achieved. If yes, please use this custom CSS and inject it into your form.

    .form-header-group {

    text-align: center !important;

    color: #11A1F0;

    }

    Yes, regarding on your last question that you only want Date field show's year from 2010. All you need to do is, edit your form source code and remove those years that you don't want to show.

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

    <script type="text/javascript">

       JotForm.setConditions([{"action":{"field":"4","visibility":"Show"},"link":"Any","terms":[{"field":"14","operator":"equals","value":"Championship Teams"}],"type":"field"},{"action":{"field":"4","visibility":"Show"},"link":"Any","terms":[{"field":"14","operator":"notEquals","value":"Championship Teams"}],"type":"field"},{"action":{"field":"3","visibility":"Show"},"link":"Any","terms":[{"field":"14","operator":"notEquals","value":"Championship Teams"},{"field":"4","operator":"isFilled","value":false}],"type":"field"},{"action":{"field":"6","visibility":"Show"},"link":"Any","terms":[{"field":"14","operator":"notEquals","value":"Championship Teams"}],"type":"field"}]);

       JotForm.init(function(){

          JotForm.description('input_14', 'All Starred entries must be completed.');

          $('input_16').hint('A.Another');

          JotForm.description('input_16', 'Name & Initial only. All Team members are reqd for the allocation of VL Points');

          $('input_17').hint('B. Another');

          JotForm.description('input_17', 'Name & Initial only. All Team members are reqd for the allocation of VL Points');

       });

    </script>

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

    <style type="text/css">

        .form-label{

            width:150px !important;

        }

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:10px;

            padding-bottom:10px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:500px;

            background:#11A1F0;

            color:#000000 !important;

            font-family:'Verdana';

            font-size:12px;

        }

    </style>

     

    <form class="jotform-form" action="http://submit.jotform.me/submit/21874987178473/" method="post" name="form_21874987178473" id="21874987178473" accept-charset="utf-8">

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

      <div class="form-all">

        <ul class="form-section">

          <li id="cid_13" class="form-input-wide">

            <div class="form-header-group">

              <h1 id="header_13" class="form-header">

                Match Results Form

              </h1>

            </div>

          </li>

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

            <label class="form-label-top" id="label_14" for="input_14">

              Event (Please select)<span class="form-required">*</span>

            </label>

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

              <select class="form-dropdown validate[required]" style="width:100px" id="input_14" name="q14_eventplease">

                <option>  </option>

                <option value="Championship Teams"> Championship Teams </option>

                <option value="County League - Div 1"> County League - Div 1 </option>

                <option value="County League - Div 2"> County League - Div 2 </option>

                <option value="County League - Div 3"> County League - Div 3 </option>

              </select>

            </div>

          </li>

          <li class="form-line form-line-column" id="id_4">

            <label class="form-label-top" id="label_4" for="input_4">

              Club 1<span class="form-required">*</span>

            </label>

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

              <input type="text" class="form-textbox validate[required]" id="input_4" name="q4_club4" size="20" />

            </div>

          </li>

          <li class="form-line form-line-column" id="id_3">

            <label class="form-label-top" id="label_3" for="input_3">

              Club 2<span class="form-required">*</span>

            </label>

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

              <input type="text" class="form-textbox validate[required]" id="input_3" name="q3_club3" size="20" />

            </div>

          </li>

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

            <label class="form-label-top" id="label_15" for="input_15"> Date Played: </label>

            <div id="cid_15" class="form-input-wide"><span class="form-sub-label-container"><select class="form-dropdown" name="q15_datePlayed[day]" id="input_15_day">

                  <option>  </option>

                  <option value="1"> 1 </option>

                  <option value="2"> 2 </option>

                  <option value="3"> 3 </option>

                  <option value="4"> 4 </option>

                  <option value="5"> 5 </option>

                  <option value="6"> 6 </option>

                  <option value="7"> 7 </option>

                  <option value="8"> 8 </option>

                  <option value="9"> 9 </option>

                  <option value="10"> 10 </option>

                  <option value="11"> 11 </option>

                  <option value="12"> 12 </option>

                  <option value="13"> 13 </option>

                  <option value="14"> 14 </option>

                  <option value="15"> 15 </option>

                  <option value="16"> 16 </option>

                  <option value="17"> 17 </option>

                  <option value="18"> 18 </option>

                  <option value="19"> 19 </option>

                  <option value="20"> 20 </option>

                  <option value="21"> 21 </option>

                  <option value="22"> 22 </option>

                  <option value="23"> 23 </option>

                  <option value="24"> 24 </option>

                  <option value="25"> 25 </option>

                  <option value="26"> 26 </option>

                  <option value="27"> 27 </option>

                  <option value="28"> 28 </option>

                  <option value="29"> 29 </option>

                  <option value="30"> 30 </option>

                  <option value="31"> 31 </option>

                </select>

                <label class="form-sub-label" for="input_15_day" id="sublabel_day"> Day </label></span><span class="form-sub-label-container"><select class="form-dropdown" name="q15_datePlayed[month]" id="input_15_month">

                  <option>  </option>

                  <option value="January"> January </option>

                  <option value="February"> February </option>

                  <option value="March"> March </option>

                  <option value="April"> April </option>

                  <option value="May"> May </option>

                  <option value="June"> June </option>

                  <option value="July"> July </option>

                  <option value="August"> August </option>

                  <option value="September"> September </option>

                  <option value="October"> October </option>

                  <option value="November"> November </option>

                  <option value="December"> December </option>

                </select>

                <label class="form-sub-label" for="input_15_month" id="sublabel_month"> Month </label></span><span class="form-sub-label-container"><select class="form-dropdown" name="q15_datePlayed[year]" id="input_15_year">

                  <option>  </option>

                  <option value="2016"> 2016 </option>

                  <option value="2015"> 2015 </option>

                  <option value="2014"> 2014 </option>

                  <option value="2013"> 2013 </option>

                  <option value="2012"> 2012 </option>

                  <option value="2011"> 2011 </option>

                  <option value="2010"> 2010 </option>

                  <option value="2009"> 2009 </option>

                  <option value="2008"> 2008 </option>

                  <option value="2007"> 2007 </option>

                  <option value="2006"> 2006 </option>

                  <option value="2005"> 2005 </option>

                  <option value="2004"> 2004 </option>

                  <option value="2003"> 2003 </option>

                  <option value="2002"> 2002 </option>

                  <option value="2001"> 2001 </option>

                  <option value="2000"> 2000 </option>

                  <option value="1999"> 1999 </option>

                  <option value="1998"> 1998 </option>

                  <option value="1997"> 1997 </option>

                  <option value="1996"> 1996 </option>

                  <option value="1995"> 1995 </option>

                  <option value="1994"> 1994 </option>

                  <option value="1993"> 1993 </option>

                  <option value="1992"> 1992 </option>

                  <option value="1991"> 1991 </option>

                  <option value="1990"> 1990 </option>

                  <option value="1989"> 1989 </option>

                  <option value="1988"> 1988 </option>

                  <option value="1987"> 1987 </option>

                  <option value="1986"> 1986 </option>

                  <option value="1985"> 1985 </option>

                  <option value="1984"> 1984 </option>

                  <option value="1983"> 1983 </option>

                  <option value="1982"> 1982 </option>

                  <option value="1981"> 1981 </option>

                  <option value="1980"> 1980 </option>

                  <option value="1979"> 1979 </option>

                  <option value="1978"> 1978 </option>

                  <option value="1977"> 1977 </option>

                  <option value="1976"> 1976 </option>

                  <option value="1975"> 1975 </option>

                  <option value="1974"> 1974 </option>

                  <option value="1973"> 1973 </option>

                  <option value="1972"> 1972 </option>

                  <option value="1971"> 1971 </option>

                  <option value="1970"> 1970 </option>

                  <option value="1969"> 1969 </option>

                  <option value="1968"> 1968 </option>

                  <option value="1967"> 1967 </option>

                  <option value="1966"> 1966 </option>

                  <option value="1965"> 1965 </option>

                  <option value="1964"> 1964 </option>

                  <option value="1963"> 1963 </option>

                  <option value="1962"> 1962 </option>

                  <option value="1961"> 1961 </option>

                  <option value="1960"> 1960 </option>

                  <option value="1959"> 1959 </option>

                  <option value="1958"> 1958 </option>

                  <option value="1957"> 1957 </option>

                  <option value="1956"> 1956 </option>

                  <option value="1955"> 1955 </option>

                  <option value="1954"> 1954 </option>

                  <option value="1953"> 1953 </option>

                  <option value="1952"> 1952 </option>

                  <option value="1951"> 1951 </option>

                  <option value="1950"> 1950 </option>

                  <option value="1949"> 1949 </option>

                  <option value="1948"> 1948 </option>

                  <option value="1947"> 1947 </option>

                  <option value="1946"> 1946 </option>

                  <option value="1945"> 1945 </option>

                  <option value="1944"> 1944 </option>

                  <option value="1943"> 1943 </option>

                  <option value="1942"> 1942 </option>

                  <option value="1941"> 1941 </option>

                  <option value="1940"> 1940 </option>

                  <option value="1939"> 1939 </option>

                  <option value="1938"> 1938 </option>

                  <option value="1937"> 1937 </option>

                  <option value="1936"> 1936 </option>

                  <option value="1935"> 1935 </option>

                  <option value="1934"> 1934 </option>

                  <option value="1933"> 1933 </option>

                  <option value="1932"> 1932 </option>

                  <option value="1931"> 1931 </option>

                  <option value="1930"> 1930 </option>

                  <option value="1929"> 1929 </option>

                  <option value="1928"> 1928 </option>

                  <option value="1927"> 1927 </option>

                  <option value="1926"> 1926 </option>

                  <option value="1925"> 1925 </option>

                  <option value="1924"> 1924 </option>

                  <option value="1923"> 1923 </option>

                  <option value="1922"> 1922 </option>

                  <option value="1921"> 1921 </option>

                  <option value="1920"> 1920 </option>

                </select>

                <label class="form-sub-label" for="input_15_year" id="sublabel_year"> Year </label></span>

            </div>

          </li>

          <li class="form-line form-line-column" id="id_6">

            <label class="form-label-top" id="label_6" for="input_6">

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

            </label>

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

              <input type="text" class="form-textbox validate[required]" id="input_6" name="q6_wonBy" size="20" />

            </div>

          </li>

          <li class="form-line form-line-column" id="id_7">

            <label class="form-label-top" id="label_7" for="input_7"> Won by IMPs: </label>

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

              <input type="text" class="form-textbox" id="input_7" name="q7_numOf" size="20" />

            </div>

          </li>

          <li class="form-line form-line-column form-line-column-clear" id="id_8">

            <label class="form-label-top" id="label_8" for="input_8">

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

            </label>

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

              <input type="text" class="form-textbox validate[required]" id="input_8" name="q8_winningCaptain" size="20" />

            </div>

          </li>

          <li class="form-line form-line-column" id="id_9">

            <label class="form-label-top" id="label_9" for="input_9"> Losing Captain: </label>

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

              <input type="text" class="form-textbox" id="input_9" name="q9_losingCaptain" size="20" />

            </div>

          </li>

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

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

              Winning Team Members<span class="form-required">*</span>

            </label>

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

              <textarea id="input_16" class="form-textarea validate[required]" name="q16_winningTeam" cols="20" rows="6"></textarea>

            </div>

          </li>

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

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

              Losing Team Members<span class="form-required">*</span>

            </label>

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

              <textarea id="input_17" class="form-textarea validate[required]" name="q17_clickTo17" cols="20" rows="6"></textarea>

            </div>

          </li>

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

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

              <div style="text-align:center" class="form-buttons-wrapper">

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

                  Submit Form

                </button>

                &nbsp;

                <button id="input_reset_2" type="reset" class="form-submit-reset">

                  Clear Form

                </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="21874987178473" />

      <script type="text/javascript">

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

      </script>

    </form>

    If you need further assistance, feel free to contact us again anytime.

    Thank you!

  • Profile Image

    Answered by Tmanic on July 06, 2012 at 02:57 PM
    Thank you for your response. I'll have a go at the custom CSS tomorrow.
    Regards

    Tony M


  • Profile Image

    Answered by pinoytech on July 06, 2012 at 03:41 PM

    Looking forward hearing from you tomorrow if my response above helped you or not. Have a great day!