0 Replies Latest reply on Dec 1, 2013 1:18 AM by Mich_lou

    Restricting Text Field From Affecting Contact Page Layout

    Mich_lou

      Hi Community,

       

      I'm currently working on a contact page for my site, and managed to successfully build one using jotform. However, I would like it to make a few changes to it using dreamweaver, the first been the text field (where customers enter/type their message).

       

      I would like it to be resizable only to a particular size according to the amount of information entered, but  which does not affect the entire page layout. Please see my code below.

       

      Thanks

       

       

       

      <script src="http://cdn.jotfor.ms/static/jotform.js?3.1.1125" type="text/javascript"></script>

      <script type="text/javascript">

         JotForm.init(function(){

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

         });

      </script>

      <link href="http://cdn.jotfor.ms/static/formCss.css?3.1.1125" rel="stylesheet" type="text/css" />

      <link type="text/css" rel="stylesheet" href="http://cdn.jotfor.ms/css/styles/nova.css?3.1.1125" />

      <link type="text/css" media="print" rel="stylesheet" href="http://cdn.jotfor.ms/css/printForm.css?3.1.1125" />

      <style type="text/css">

          .form-label{

              width:180px !important;

          }

          .form-label-left{

              width:180px !important;

          }

          .form-line{

              padding-top:12px;

              padding-bottom:12px;

          }

          .form-label-right{

              width:180px !important;

          }

          .form-all{

              width:933px;

              background:#FCFCFC;

              color:#948787 !important;

              font-family:'Arial';

              font-size:14px;

          }

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

              color:#948787;

          }

       

       

      </style>

       

       

      <link type="text/css" rel="stylesheet" href="http://myjotform.com/css/styles/buttons/form-submit-button-simple_green_apple.css?3.1.1125"/>

      <form class="jotform-form" action="http://submit.myjotform.com/submit/33321410101531/" method="post" name="form_33321410101531" id="33321410101531" accept-charset="utf-8">

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

        <div class="form-all">

          <ul class="form-section">

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

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

                <h2 id="header_18" class="form-header">

                  Contact Us

                </h2>

                <div id="subHeader_18" class="form-subHeader">

                  Please complete the fields below to contact us.

                </div>

              </div>

            </li>

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

              <label class="form-label-right" id="label_15" for="input_15">

                Name<span class="form-required">*</span>

              </label>

              <div id="cid_15" class="form-input"><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="10" name="q15_name15[first]" id="first_15" />

                  <label class="form-sub-label" for="first_15" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q15_name15[last]" id="last_15" />

                  <label class="form-sub-label" for="last_15" id="sublabel_last"> Last Name </label></span>

              </div>

            </li>

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

              <label class="form-label-right" 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_email16" size="32" value="" />

              </div>

            </li>

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

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

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

              </label>

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

                <div class="form-textarea-limit"><span><textarea id="input_8" class="form-textarea validate[required]" name="q8_comments" cols="40" rows="10"></textarea>

                    <div class="form-textarea-limit-indicator"><span type="Words" limit="5000" id="input_8-limit">0/5000</span>

                    </div></span>

                </div>

              </div>

            </li>

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

              <label class="form-label-right" id="label_9" for="input_9">

                Type the characters you see here:<span class="form-required">*</span>

              </label>

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

                <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

                <div id="recaptcha_input_9">

                </div>

                <script type="text/javascript">

                var rc_script_tag = document.createElement('script'),

        rc_init_func = function()

        {

          Recaptcha.create("6Ld9UAgAAAAAAMon8zjt30tEZiGQZ4IIuWXLt1ky", "recaptcha_input_9", {

            theme: "clean",

            callback: function()

            {

              $("recaptcha_response_field").addClassName("validate[required]");

              JotForm.validator()

            }

          });

        }

      rc_script_tag.src = "http://www.google.com/recaptcha/api/js/recaptcha_ajax.js";

      rc_script_tag.type = 'text/javascript';

      rc_script_tag.onload = function()

      {

        rc_init_func.call();

      };

      rc_script_tag.onreadystatechange = function()

      {

        if (rc_script_tag.readyState == 'loaded' || rc_script_tag.readyState == 'complete')

        {

          rc_init_func.call();

        }

      };

      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(rc_script_tag);

                </script>

              </div>

            </li>

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

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

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

                  <button id="input_7" type="submit" class="form-submit-button form-submit-button-simple_green_apple">

                    Send

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

        <script type="text/javascript">

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

        </script>

      </form>