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 to center a form using CSS code?

    Asked by suncloud on March 26, 2016 at 09:47 PM

    Can you help me to "Center" this form - using this code?  (Right now it is aligned left)

    Here's the Code:

     

    <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

    <script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.12278" type="text/javascript"></script>

    <script type="text/javascript">

       JotForm.init(function(){

    JotForm.clearFieldOnHide="disable";

    JotForm.onSubmissionError="jumpToFirstError";

       });

    </script>

    <link target="_blank" href="https://cdn.jotfor.ms/static/formCss.css?3.3.12278" rel="nofollow" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.12278" rel="nofollow" />

    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="https://cdn.jotfor.ms/css/printForm.css?3.3.12278" rel="nofollow" />

    <link type="text/css" rel="stylesheet" target="_blank" href="https://secure.jotform.us/themes/CSS/566a91c2977cdfcd478b4567.css?session=48148419393789" rel="nofollow"/>

    <style type="text/css">

        .form-label-left{

            width:150px !important;

        }

        .form-line{

            padding-top:12px;

            padding-bottom:12px;

        }

        .form-label-right{

            width:150px !important;

        }

        .form-all{

            width:422px;

            color:rgb(234, 226, 208) !important;

            font-family:'Metrophobic';

            font-size:13px;

        }

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

            color: #7A6A53;

        }

     

    </style>

     

    <style type="text/css" id="form-designer-style">

        /* Injected CSS Code */

    @import "https://fonts.googleapis.com/css?family=Metrophobic:light,lightitalic,normal,italic,bold,bolditalic";

    .form-all {

      font-family: "Metrophobic", sans-serif;

    }

    .form-all {

      width: 422px;

    }

    .form-label-left,

    .form-label-right {

      width: 150px;

    }

    .form-label {

      white-space: normal;

    }

    .form-label.form-label-auto {

      display: inline-block;

      float: left;

      text-align: left;

      width: 150px;

    }

    .form-label-left {

      display: inline-block;

      white-space: normal;

      float: left;

      text-align: left;

    }

    .form-label-right {

      display: inline-block;

      white-space: normal;

      float: left;

      text-align: right;

    }

    .form-label-top {

      white-space: normal;

      display: block;

      float: none;

      text-align: left;

    }

    .form-all {

      font-size: 13px;

    }

    .form-label {

      font-weight: bold;

    }

    .form-checkbox-item label,

    .form-radio-item label {

      font-weight: normal;

    }

    .supernova {

      background-color: #d9ceb2;

      background-color: #020202;

    }

    .supernova body {

      background-color: transparent;

    }

    /*

    @width30: (unit(@formWidth, px) + 60px);

    @width60: (unit(@formWidth, px)+ 120px);

    @width90: (unit(@formWidth, px)+ 180px);

    */

    /* | */

    @media screen and (min-width: 480px) {

      .supernova .form-all {

        border: 1px solid #000000;

        -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);

        -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);

        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);

      }

    }

    /* | */

    /* | */

    @media screen and (max-width: 480px) {

      .jotform-form {

        padding: 10px 0;

      }

    }

    /* | */

    /* | */

    @media screen and (min-width: 480px) and (max-width: 768px) {

      .jotform-form {

        padding: 30px 0;

      }

    }

    /* | */

    /* | */

    @media screen and (min-width: 480px) and (max-width: 421px) {

      .jotform-form {

        padding: 30px 0;

      }

    }

    /* | */

    /* | */

    @media screen and (min-width: 768px) {

      .jotform-form {

        padding: 60px 0;

      }

    }

    /* | */

    /* | */

    @media screen and (max-width: 421px) {

      .jotform-form {

        padding: 0;

      }

    }

    /* | */

    .supernova .form-all,

    .form-all {

      background-color: #d9ceb2;

      border: 1px solid transparent;

    }

    .form-header-group {

      border-color: #c8b890;

    }

    .form-matrix-table tr {

      border-color: #c8b890;

    }

    .form-matrix-table tr:nth-child(2n) {

      background-color: #d1c3a1;

    }

    .form-all {

      color: #eae2d0;

    }

    .form-header-group .form-header {

      color: #eae2d0;

    }

    .form-header-group .form-subHeader {

      color: #faf8f3;

    }

    .form-sub-label {

      color: #faf8f3;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

      color: #eae2d0;

    }

    .form-checkbox-item label,

    .form-radio-item label {

      color: #faf8f3;

    }

    .form-line.form-line-active {

      -webkit-transition-property: all;

      -moz-transition-property: all;

      -ms-transition-property: all;

      -o-transition-property: all;

      transition-property: all;

      -webkit-transition-duration: 0.3s;

      -moz-transition-duration: 0.3s;

      -ms-transition-duration: 0.3s;

      -o-transition-duration: 0.3s;

      transition-duration: 0.3s;

      -webkit-transition-timing-function: ease;

      -moz-transition-timing-function: ease;

      -ms-transition-timing-function: ease;

      -o-transition-timing-function: ease;

      transition-timing-function: ease;

      background-color: rgba(138, 128, 112, 0);

    }

    /* ömer */

    .form-radio-item,

    .form-checkbox-item {

      padding-bottom: 0px !important;

    }

    .form-radio-item:last-child,

    .form-checkbox-item:last-child {

      padding-bottom: 0;

    }

    /* ömer */

    [data-type="control_radio"] .form-input,

    [data-type="control_checkbox"] .form-input,

    [data-type="control_radio"] .form-input-wide,

    [data-type="control_checkbox"] .form-input-wide {

      width: 100%;

      max-width: 224px;

    }

    .form-radio-item,

    .form-checkbox-item {

      width: 100%;

      max-width: 224px;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    .form-textbox.form-radio-other-input,

    .form-textbox.form-checkbox-other-input {

      width: 80%;

      margin-left: 3%;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    .form-multiple-column {

      width: 100%;

    }

    .form-multiple-column .form-radio-item,

    .form-multiple-column .form-checkbox-item {

      width: 10%;

    }

    .form-multiple-column[data-columncount="1"] .form-radio-item,

    .form-multiple-column[data-columncount="1"] .form-checkbox-item {

      width: 100%;

    }

    .form-multiple-column[data-columncount="2"] .form-radio-item,

    .form-multiple-column[data-columncount="2"] .form-checkbox-item {

      width: 50%;

    }

    .form-multiple-column[data-columncount="3"] .form-radio-item,

    .form-multiple-column[data-columncount="3"] .form-checkbox-item {

      width: 33.33333333%;

    }

    .form-multiple-column[data-columncount="4"] .form-radio-item,

    .form-multiple-column[data-columncount="4"] .form-checkbox-item {

      width: 25%;

    }

    .form-multiple-column[data-columncount="5"] .form-radio-item,

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

      width: 20%;

    }

    .form-multiple-column[data-columncount="6"] .form-radio-item,

    .form-multiple-column[data-columncount="6"] .form-checkbox-item {

      width: 16.66666667%;

    }

    .form-multiple-column[data-columncount="7"] .form-radio-item,

    .form-multiple-column[data-columncount="7"] .form-checkbox-item {

      width: 14.28571429%;

    }

    .form-multiple-column[data-columncount="8"] .form-radio-item,

    .form-multiple-column[data-columncount="8"] .form-checkbox-item {

      width: 12.5%;

    }

    .form-multiple-column[data-columncount="9"] .form-radio-item,

    .form-multiple-column[data-columncount="9"] .form-checkbox-item {

      width: 11.11111111%;

    }

    .form-single-column .form-checkbox-item,

    .form-single-column .form-radio-item {

      width: 100%;

    }

    .supernova {

      height: 100%;

      background-repeat: no-repeat;

      background-attachment: scroll;

      background-position: center top;

      background-repeat: repeat;

    }

    .supernova {

      background-image: none;

    }

    #stage {

      background-image: none;

    }

    /* | */

    .form-all {

      background-image: url("https://www.jotform.com/uploads/suncloud/form_files/_S5A3842-Edit-2.jpg");

      background-repeat: no-repeat;

      background-attachment: scroll;

      background-position: center top;

      background-repeat: repeat;

    }

    .form-header-group {

      background-repeat: no-repeat;

      background-attachment: scroll;

      background-position: center top;

    }

    .form-line {

      margin-top: 4px;

      margin-bottom: 4px;

    }

    .form-line {

      padding: 12px 36px;

    }

    .form-all {

      -webkit-border-radius: 6px;

      -moz-border-radius: 6px;

      border-radius: 6px;

    }

    .form-section:first-child {

      -webkit-border-radius: 6px 6px 0 0;

      -moz-border-radius: 6px 6px 0 0;

      border-radius: 6px 6px 0 0;

    }

    .form-section:last-child {

      -webkit-border-radius: 0 0 6px 6px;

      -moz-border-radius: 0 0 6px 6px;

      border-radius: 0 0 6px 6px;

    }

    .form-all .qq-upload-button,

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

      font-size: 1em;

      padding: 9px 15px;

      font-family: "Metrophobic", sans-serif;

      font-size: 13px;

      font-weight: normal;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

      font-size: 1em;

      padding: 9px 15px;

      font-family: "Metrophobic", sans-serif;

      font-size: 13px;

      font-weight: normal;

    }

    /*

    & when ( @buttonFontType = google ) {

    @import (css) "@{buttonFontLink}";

    }

    */

    h2.form-header {

      line-height: 1.618em;

      font-size: 1.714em;

    }

    h2 ~ .form-subHeader {

      line-height: 1.5em;

      font-size: 1.071em;

    }

    .form-header-group {

      text-align: left;

    }

    .form-line {

      zoom: 1;

    }

    .form-line:before,

    .form-line:after {

      display: table;

      content: '';

      line-height: 0;

    }

    .form-line:after {

      clear: both;

    }

    .form-sub-label-container {

      margin-right: 0;

      float: left;

      white-space: nowrap;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    .form-sub-label-container .date-separate {

      visibility: hidden;

    }

    .form-captcha input,

    .form-spinner input {

      width: 224px;

    }

    .form-textbox,

    .form-textarea {

      width: 100%;

      max-width: 224px;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    .form-input,

    .form-address-table,

    .form-matrix-table {

      width: 100%;

      max-width: 224px;

    }

    .form-radio-item,

    .form-checkbox-item {

      width: 100%;

      max-width: 224px;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    .form-textbox.form-radio-other-input,

    .form-textbox.form-checkbox-other-input {

      width: 80%;

      margin-left: 3%;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    .form-multiple-column {

      width: 100%;

    }

    .form-multiple-column .form-radio-item,

    .form-multiple-column .form-checkbox-item {

      width: 10%;

    }

    .form-multiple-column[data-columncount="1"] .form-radio-item,

    .form-multiple-column[data-columncount="1"] .form-checkbox-item {

      width: 100%;

    }

    .form-multiple-column[data-columncount="2"] .form-radio-item,

    .form-multiple-column[data-columncount="2"] .form-checkbox-item {

      width: 50%;

    }

    .form-multiple-column[data-columncount="3"] .form-radio-item,

    .form-multiple-column[data-columncount="3"] .form-checkbox-item {

      width: 33.33333333%;

    }

    .form-multiple-column[data-columncount="4"] .form-radio-item,

    .form-multiple-column[data-columncount="4"] .form-checkbox-item {

      width: 25%;

    }

    .form-multiple-column[data-columncount="5"] .form-radio-item,

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

      width: 20%;

    }

    .form-multiple-column[data-columncount="6"] .form-radio-item,

    .form-multiple-column[data-columncount="6"] .form-checkbox-item {

      width: 16.66666667%;

    }

    .form-multiple-column[data-columncount="7"] .form-radio-item,

    .form-multiple-column[data-columncount="7"] .form-checkbox-item {

      width: 14.28571429%;

    }

    .form-multiple-column[data-columncount="8"] .form-radio-item,

    .form-multiple-column[data-columncount="8"] .form-checkbox-item {

      width: 12.5%;

    }

    .form-multiple-column[data-columncount="9"] .form-radio-item,

    .form-multiple-column[data-columncount="9"] .form-checkbox-item {

      width: 11.11111111%;

    }

    [data-type="control_dropdown"] .form-dropdown {

      width: 100% !important;

      max-width: 224px;

    }

    [data-type="control_fullname"] .form-sub-label-container {

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

      width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

      margin-right: 4%;

    }

    [data-type="control_phone"] .form-sub-label-container {

      width: 65%;

    }

    [data-type="control_phone"] .form-sub-label-container:first-child {

      width: 32.5%;

      margin-right: 2.5%;

    }

    [data-type="control_birthdate"] .form-sub-label-container {

      width: 22%;

      margin-right: 3%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:first-child {

      width: 50%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:last-child {

      margin-right: 0;

    }

    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {

      width: 100%;

    }

    [data-type="control_time"] .form-sub-label-container {

      width: 37%;

      margin-right: 3%;

    }

    [data-type="control_time"] .form-sub-label-container:last-child {

      width: 20%;

      margin-right: 0;

    }

    [data-type="control_time"] .form-sub-label-container .form-dropdown {

      width: 100%;

    }

    [data-type="control_datetime"] .form-sub-label-container {

      width: 28%;

      margin-right: 4%;

    }

    [data-type="control_datetime"] .form-sub-label-container:last-child {

      width: 4%;

      margin-right: 0;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container {

      width: 12%;

      margin-right: 3%;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container:last-child {

      width: 4%;

      margin-right: 0;

    }

    [data-type="control_datetime"].allowTime .allowTime-container {

      float: right;

      width: 51%;

    }

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container {

      width: 27%;

      margin-right: 4%;

    }

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:first-child {

      width: 4%;

      margin-left: 3%;

    }

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:last-child {

      width: 27%;

      margin-right: 0;

    }

    [data-type="control_datetime"].allowTime .form-dropdown {

      width: 100%;

    }

    [data-type="control_payment"] .form-sub-label-container {

      width: auto;

    }

    [data-type="control_payment"] .form-sub-label-container .form-dropdown {

      width: 100%;

    }

    .form-address-table td .form-dropdown {

      width: 100%;

    }

    .form-address-table td .form-sub-label-container {

      width: 96%;

    }

    .form-address-table td:last-child .form-sub-label-container {

      margin-left: 4%;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container {

      width: 100%;

      margin: 0;

    }

    /*.form-dropdown,

    .form-radio-item,

    .form-checkbox-item,

    .form-radio-other-input,

    .form-checkbox-other-input,*/

    .form-captcha input,

    .form-spinner input,

    .form-error-message {

      padding: 4px 3px 2px 3px;

    }

    .form-header-group {

      font-family: "Metrophobic", sans-serif;

    }

    .form-section {

      padding: 0px 0px 0px 0px;

    }

    .form-header-group {

      margin: 12px 36px 12px 36px;

    }

    .form-header-group {

      padding: 24px 0px 24px 0px;

    }

    .form-textbox,

    .form-textarea {

      padding: 4px 3px 2px 3px;

    }

    .form-textbox,

    .form-textarea,

    .form-radio-other-input,

    .form-checkbox-other-input,

    .form-captcha input,

    .form-spinner input {

      background-color: #ffffff;

    }

    .form-textbox,

    .form-textarea {

      width: 100%;

      max-width: 224px;

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

    }

    [data-type="control_textbox"] .form-input,

    [data-type="control_textarea"] .form-input,

    [data-type="control_fullname"] .form-input,

    [data-type="control_phone"] .form-input,

    [data-type="control_datetime"] .form-input,

    [data-type="control_address"] .form-input,

    [data-type="control_email"] .form-input,

    [data-type="control_passwordbox"] .form-input,

    [data-type="control_autocomp"] .form-input,

    [data-type="control_textbox"] .form-input-wide,

    [data-type="control_textarea"] .form-input-wide,

    [data-type="control_fullname"] .form-input-wide,

    [data-type="control_phone"] .form-input-wide,

    [data-type="control_datetime"] .form-input-wide,

    [data-type="control_address"] .form-input-wide,

    [data-type="control_email"] .form-input-wide,

    [data-type="control_passwordbox"] .form-input-wide,

    [data-type="control_autocomp"] .form-input-wide {

      width: 100%;

      max-width: 224px;

    }

    [data-type="control_fullname"] .form-sub-label-container {

      -moz-box-sizing: border-box;

      -webkit-box-sizing: border-box;

      box-sizing: border-box;

      width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container:first-child {

      margin-right: 4%;

    }

    [data-type="control_phone"] .form-sub-label-container {

      width: 65%;

    }

    [data-type="control_phone"] .form-sub-label-container:first-child {

      width: 32.5%;

      margin-right: 2.5%;

    }

    [data-type="control_phone"] .form-sub-label-container .date-separate {

      visibility: hidden;

    }

    [data-type="control_datetime"] .form-sub-label-container {

      width: 28%;

      margin-right: 4%;

    }

    [data-type="control_datetime"] .form-sub-label-container:last-child {

      width: 4%;

      margin-right: 0;

    }

    [data-type="control_datetime"] .form-sub-label-container .date-separate {

      visibility: hidden;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container {

      width: 12%;

      margin-right: 3%;

    }

    [data-type="control_datetime"].allowTime .form-sub-label-container:last-child {

      width: 4%;

      margin-right: 0;

    }

    [data-type="control_datetime"].allowTime .allowTime-container {

      float: right;

      width: 51%;

    }

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container {

      width: 27%;

      margin-right: 4%;

    }

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:first-child {

      width: 4%;

      margin-left: 3%;

    }

    [data-type="control_datetime"].allowTime .allowTime-container .form-sub-label-container:last-child {

      width: 27%;

      margin-right: 0;

    }

    [data-type="control_datetime"].allowTime .form-dropdown {

      width: 100%;

    }

    .form-matrix-table {

      width: 100%;

      max-width: 224px;

    }

    .form-address-table {

      width: 100%;

      max-width: 224px;

    }

    .form-address-table td .form-dropdown {

      width: 100%;

    }

    .form-address-table td .form-sub-label-container {

      width: 96%;

    }

    .form-address-table td:last-child .form-sub-label-container {

      margin-left: 4%;

    }

    .form-address-table td[colspan="2"] .form-sub-label-container {

      width: 100%;

      margin: 0;

    }

    [data-type="control_dropdown"] .form-input,

    [data-type="control_birthdate"] .form-input,

    [data-type="control_time"] .form-input,

    [data-type="control_dropdown"] .form-input-wide,

    [data-type="control_birthdate"] .form-input-wide,

    [data-type="control_time"] .form-input-wide {

      width: 100%;

      max-width: 224px;

    }

    [data-type="control_dropdown"] .form-dropdown {

      width: 100% !important;

      max-width: 224px;

    }

    [data-type="control_birthdate"] .form-sub-label-container {

      width: 22%;

      margin-right: 3%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:first-child {

      width: 50%;

    }

    [data-type="control_birthdate"] .form-sub-label-container:last-child {

      margin-right: 0;

    }

    [data-type="control_birthdate"] .form-sub-label-container .form-dropdown {

      width: 100%;

    }

    [data-type="control_time"] .form-sub-label-container {

      width: 37%;

      margin-right: 3%;

    }

    [data-type="control_time"] .form-sub-label-container:last-child {

      width: 20%;

      margin-right: 0;

    }

    [data-type="control_time"] .form-sub-label-container .form-dropdown {

      width: 100%;

    }

    .form-label {

      font-family: "Metrophobic", sans-serif;

    }

    li[data-type="control_image"] div {

      text-align: left;

    }

    li[data-type="control_image"] img {

      border: none;

      border-width: 0px !important;

      border-style: solid !important;

      border-color: false !important;

    }

    .form-line-column {

      width: auto;

    }

    .form-line-error {

      overflow: hidden;

      -webkit-transition-property: none;

      -moz-transition-property: none;

      -ms-transition-property: none;

      -o-transition-property: none;

      transition-property: none;

      -webkit-transition-duration: 0.3s;

      -moz-transition-duration: 0.3s;

      -ms-transition-duration: 0.3s;

      -o-transition-duration: 0.3s;

      transition-duration: 0.3s;

      -webkit-transition-timing-function: ease;

      -moz-transition-timing-function: ease;

      -ms-transition-timing-function: ease;

      -o-transition-timing-function: ease;

      transition-timing-function: ease;

      background-color: #fff4f4;

    }

    .form-line-error .form-error-message {

      background-color: #ff3200;

      clear: both;

      float: none;

    }

    .form-line-error .form-error-message .form-error-arrow {

      border-bottom-color: #ff3200;

    }

    .form-line-error input:not(#coupon-input),

    .form-line-error textarea,

    .form-line-error .form-validation-error {

      border: 1px solid #ff3200;

      -webkit-box-shadow: 0 0 3px #ff3200;

      -moz-box-shadow: 0 0 3px #ff3200;

      box-shadow: 0 0 3px #ff3200;

    }

    .ie-8 .form-all {

      margin-top: auto;

      margin-top: initial;

    }

    .ie-8 .form-all:before {

      display: none;

    }

    /* | */

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

      .jotform-form {

        padding: 0;

      }

      .form-all {

        border: 0;

        width: 100% !important;

        max-width: initial;

      }

      .form-sub-label-container {

        width: 100%;

        margin: 0;

      }

      .form-input {

        width: 100%;

      }

      .form-label {

        width: 100%!important;

      }

      .form-line {

        padding: 2% 5%;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

      }

      input[type=text],

      input[type=email],

      input[type=tel],

      textarea {

        width: 100%;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

        max-width: initial !important;

      }

      .form-input,

      .form-input-wide,

      .form-textarea,

      .form-textbox,

      .form-dropdown {

        max-width: initial !important;

      }

      div.form-header-group {

        padding: 24px 0px !important;

        margin: 0 12px 2% !important;

        margin-left: 5% !important;

        margin-right: 5% !important;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

      }

      [data-type="control_button"] {

        margin-bottom: 0 !important;

      }

      .form-buttons-wrapper {

        margin: 0!important;

      }

      .form-buttons-wrapper button {

        width: 100%;

      }

      table {

        width: 100%!important;

        max-width: initial !important;

      }

      table td + td {

        padding-left: 3%;

      }

      .form-checkbox-item input,

      .form-radio-item input {

        width: auto;

      }

      .form-collapse-table {

        margin: 0 5%;

      }

    }

    /* | */

     

    /*__INSPECT_SEPERATOR__*/

     

        /* Injected CSS Code */

    </style>

     

    <form class="jotform-form" action="https://submit.jotform.us/submit/60857801325153/" method="post" name="form_60857801325153" id="60857801325153" accept-charset="utf-8">

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

      <div class="form-all">

        <ul class="form-section page-section">

          <li class="form-line form-line-column form-col-1" data-type="control_textbox" id="id_3">

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

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

              <input type="text" class=" form-textbox" data-type="input-textbox" id="input_3" name="q3_firstName3" size="20" value="" />

            </div>

          </li>

          <li class="form-line form-line-column form-col-2" data-type="control_email" id="id_4">

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

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

              <input type="email" class=" form-textbox validate[Email]" id="input_4" name="q4_email4" size="30" value="" />

            </div>

          </li>

          <li class="form-line" data-type="control_button" id="id_2">

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

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

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

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

      <script type="text/javascript">

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

      </script>

    </form>

    <script type="text/javascript">JotForm.ownerView=true;</script>

    Page URL:
    http://www.granttaylorart.com/Free-Download-Test

    Screenshot
    form class JotForm textarea checkbox style
  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 27, 2016 at 01:21 AM

    You only need to inject this CSS code to your form:

    .form-all {

        margin-left: auto;

        margin-right: auto;

    }

    This guide will help you to inject the code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    This should be the result: