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 change the text font of the button? for example to arial

    Asked by alexsajno on August 27, 2014 at 08:55 AM

     

    font JotForm uploads height png
  • Profile Image
    JotForm Support

    Answered by EltonCris on August 27, 2014 at 11:04 AM

    Hi,

    you can change it by adding the following style on top of your feedback embed code.

    <style>

    .jotform-feedback-link{

    font-family: Arial !important;

    }

    </style>

    Just change the font value (bold text) to anything you like.

    Hope this helps!

  • Profile Image

    Answered by alexsajno on August 27, 2014 at 11:47 AM

    where?? this is not working..

    .jotform-feedback-link{font-family: Arial !important;}
    /*-----RTL-----*/
    .form-all {
    direction: rtl;
    }
    /*--label top styles--*/
    #label_1.form-label-top {
    display: none !important;
    }
    #label_2.form-label-top {
    display: none !important;
    }
    #label_3.form-label-top {
    display: none !important;
    }
    #label_4.form-label-top {
    display: none !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 2px;
    }/*--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:278px;
    border:1px solid #FFF;
    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: 1px !important;
    width: 287px;
    }/*--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;
    }
    /*--Shift input boxes left--*/
    #id_11, #id_10, #id_14{
    position:relative;
    left:-5px !important;
    }
    #input_14 {width: 141px !important;}#label_12, #label_13,#label_8{margin-right: 7px !important;}
    #label_11{margin-right:2px !important;}

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 27, 2014 at 01:25 PM

    Sorry for not clarifying it well. You have to place that CSS code over your feedback embed code not through CSS injection.

    Example:

    <style>

    .jotform-feedback-link{

    font-family: Arial !important;

    }

    </style>

    <script src="//max.jotfor.ms/static/feedback2.js?3.2.3379" type="text/javascript">

      new JotformFeedback({

         formId : "42384764353965",

         buttonText : "Clone of Responsive Layout -  General Inquiry Contact Form",

         base : "http://jotformpro.com/",

         background : "#F59202",

         fontColor : "#FFFFFF",

         buttonSide : "bottom",

         buttonAlign : "right",

         type : false,

         width : 700,

         height : 500

      });

    </script>

    Thanks!

  • Profile Image

    Answered by alexsajno on August 27, 2014 at 02:10 PM

    thank you!! it works!

  • Profile Image
    JotForm Support

    Answered by david on August 27, 2014 at 04:17 PM

    Hi,

    On behalf of my colleague you are very welcome.  Please let us know if you have any further questions and we will be happy to help.

    Thank you for using JotForm!