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

    Having Problem after changing my form RTL

    Asked by ccslibyaform on January 17, 2016 at 05:38 AM

    After I solved my problem at making arabic form and I got the support to change my form RTL but now evertime I write in English I got a problem the characters not equal Like This 

    I Wrote "Ahmed" in the example and look how it look like at the form please help 

    Screenshot
    rtl arabic
  • Profile Image

    Answered by ccslibyaform on January 17, 2016 at 05:41 AM

    And this is the code that the support gives to use RTL Form 

    .form-all {

    font-family: "Lucida Grande", sans-serif;

    }

    .form-all {

    width: 650px;

    }

    .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: right;

    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: 14px;

    }

    .form-label {

    font-weight: bold;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    font-weight: normal;

    }

    .supernova {

    background-color: #ffffff;

    }

    .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 #e6e6e6;

    -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: 649px) {

    .jotform-form {

    padding: 30px 0;

    }

    }

    /* | */

    /* | */

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

    .jotform-form {

    padding: 60px 0;

    }

    }

    /* | */

    /* | */

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

    .jotform-form {

    padding: 0;

    }

    }

    /* | */

    .supernova .form-all,

    .form-all {

    background-color: #ffffff;

    border: 1px solid transparent;

    }

    .form-header-group {

    border-color: #e6e6e6;

    }

    .form-matrix-table tr {

    border-color: #e6e6e6;

    }

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

    background-color: #f2f2f2;

    }

    .form-all {

    color: #555555;

    }

    .form-header-group .form-header {

    color: #555555;

    }

    .form-header-group .form-subHeader {

    color: #6f6f6f;

    }

    .form-sub-label {

    color: #6f6f6f;

    }

    .form-label-top,

    .form-label-left,

    .form-label-right,

    .form-html {

    color: #555555;

    }

    .form-checkbox-item label,

    .form-radio-item label {

    color: #6f6f6f;

    }

    .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: #ffffe0;

    }

    /* ö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 */

    .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-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: 14px;

    margin-bottom: 14px;

    }

    .form-line {

    padding: 12px 36px;

    }

    .form-all .form-textbox,

    .form-all .form-radio-other-input,

    .form-all .form-checkbox-other-input,

    .form-all .form-captcha input,

    .form-all .form-spinner input,

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next,

    .form-all .qq-upload-button,

    .form-all .form-error-message {

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    }

    .form-all .form-sub-label {

    margin-left: 3px;

    }

    .form-all .form-textarea {

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    }

    .form-all {

    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

    }

    .form-section:first-child {

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

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

    border-radius: 20px 20px 0 0;

    }

    .form-section:last-child {

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

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

    border-radius: 0 0 20px 20px;

    }

    .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: "Lucida Grande", sans-serif;

    font-size: 14px;

    font-weight: normal;

    }

    .form-all .form-pagebreak-back,

    .form-all .form-pagebreak-next {

    font-size: 1em;

    padding: 9px 15px;

    font-family: "Lucida Grande", sans-serif;

    font-size: 14px;

    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-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: "Lucida Grande", 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;

    }

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

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

    width: 150px;

    }

    .form-label {

    font-family: "Lucida Grande", 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%;

    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__*/

    .form-all * {

    text-align : right;

    direction : rtl !important;

    unicode-bidi : bidi-override !important;

    }label.form-label-top, label.form-label-left, label.form-label-right {

    font-weight : bold;

    margin-bottom : 9px;

    float : right;

    text-align : right;

    }

  • Profile Image
    JotForm Support

    Answered by jonathan on January 17, 2016 at 04:26 PM

    I checked your jotform http://www.jotform.com/53542035889564 and I see what you meant.

    Actually, this is how it really work.

    Since your form is in Arabic language, it is expected that the input will be in Arabic language as well - not English.

    If you want the form to be multilingual, create first the form in English, and then add the Language Tool to have an Arabic version of the form.

    user guide: How-to-make-your-forms-multilingual

    Take note that you can set the default language othern than English after you have added the other language (i.e Arabic)

    Here is a demo form you can check https://form.jotform.com/60165836672966

     

    Let us know if you need further assistance.

     

     

     

     

     

     

  • Profile Image

    Answered by ccslibyaform on January 18, 2016 at 03:16 AM

    This is actually a big in your system fix it as soon as passable even when I write numbers happens the same thing  

  • Profile Image
    JotForm Support

    Answered by Chriistian on January 18, 2016 at 04:44 AM

    Hi,

     

    As my colleague said, the input must be in arabic language when filling up a form in Arabic Language. For now, you can try my colleague's suggestion as a workaround for your concern.

     

    Do inform us if you need further assistance,
    Regards.