How can i change the text font of the button? for example to arial

  • Profile Image
    alexsajno
    Asked on August 27, 2014 at 08:55 AM
  • Profile Image
    EltonCris
    Answered 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
    alexsajno
    Answered 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
    EltonCris
    Answered 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
    alexsajno
    Answered on August 27, 2014 at 02:10 PM

    thank you!! it works!

  • Profile Image
    david
    Answered 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!