How do I position my form in center of webpage left to right?

  • Profile Image
    alzy
    Asked on February 15, 2013 at 10:38 PM

    It appears left justified and I would like it center justified. I created the page by downloading the form source code and creating a .html file with wordpad.

  • Profile Image
    webmasterphi
    Answered on February 15, 2013 at 11:25 PM

    Hi alzy,

    Can you please provide the link to your form or to your website where the form is embeded? So that i can suggest what script to add to make it center justified. Thanks for using Jotform.

  • Profile Image
    jefreylandicho
    Answered on February 16, 2013 at 02:54 AM

    You can try adding the div code below when embedding the form

    <div style="width:100%; margin: 0 auto;">

    <-- Embed Form Source Code -->

    </div>

    You can try adding a max-width limit in your div style based on your form width.

    If you need further assistance, please let us know.

     

  • Profile Image
    alzy
    Answered on February 16, 2013 at 09:15 AM

    The form is its own page. here is the code:

    <script src="//max.jotfor.ms/min/g=jotform?3.1.1633" type="text/javascript"></script>
    <script type="text/javascript">
       JotForm.init(function(){
          JotForm.initCaptcha('input_7');
          JotForm.highlightInputs = false;
          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":"Please complete required (*) fields.","lessThan":"Your score should be less than","numeric":"This field can only contain numeric values","pleaseWait":"Please wait...","required":"This field is required.","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.1.1633" 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:298px;
            background:#000000;
            color:#000000 !important;
            font-family:'Verdana';
            font-size:12px;
        }
        /* Injected CSS Code */
    /*--label top styles--*/
    .form-label-top, .form-label-left{
    color:#ffffff !important;
    }

    /*--remove focus border--*/
    .form-textbox:focus, .form-textarea:focus{
    outline: none;
    }

    /*--form header style--*/
    .form-all h3{
    margin:0;
    background:#57a700 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6138_form_heading.gif) repeat-x;
    color:#fff;
    font-size:20px;
    border:1px solid #57a700;
    border-bottom:none;
    margin-left: 1px;
    }

    /*--mail icon--*/
    .form-all h3 span{
    display:block;
    padding:10px 20px;
    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6139_form_ico.gif) no-repeat 93% 50%;
    }

    /*--form section style--*/
    .form-section{
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    padding-left: 4px;
    margin:0;
    border:1px;
    border-top:3px solid #000;
    background:#000 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6142_form_top.gif) repeat-x;
    }

    /*--textbox, textarea style--*/
    .form-textbox, .form-textarea{
    font-family:verdana;
    width:272px;
    border:1px solid #111;
    background:#282828 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6140_form_input.gif) repeat-x;
    padding:5px 3px;
    color:#fff;
    }

    /*--form submit button style--*/
    .form-submit-button{
    padding:0 20px;
    height:32px;
    line-height:32px;
    border:1px solid #70ad2e;
    background:#5aae00 url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6141_form_button.gif) repeat-x;
    color:#fff;
    cursor:pointer;
    text-align:center;
    }

    /*--reduce form line--*/
    .form-line{
    padding:5px !important;
    }

    /*--remove form top padding--*/
    .form-all{
    padding-top:0px !important;
    }

    /*--for html texts--*/
    .form-html {
    padding: 0px !important;
    padding-right: 7px !important;
    }

    /*--remove error message--*/
    .form-error-message {
    display: none !important;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }

    /*--reduce error font size--*/
    .form-button-error {
    font-size: 11px !important;
    }

    /*--fix captcha--*/
    .form-captcha, .form-captcha:hover {
    border:none;
    background:none;
    padding:0px !important;
    }
    .form-captcha-image {
    border:0px;
    background:none;
    -moz-border-radius:0px !important;
    -webkit-border-radius:0px !important;
    border-radius:0px !important;
    }

    /*--fix captcha box--*/
    #input_7{
    width:142px !important;
    max-width:142px !important;
    }

    /*--add red border on error--*/
    .form-validation-error {
    border: 1px solid red !important;
    }
        /* Injected CSS Code */
    </style>

    <link type="text/css" rel="stylesheet" target="_blank" href="http://jotform.us/css/styles/buttons/form-submit-button-simple_grey.css?3.1.1633" rel="nofollow noopener"/>
    <form class="jotform-form" action="http://submit.jotform.us/submit/30445013694147/" method="post" name="form_30445013694147" id="30445013694147" accept-charset="utf-8">
      <input type="hidden" name="formID" value="30445013694147" />
      <div class="form-all">
        <ul class="form-section">
          <li class="form-line" id="id_6">
            <div id="cid_6" class="form-input-wide">
              <div id="text_6" class="form-html">
                <h3><span>Contact Me
                    <br /></span>
                </h3>
              </div>
            </div>
          </li>
          <li class="form-line" id="id_1">
            <label class="form-label-top" id="label_1" for="input_1"> Name </label>
            <div id="cid_1" class="form-input-wide">
              <input type="text" class=" form-textbox" id="input_1" name="q1_name" size="30" />
            </div>
          </li>
          <li class="form-line" id="id_2">
            <label class="form-label-top" id="label_2" for="input_2"> Email </label>
            <div id="cid_2" class="form-input-wide">
              <input type="text" class=" form-textbox" id="input_2" name="q2_email" size="30" />
            </div>
          </li>
          <li class="form-line" id="id_4">
            <label class="form-label-top" id="label_4" for="input_4">
              Message<span class="form-required">*</span>
            </label>
            <div id="cid_4" class="form-input-wide">
              <textarea id="input_4" class="form-textarea validate[required]" name="q4_message" cols="30" rows="10"></textarea>
            </div>
          </li>
          <li class="form-line" id="id_7">
            <label class="form-label-top" id="label_7" for="input_7">
              Enter the message as it's shown<span class="form-required">*</span>
            </label>
            <div id="cid_7" class="form-input-wide">
              <div class="form-captcha">
                <label for="input_7"> <img alt="Captcha - Reload if it's not displayed" id="input_7_captcha" class="form-captcha-image" style="background:url(http://jotform.us/images/loader-big.gif) no-repeat center;" src="//jotform.us/images/blank.gif" width="150" height="41" /> </label>
                <div style="white-space:nowrap;">
                  <input type="text" id="input_7" class="form-textbox validate[required]" name="captcha" style="width:130px;" />
                  <img src="//jotform.us/images/reload.png" alt="Reload" align="absmiddle" style="cursor:pointer" onclick="JotForm.reloadCaptcha('input_7');" />
                  <input type="hidden" name="captcha_id" id="input_7_captcha_id" value="0" />
                </div>
              </div>
            </div>
          </li>
          <li class="form-line" id="id_5">
            <div id="cid_5" class="form-input-wide">
              <div style="text-align:left" class="form-buttons-wrapper">
                <button id="input_5" type="submit" class="form-submit-button form-submit-button-simple_grey">
                  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="30445013694147" />
      <script type="text/javascript">
      document.getElementById("si" + "mple" + "_spc").value = "30445013694147-30445013694147";
      </script>
    </form>

  • Profile Image
    abajan
    Answered on February 16, 2013 at 10:15 AM

    @alzy

    If the form isn't embedded in a web page, it's already centered. However, if you wish to change the background surrounding the form from black to white, just add the following rule to the form's currently injected CSS:

    body, html {
    background: #FFF;
    }

    The result should look like this clone. Is this the result you wanted?

  • Profile Image
    abajan
    Answered on February 16, 2013 at 10:21 AM

    Incidentally, it's not a good idea to use WordPad for editing websites. Notepad++ or even just Notepad would be a better choice. (I noticed that when the code you provided was loaded in my browser, the form wasn't displayed correctly: It had black dots along its left edge.)

  • Profile Image
    abajan
    Answered on February 16, 2013 at 10:50 AM

    I've tweaked the CSS a bit to make the submit button appear correctly. To do that in your own form, please make the following changes to the injected CSS:

    1. Remove the line-height:32px; declaration from the form-submit-button rule

    2. Add this rule anywhere:

    #cid_5 {
    padding-bottom: 5px;
    }