How to change font color of my input fields?

  • solutionsbymiranda
    Asked on October 21, 2019 at 4:39 PM

    Hello, 

    I need help changing the font color for my form. I have already tried changing it within the form page setup options.

    Here is my 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.13482" type="text/javascript"></script> <script src="https://js.jotform.com/vendor/postMessage.js?3.3.13482" type="text/javascript"></script> <script src="https://js.jotform.com/WidgetsServer.js?v=1571690138592" type="text/javascript"></script> <script type="text/javascript"> JotForm.init(function(){ JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"]; JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; JotForm.calendarOther = {"today":"Today"}; var languageOptions = document.querySelectorAll('#langList li'); for(var langIndex = 0; langIndex < languageOptions.length; langIndex++) { languageOptions[langIndex].on('click', function(e) { setTimeout(function(){ JotForm.setCalendar("4", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); }, 0); }); } JotForm.setCalendar("4", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); JotForm.alterTexts(undefined); JotForm.clearFieldOnHide="disable"; JotForm.submitError="jumpToFirstError"; /*INIT-END*/ }); JotForm.prepareCalculationsOnTheFly([null,{"name":"initialIntroductions","qid":"1","text":"Initial Introductions","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},null,{"description":"","name":"date","qid":"4","text":"Today's Date","type":"control_datetime"},{"description":"","name":"clientName","qid":"5","text":"Client Name","type":"control_fullname"},{"description":"","name":"howDid","qid":"6","subLabel":"","text":"How did you hear about Solutions by Miranda","type":"control_textbox"},null,null,null,{"description":"","name":"inspirations","qid":"10","subLabel":"","text":"Inspirations","type":"control_textbox"},{"description":"","name":"website","qid":"11","subLabel":"","text":"Website","type":"control_textbox"},{"description":"","name":"email","qid":"12","subLabel":"","text":"Email","type":"control_textbox"},{"description":"","name":"notes","qid":"13","subLabel":"","text":"Notes","type":"control_textarea"},null,null,{"description":"","name":"input16","qid":"16","text":"","type":"control_fullname"},{"description":"","name":"input17","qid":"17","text":"","type":"control_fullname"},null,{"name":"actionItems19","qid":"19","text":"Action Items","type":"control_widget"},{"name":"goals20","qid":"20","text":"Goals","type":"control_widget"},{"name":"currentIssues21","qid":"21","text":"Current Issues","type":"control_widget"}]); setTimeout(function() { JotForm.paymentExtrasOnTheFly([null,{"name":"initialIntroductions","qid":"1","text":"Initial Introductions","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},null,{"description":"","name":"date","qid":"4","text":"Today's Date","type":"control_datetime"},{"description":"","name":"clientName","qid":"5","text":"Client Name","type":"control_fullname"},{"description":"","name":"howDid","qid":"6","subLabel":"","text":"How did you hear about Solutions by Miranda","type":"control_textbox"},null,null,null,{"description":"","name":"inspirations","qid":"10","subLabel":"","text":"Inspirations","type":"control_textbox"},{"description":"","name":"website","qid":"11","subLabel":"","text":"Website","type":"control_textbox"},{"description":"","name":"email","qid":"12","subLabel":"","text":"Email","type":"control_textbox"},{"description":"","name":"notes","qid":"13","subLabel":"","text":"Notes","type":"control_textarea"},null,null,{"description":"","name":"input16","qid":"16","text":"","type":"control_fullname"},{"description":"","name":"input17","qid":"17","text":"","type":"control_fullname"},null,{"name":"actionItems19","qid":"19","text":"Action Items","type":"control_widget"},{"name":"goals20","qid":"20","text":"Goals","type":"control_widget"},{"name":"currentIssues21","qid":"21","text":"Current Issues","type":"control_widget"}]);}, 20); </script> <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.13482" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.13482" /> <link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.13482" /> <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/557cd890977cdfc9378b4567.css?themeRevisionID=5b4c4fb1a699e24edd3d8441"/> <style type="text/css"> .form-label-left{ width:200px; } .form-line{ padding-top:15px; padding-bottom:15px; } .form-label-right{ width:200px; } .form-all{ width:750px; color:#000000 !important; font-family:'Josefin Slab'; font-size:18px; } </style> <style type="text/css" id="form-designer-style"> /* Injected CSS Code */ @import "https://fonts.googleapis.com/css?family=Josefin+Slab:light,lightitalic,normal,italic,bold,bolditalic"; .form-all:after { content: ""; display: table; clear: both; } .form-all { font-family: "Josefin Slab", sans-serif; } .form-all { width: 750px; width: 100%; max-width: 750px; } .form-label-left, .form-label-right { width: 200px; } .form-label { white-space: normal; } .form-label.form-label-auto { display: inline-block; float: left; text-align: left; word-break: break-word; width: 200px; } .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-radio-item label:before { top: 0; } .form-all { font-size: 18px; } .form-label { font-weight: normal; font-size: 0.95em; } .supernova { background-color: #f8ebef; background-color: #fadeef; } .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 #f3b2da; -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 .form-all { margin: 0; width: 100%; } } /* | */ /* | */ @media screen and (min-width: 480px) and (max-width: 767px) { .jotform-form .form-all { margin: 0; width: 100%; } } /* | */ /* | */ @media screen and (min-width: 480px) and (max-width: 749px) { .jotform-form .form-all { margin: 0; width: 100%; } } /* | */ /* | */ @media screen and (min-width: 768px) { .jotform-form { padding: 60px 0; } } /* | */ /* | */ @media screen and (max-width: 749px) { .jotform-form .form-all { margin: 0; width: 100%; } } /* | */ .supernova .form-all, .form-all { background-color: #f8ebef; border: 1px solid transparent; } .form-header-group { border-color: #ebc5d1; } .form-matrix-table tr { border-color: #ebc5d1; } .form-matrix-table tr:nth-child(2n) { background-color: #f1d8e0; } .form-all { color: #4a4a4a; } .form-header-group .form-header { color: #4a4a4a; } .form-header-group .form-subHeader { color: #646464; } .form-sub-label { color: #646464; } .form-label-top, .form-label-left, .form-label-right, .form-html { color: #646464; } .form-checkbox-item label, .form-radio-item label { color: #4a4a4a; } .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(255, 255, 224, 0.08); } /* omer */ .form-radio-item, .form-checkbox-item { padding-bottom: 4px !important; } .form-radio-item:last-child, .form-checkbox-item:last-child { padding-bottom: 0; } /* omer */ .form-single-column .form-checkbox-item, .form-single-column .form-radio-item { width: 100%; } .form-checkbox-item .editor-container div, .form-radio-item .editor-container div { position: relative; } .form-checkbox-item .editor-container div:before, .form-radio-item .editor-container div:before { display: inline-block; vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; left: 0; width: 24px; height: 24px; } .form-radio-item:not(#foo) { position: relative; } .form-radio-item:not(#foo) .form-radio-other-input, .form-radio-item:not(#foo) .form-checkbox-item:not(#foo) .form-checkbox-other-input { margin-left: 0; } .form-radio-item:not(#foo) .form-radio-other.form-radio { display: none !important; } .form-radio-item:not(#foo) input[type="checkbox"], .form-radio-item:not(#foo) input[type="radio"] { display: none; } .form-radio-item:not(#foo) .form-radio-other, .form-radio-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-radio-item:not(#foo) .form-checkbox-other-input, .form-radio-item:not(#foo) .form-radio-other-input { margin: 0; } .form-radio-item:not(#foo) label { line-height: 18px; float: left; margin-left: 37px; } .form-radio-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 18px; height: 18px; cursor: pointer; } .form-radio-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 5px; left: 9px; width: 8px; height: 8px; } .form-radio-item:not(#foo) input:checked + label:after { opacity: 1; } .form-radio-item:not(#foo) input[type="checkbox"], .form-radio-item:not(#foo) input[type="radio"] { display: none; } .form-radio-item:not(#foo) .form-radio-other, .form-radio-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-radio-item:not(#foo) .form-checkbox-other-input, .form-radio-item:not(#foo) .form-radio-other-input { margin: 0; } .form-radio-item:not(#foo) label { line-height: 24px; float: left; margin-left: 43px; } .form-radio-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 24px; height: 24px; cursor: pointer; } .form-radio-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 7px; left: 11px; width: 10px; height: 10px; } .form-radio-item:not(#foo) input:checked + label:after { opacity: 1; } .form-radio-item:not(#foo) label:before { border: 2px solid #ffffff; } .form-radio-item:not(#foo) label:after { background-color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; } .form-radio-item:not(#foo) .editor-container div:before { content: ''; border: 2px solid #ffffff; border-radius: 50%; margin: 0 4px 0 -6px; } .form-checkbox-item:not(#foo) { position: relative; } .form-checkbox-item:not(#foo) label { display: block; } .form-checkbox-item:not(#foo) .form-radio-other-input, .form-checkbox-item:not(#foo) .form-checkbox-item:not(#foo) .form-checkbox-other-input { margin-left: 0; } .form-checkbox-item:not(#foo) .form-checkbox-other.form-checkbox { display: none !important; } .form-checkbox-item:not(#foo) input[type="checkbox"], .form-checkbox-item:not(#foo) input[type="radio"] { display: none; } .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-checkbox-item:not(#foo) .form-checkbox-other-input, .form-checkbox-item:not(#foo) .form-radio-other-input { margin: 0; } .form-checkbox-item:not(#foo) label { line-height: 18px; float: left; margin-left: 37px; } .form-checkbox-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 18px; height: 18px; cursor: pointer; } .form-checkbox-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 8px; left: 9px; width: 3px; height: 3px; } .form-checkbox-item:not(#foo) input:checked + label:after { opacity: 1; } .form-checkbox-item:not(#foo) label:before { border: 2px solid #ffffff; } .form-checkbox-item:not(#foo) label:after { background-color: #ffffff; box-shadow: 0 2px 0 0 #ffffff, 2px 2px 0 0 #ffffff, 4px 2px 0 0 #ffffff, 6px 2px 0 0 #ffffff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .form-checkbox-item:not(#foo) .editor-container div:before { content: ''; border: 2px solid #ffffff; border-radius: 50%; margin: 0 4px 0 -6px; } .form-checkbox-item:not(#foo) input[type="checkbox"], .form-checkbox-item:not(#foo) input[type="radio"] { display: none; } .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-checkbox-item:not(#foo) .form-checkbox-other-input, .form-checkbox-item:not(#foo) .form-radio-other-input { margin: 0; } .form-checkbox-item:not(#foo) label { line-height: 24px; float: left; margin-left: 43px; } .form-checkbox-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 24px; height: 24px; cursor: pointer; } .form-checkbox-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 11px; left: 10px; width: 4px; height: 4px; } .form-checkbox-item:not(#foo) input:checked + label:after { opacity: 1; } .form-checkbox-item:not(#foo) label:after { background-color: #ffffff; box-shadow: 0 3px 0 0 #ffffff, 3px 3px 0 0 #ffffff, 6px 3px 0 0 #ffffff, 8px 3px 0 0 #ffffff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .supernova { height: 100%; background-repeat: no-repeat; background-attachment: scroll; background-position: center top; background-attachment: fixed; background-size: auto; background-size: cover; } .supernova { background-image: none; background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/augustine-wong-li0iC0rjvvg-unsplash.5dacd0a3e64274.20007813.jpg"); } #stage { background-image: none; background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/augustine-wong-li0iC0rjvvg-unsplash.5dacd0a3e64274.20007813.jpg"); } /* | */ .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: 15px; margin-bottom: 15px; } .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: 0px; -moz-border-radius: 0px; border-radius: 0px; } .form-all .form-textarea { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .form-all .form-sub-label { margin-left: 3px; } .form-dropdown { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: button; appearance: none; margin: 0; } .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: "Josefin Slab", sans-serif; font-size: 16px; font-weight: normal; border: none; border-width: 1px !important; border-style: solid !important; border-color: #ffffff !important; } .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { color: #ffffff !important; background: rgba(255, 255, 255, 0); box-shadow: none; text-shadow: none; } .form-all .form-pagebreak-back, .form-all .form-pagebreak-next { font-size: 1em; padding: 9px 15px; font-family: "Josefin Slab", sans-serif; font-size: 18px; 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: center; } /*.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: "Josefin Slab", sans-serif; } .form-section { padding: 0px 0px 0px 0px; } .form-header-group { margin: 12px 0px 12px 0px; } .form-header-group { padding: 6px 36px 6px 36px; } .form-textbox, .form-textarea { border-color: #ffffff; color: #ffffff; 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-dropdown { border-color: #ffffff; color: #ffffff; -webkit-appearance: menulist-button; background-color: rgba(255, 255, 255, 0.15); } [data-type="control_dropdown"] .form-input, [data-type="control_dropdown"] .form-input-wide { width: 150px; } .form-buttons-wrapper { margin-left: 0 !important; text-align: center; } .form-label { font-family: "Josefin Slab", 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; } .form-all { position: relative; } .form-all:before { content: ""; background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/Facebook%20Cover%20Photo.5dacd0d381a036.42625652.png"); display: inline-block; height: 140px; position: absolute; background-size: 368px 140px; background-repeat: no-repeat; width: 100%; } .form-all { margin-top: 150px !important; } .form-all:before { top: -150px; background-position: top center; } .ie-8 .form-all { margin-top: auto; margin-top: initial; } .ie-8 .form-all:before { display: none; } [data-type="control_clear"] { display: none; } /* | */ @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) { .testOne { letter-spacing: 0; } .form-all { border: 0; max-width: initial; } .form-sub-label-container { width: 100%; margin: 0; margin-right: 0; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } span.form-sub-label-container + span.form-sub-label-container { margin-right: 0; } .form-sub-label { white-space: normal; } .form-address-table td, .form-address-table th { padding: 0 1px 10px; } .form-submit-button, .form-submit-print, .form-submit-reset { width: 100%; margin-left: 0!important; } div[id*=at_] { font-size: 14px; font-weight: 700; height: 8px; margin-top: 6px; } .showAutoCalendar { width: 20px; } img.form-image { max-width: 100%; height: auto; } .form-matrix-row-headers { width: 100%; word-break: break-all; min-width: 80px; } .form-collapse-table, .form-header-group { margin: 0; } .form-collapse-table { height: 100%; display: inline-block; width: 100%; } .form-collapse-hidden { display: none !important; } .form-input { width: 100%; } .form-label { width: 100% !important; } .form-label-left, .form-label-right { display: block; float: none; text-align: left; width: auto!important; } .form-line, .form-line.form-line-column { 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-radio-other-input, .form-checkbox-other-input { max-width: 55% !important; } .form-dropdown, .form-textarea, .form-textbox { width: 100%!important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown { max-width: initial!important; } .form-checkbox-item:not(#foo), .form-radio-item:not(#foo) { width: 100%; } .form-address-city, .form-address-line, .form-address-postal, .form-address-state, .form-address-table, .form-address-table .form-sub-label-container, .form-address-table select, .form-input { width: 100%; } div.form-header-group { padding: 6px 36px !important; padding-left: 5%!important; padding-right: 5%!important; margin: 0 12px 2% !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div.form-header-group.hasImage img { max-width: 100%; } [data-type="control_button"] { margin-bottom: 0 !important; } [data-type=control_fullname] .form-sub-label-container { 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%; margin-right: 0; margin-left: 0; float: left; } [data-type=control_phone] .form-sub-label-container:first-child { width: 31%; margin-right: 4%; } [data-type=control_datetime] .allowTime-container { width: 100%; } [data-type=control_datetime] .form-sub-label-container:first-child { width: 10%!important; margin-left: 0; margin-right: 0; } [data-type=control_datetime] .form-sub-label-container + .form-sub-label-container { width: 24%!important; margin-left: 6%; margin-right: 0; } [data-type=control_datetime] span + span + span > span:first-child { display: block; width: 100% !important; } [data-type=control_birthdate] .form-sub-label-container, [data-type=control_time] .form-sub-label-container { width: 27.3%!important; margin-right: 6% !important; } [data-type=control_time] .form-sub-label-container:last-child { width: 33.3%!important; margin-right: 0 !important; } .form-pagebreak-back-container, .form-pagebreak-next-container { min-height: 1px; width: 50% !important; } .form-pagebreak-back, .form-pagebreak-next, .form-product-item.hover-product-item { width: 100%; } .form-pagebreak-back-container { padding: 0; text-align: right; } .form-pagebreak-next-container { padding: 0; text-align: left; } .form-pagebreak { margin: 0 auto; } .form-buttons-wrapper { margin: 0!important; margin-left: 0!important; } .form-buttons-wrapper button { width: 100%; } .form-buttons-wrapper .form-submit-print { margin: 0 !important; } table { width: 100%!important; max-width: initial!important; } table td + td { padding-left: 3%; } .form-checkbox-item, .form-radio-item { white-space: normal!important; } .form-checkbox-item input, .form-radio-item input { width: auto; } .form-collapse-table { margin: 0 5%; display: block; zoom: 1; width: auto; } .form-collapse-table:before, .form-collapse-table:after { display: table; content: ''; line-height: 0; } .form-collapse-table:after { clear: both; } .fb-like-box { width: 98% !important; } .form-error-message { clear: both; bottom: -10px; } .date-separate, .phone-separate { display: none; } .custom-field-frame, .direct-embed-widgets, .signature-pad-wrapper { width: 100% !important; } } /* | */ /*PREFERENCES STYLE*/ .form-all { font-family: Josefin Slab, sans-serif; } .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { font-family: Josefin Slab, sans-serif; } .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container { font-family: Josefin Slab, sans-serif; } .form-header-group { font-family: Josefin Slab, sans-serif; } .form-label { font-family: Josefin Slab, sans-serif; } .form-label.form-label-auto { display: inline-block; float: left; text-align: left; } .form-line { margin-top: 15px; margin-bottom: 15px; } .form-all { width: 750px; } .form-label-left, .form-label-right, .form-label-left.form-label-auto, .form-label-right.form-label-auto { width: 200px; } .form-all { font-size: 18px } .form-all .qq-upload-button, .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { font-size: 18px } .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container { font-size: 18px } .supernova .form-all, .form-all { background-color: #f8ebef; border: 1px solid transparent; } .form-all { color: #000000; } .form-header-group .form-header { color: #000000; } .form-header-group .form-subHeader { color: #000000; } .form-label-top, .form-label-left, .form-label-right, .form-html, .form-checkbox-item label, .form-radio-item label { color: #000000; } .form-sub-label { color: #1a1a1a; } .supernova { background-color: #fadeef; } .supernova body { background: transparent; } .form-textbox, .form-textarea, .form-radio-other-input, .form-checkbox-other-input, .form-captcha input, .form-spinner input { background-color: #fff; } .supernova { height: 100%; background-repeat: repeat; background-attachment: scroll; background-position: center top; } .supernova { background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/augustine-wong-li0iC0rjvvg-unsplash.5dacd0a3e64274.20007813.jpg"); } #stage { background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/augustine-wong-li0iC0rjvvg-unsplash.5dacd0a3e64274.20007813.jpg"); } .form-all { background-image: none; } .form-all { position: relative; } .form-all:before { content: ""; background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/Facebook%20Cover%20Photo.5dacd0d381a036.42625652.png"); display: inline-block; height: 140px; position: absolute; background-size: 368px 140px; background-repeat: no-repeat; width: 100%; } .form-all { margin-top: 150px !important; } .form-all:before { top: -150px; background-position: top center; } .ie-8 .form-all:before { display: none; } .ie-8 { margin-top: auto; margin-top: initial; } /*PREFERENCES STYLE*//*__INSPECT_SEPERATOR__*/.form-product-item label,.form-payment-total { color: black; /* Injected CSS Code */ </style> <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/buttons/form-submit-button-simple_rose.css?3.3.13482"/> <form class="jotform-form" action="https://submit.jotform.us/submit/92894905240160/" method="post" name="form_92894905240160" id="92894905240160" accept-charset="utf-8"> <input type="hidden" name="formID" value="92894905240160" /> <input type="hidden" id="JWTContainer" value="" /> <input type="hidden" id="cardinalOrderNumber" value="" /> <div role="main" class="form-all"> <ul class="form-section page-section"> <li id="cid_1" class="form-input-wide" data-type="control_head"> <div class="form-header-group "> <div class="header-text httal htvam"> <h2 id="header_1" class="form-header" data-component="header"> Initial Introductions </h2> </div> </div> </li> <li class="form-line" data-type="control_datetime" id="id_4"> <label class="form-label form-label-left form-label-auto" id="label_4" for="lite_mode_4"> Today's Date </label> <div id="cid_4" class="form-input"> <div data-wrapper-react="true"> <div style="display:none"> <span class="form-sub-label-container" style="vertical-align:top"> <input type="tel" class="form-textbox validate[limitDate]" id="month_4" name="q4_date[month]" size="2" data-maxlength="2" value="" aria-labelledby="label_4 sublabel_4_month" /> <span class="date-separate" aria-hidden="true">  / </span> <label class="form-sub-label" for="month_4" id="sublabel_4_month" style="min-height:13px"> Month </label> </span> <span class="form-sub-label-container" style="vertical-align:top"> <input type="tel" class="form-textbox validate[limitDate]" id="day_4" name="q4_date[day]" size="2" data-maxlength="2" value="" aria-labelledby="label_4 sublabel_4_day" /> <span class="date-separate" aria-hidden="true">  / </span> <label class="form-sub-label" for="day_4" id="sublabel_4_day" style="min-height:13px"> Day </label> </span> <span class="form-sub-label-container" style="vertical-align:top"> <input type="tel" class="form-textbox validate[limitDate]" id="year_4" name="q4_date[year]" size="4" data-maxlength="4" value="" aria-labelledby="label_4 sublabel_4_year" /> <label class="form-sub-label" for="year_4" id="sublabel_4_year" style="min-height:13px"> Year </label> </span> </div> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" class="form-textbox validate[limitDate, validateLiteDate]" id="lite_mode_4" size="12" data-maxlength="12" data-age="" value="" data-format="mmddyyyy" data-seperator="/" placeholder="mm/dd/yyyy" aria-labelledby="label_4" /> <img class="showAutoCalendar" alt="Pick a Date0" id="input_4_pick" src="https://cdn.jotfor.ms/images/calendar.png" style="vertical-align:middle;margin-left:5px" data-component="datetime" aria-hidden="true" /> <label class="form-sub-label" for="lite_mode_4" id="sublabel_4_litemode" style="min-height:13px"> </label> </span> <span class="form-sub-label-container" style="vertical-align:top"> <label class="form-sub-label" for="input_4_pick" style="border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap"> Date Picker Icon </label> </span> </div> </div> </li> <li class="form-line" data-type="control_fullname" id="id_5"> <label class="form-label form-label-left form-label-auto" id="label_5" for="first_5"> Client Name </label> <div id="cid_5" class="form-input"> <div data-wrapper-react="true"> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" id="first_5" name="q5_clientName[first]" class="form-textbox" size="10" value="" data-component="first" aria-labelledby="label_5 sublabel_5_first" /> <label class="form-sub-label" for="first_5" id="sublabel_5_first" style="min-height:13px"> Full Name </label> </span> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" id="last_5" name="q5_clientName[last]" class="form-textbox" size="15" value="" data-component="last" aria-labelledby="label_5 sublabel_5_last" /> <label class="form-sub-label" for="last_5" id="sublabel_5_last" style="min-height:13px"> Company Name </label> </span> </div> </div> </li> <li class="form-line" data-type="control_textbox" id="id_12"> <label class="form-label form-label-left form-label-auto" id="label_12" for="input_12"> Email </label> <div id="cid_12" class="form-input"> <input type="text" id="input_12" name="q12_email" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" aria-labelledby="label_12" /> </div> </li> <li class="form-line" data-type="control_textbox" id="id_11"> <label class="form-label form-label-left form-label-auto" id="label_11" for="input_11"> Website </label> <div id="cid_11" class="form-input"> <input type="text" id="input_11" name="q11_website" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" aria-labelledby="label_11" /> </div> </li> <li class="form-line" data-type="control_textbox" id="id_6"> <label class="form-label form-label-left form-label-auto" id="label_6" for="input_6"> How did you hear about Solutions by Miranda </label> <div id="cid_6" class="form-input"> <input type="text" id="input_6" name="q6_howDid" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" aria-labelledby="label_6" /> </div> </li> <li class="form-line" data-type="control_widget" id="id_20"> <label class="form-label form-label-left form-label-auto" id="label_20" for="input_20"> Goals </label> <div id="cid_20" class="form-input"> <div style="width:100%;text-align:Left" data-component="widget-field"> <iframe title="Configurable List" frameBorder="0" scrolling="no" allowtransparency="true" allow="geolocation; microphone; camera; autoplay; encrypted-media; fullscreen" data-type="iframe" class="custom-field-frame" id="customFieldFrame_20" src="" style="border:none;width:650px;height:130px" data-width="650" data-height="130"> </iframe> <div class="widget-inputs-wrapper"> <input type="hidden" id="input_20" class="form-hidden form-widget " name="q20_goals20" value="" /> <input type="hidden" id="widget_settings_20" class="form-hidden form-widget-settings" value="%5B%7B%22name%22%3A%22fields%22%2C%22value%22%3A%22Text%20Area%20%3A%20textarea%5CnDrop%20down%20%3A%20dropdown%20%3A%20one%2C%20two%2C%20three%20%3A%20Please%20Select%22%7D%2C%7B%22name%22%3A%22minRowsNumber%22%2C%22value%22%3A%221%22%7D%2C%7B%22name%22%3A%22limit%22%2C%22value%22%3A%220%22%7D%2C%7B%22name%22%3A%22customCSS%22%2C%22value%22%3A%22.checkbox%2C%20.radio%20%7B%5Cnmargin%3A%203px%200%3B%5Cnmin-width%3A%2070px%3B%5Cn%7D%22%7D%2C%7B%22name%22%3A%22labelAdd%22%2C%22value%22%3A%22New%20Item%22%7D%2C%7B%22name%22%3A%22labelRemove%22%2C%22value%22%3A%22x%22%7D%5D" data-version="2" /> </div> <script type="text/javascript"> setTimeout(function() { var _cFieldFrame = document.getElementById("customFieldFrame_20"); if (_cFieldFrame) { _cFieldFrame.onload = function() { if (typeof widgetFrameLoaded !== 'undefined') { widgetFrameLoaded(20, { "formID": 92894905240160 }) } }; _cFieldFrame.src = "//widgets.jotform.io/configurableList/?qid=20&ref=" + encodeURIComponent(window.location.protocol + "//" + window.location.host); _cFieldFrame.addClassName("custom-field-frame-rendered"); } }, 0); </script> </div> </div> </li> <li class="form-line" data-type="control_widget" id="id_21"> <label class="form-label form-label-left form-label-auto" id="label_21" for="input_21"> Current Issues </label> <div id="cid_21" class="form-input"> <div style="width:100%;text-align:Left" data-component="widget-field"> <iframe title="Configurable List" frameBorder="0" scrolling="no" allowtransparency="true" allow="geolocation; microphone; camera; autoplay; encrypted-media; fullscreen" data-type="iframe" class="custom-field-frame" id="customFieldFrame_21" src="" style="border:none;width:650px;height:130px" data-width="650" data-height="130"> </iframe> <div class="widget-inputs-wrapper"> <input type="hidden" id="input_21" class="form-hidden form-widget " name="q21_currentIssues21" value="" /> <input type="hidden" id="widget_settings_21" class="form-hidden form-widget-settings" value="%5B%7B%22name%22%3A%22fields%22%2C%22value%22%3A%22Text%20Area%20%3A%20textarea%5CnDrop%20down%20%3A%20dropdown%20%3A%20one%2C%20two%2C%20three%20%3A%20Please%20Select%22%7D%2C%7B%22name%22%3A%22minRowsNumber%22%2C%22value%22%3A%221%22%7D%2C%7B%22name%22%3A%22limit%22%2C%22value%22%3A%220%22%7D%2C%7B%22name%22%3A%22customCSS%22%2C%22value%22%3A%22.checkbox%2C%20.radio%20%7B%5Cnmargin%3A%203px%200%3B%5Cnmin-width%3A%2070px%3B%5Cn%7D%22%7D%2C%7B%22name%22%3A%22labelAdd%22%2C%22value%22%3A%22New%20Item%22%7D%2C%7B%22name%22%3A%22labelRemove%22%2C%22value%22%3A%22x%22%7D%5D" data-version="2" /> </div> <script type="text/javascript"> setTimeout(function() { var _cFieldFrame = document.getElementById("customFieldFrame_21"); if (_cFieldFrame) { _cFieldFrame.onload = function() { if (typeof widgetFrameLoaded !== 'undefined') { widgetFrameLoaded(21, { "formID": 92894905240160 }) } }; _cFieldFrame.src = "//widgets.jotform.io/configurableList/?qid=21&ref=" + encodeURIComponent(window.location.protocol + "//" + window.location.host); _cFieldFrame.addClassName("custom-field-frame-rendered"); } }, 0); </script> </div> </div> </li> <li class="form-line" data-type="control_textbox" id="id_10"> <label class="form-label form-label-left form-label-auto" id="label_10" for="input_10"> Inspirations </label> <div id="cid_10" class="form-input"> <input type="text" id="input_10" name="q10_inspirations" data-type="input-textbox" class="form-textbox" size="20" value="" data-component="textbox" aria-labelledby="label_10" /> </div> </li> <li class="form-line" data-type="control_textarea" id="id_13"> <label class="form-label form-label-left form-label-auto" id="label_13" for="input_13"> Notes </label> <div id="cid_13" class="form-input"> <textarea id="input_13" class="form-textarea" name="q13_notes" cols="40" rows="6" data-component="textarea" aria-labelledby="label_13"></textarea> </div> </li> <li class="form-line" data-type="control_fullname" id="id_16"> <label class="form-label form-label-left form-label-auto" id="label_16" for="first_16"> </label> <div id="cid_16" class="form-input"> <div data-wrapper-react="true"> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" id="first_16" name="q16_input16[first]" class="form-textbox" size="10" value="" data-component="first" aria-labelledby="label_16 sublabel_16_first" /> <label class="form-sub-label" for="first_16" id="sublabel_16_first" style="min-height:13px"> Budget </label> </span> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" id="last_16" name="q16_input16[last]" class="form-textbox" size="15" value="" data-component="last" aria-labelledby="label_16 sublabel_16_last" /> <label class="form-sub-label" for="last_16" id="sublabel_16_last" style="min-height:13px"> Pay Schedule </label> </span> </div> </div> </li> <li class="form-line" data-type="control_fullname" id="id_17"> <label class="form-label form-label-left form-label-auto" id="label_17" for="first_17"> </label> <div id="cid_17" class="form-input"> <div data-wrapper-react="true"> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" id="first_17" name="q17_input17[first]" class="form-textbox" size="10" value="" data-component="first" aria-labelledby="label_17 sublabel_17_first" /> <label class="form-sub-label" for="first_17" id="sublabel_17_first" style="min-height:13px"> Timeline </label> </span> <span class="form-sub-label-container" style="vertical-align:top"> <input type="text" id="last_17" name="q17_input17[last]" class="form-textbox" size="15" value="" data-component="last" aria-labelledby="label_17 sublabel_17_last" /> <label class="form-sub-label" for="last_17" id="sublabel_17_last" style="min-height:13px"> Prefered Communication </label> </span> </div> </div> </li> <li class="form-line" data-type="control_widget" id="id_19"> <label class="form-label form-label-left form-label-auto" id="label_19" for="input_19"> Action Items </label> <div id="cid_19" class="form-input"> <div style="width:100%;text-align:Left" data-component="widget-field"> <iframe title="Configurable List" frameBorder="0" scrolling="no" allowtransparency="true" allow="geolocation; microphone; camera; autoplay; encrypted-media; fullscreen" data-type="iframe" class="custom-field-frame" id="customFieldFrame_19" src="" style="border:none;width:650px;height:130px" data-width="650" data-height="130"> </iframe> <div class="widget-inputs-wrapper"> <input type="hidden" id="input_19" class="form-hidden form-widget " name="q19_actionItems19" value="" /> <input type="hidden" id="widget_settings_19" class="form-hidden form-widget-settings" value="%5B%7B%22name%22%3A%22fields%22%2C%22value%22%3A%22Text%20Area%20%3A%20textarea%5CnCalendar%20%3A%20date%20%3A%20m%2Fd%2Fy%20%3A%202000-2022%22%7D%2C%7B%22name%22%3A%22minRowsNumber%22%2C%22value%22%3A%221%22%7D%2C%7B%22name%22%3A%22limit%22%2C%22value%22%3A%220%22%7D%2C%7B%22name%22%3A%22customCSS%22%2C%22value%22%3A%22.checkbox%2C%20.radio%20%7B%5Cnmargin%3A%203px%200%3B%5Cnmin-width%3A%2070px%3B%5Cn%7D%22%7D%2C%7B%22name%22%3A%22labelAdd%22%2C%22value%22%3A%22New%20Item%22%7D%2C%7B%22name%22%3A%22labelRemove%22%2C%22value%22%3A%22x%22%7D%5D" data-version="2" /> </div> <script type="text/javascript"> setTimeout(function() { var _cFieldFrame = document.getElementById("customFieldFrame_19"); if (_cFieldFrame) { _cFieldFrame.onload = function() { if (typeof widgetFrameLoaded !== 'undefined') { widgetFrameLoaded(19, { "formID": 92894905240160 }) } }; _cFieldFrame.src = "//widgets.jotform.io/configurableList/?qid=19&ref=" + encodeURIComponent(window.location.protocol + "//" + window.location.host); _cFieldFrame.addClassName("custom-field-frame-rendered"); } }, 0); </script> </div> </div> </li> <li class="form-line" data-type="control_button" id="id_2"> <div id="cid_2" class="form-input-wide"> <div style="margin-left:156px" class="form-buttons-wrapper "> <button id="input_2" type="submit" class="form-submit-button form-submit-button-simple_rose" data-component="button"> Submit </button> </div> </div> </li> <li style="display:none"> Should be Empty: <input type="text" name="website" value="" /> </li> </ul> </div> <script> JotForm.showJotFormPowered = "new_footer"; </script> <input type="hidden" id="simple_spc" name="simple_spc" value="92894905240160" /> <script type="text/javascript"> document.getElementById("si" + "mple" + "_spc").value = "92894905240160-92894905240160"; </script> <script src="https://cdn.jotfor.ms/js/widgetResizer.js?REV=3.3.13482" type="text/javascript"></script> <div class="formFooter-heightMask"> </div> <div class="formFooter f6"> <a href="https://www.jotform.com/pricing?utm_source=formfooter&utm_medium=banner&utm_term=92894905240160&utm_content=jotform_logo&utm_campaign=powered_by_jotform_le" target="_blank" class="formFooter-logoLink"><img class="formFooter-logo" src="https://cdn.jotfor.ms/assets/img/logo/logo-new@1x.png" alt="How to change font color of my input fields? Image-1" style="height: 44px;"></a> <div class="formFooter-rightSide"> <span class="formFooter-text"> Now create your own JotForm - It's free! </span> <a class="formFooter-button" href="https://www.jotform.com/?utm_source=formfooter&utm_medium=banner&utm_term=92894905240160&utm_content=jotform_button&utm_campaign=powered_by_jotform_le" target="_blank">Create your own JotForm</a> </div> </div> </form>

    <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.13482" type="text/javascript"></script> <script src="https://js.jotform.com/vendor/postMessage.js?3.3.13482" type="text/javascript"></script> <script src="https://js.jotform.com/WidgetsServer.js?v=1571690138592" type="text/javascript"></script> <script type="text/javascript"> JotForm.init(function(){ JotForm.calendarMonths = ["January","February","March","April","May","June","July","August","September","October","November","December"]; JotForm.calendarDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; JotForm.calendarOther = {"today":"Today"}; var languageOptions = document.querySelectorAll('#langList li'); for(var langIndex = 0; langIndex < languageOptions.length; langIndex++) { languageOptions[langIndex].on('click', function(e) { setTimeout(function(){ JotForm.setCalendar("4", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); }, 0); }); } JotForm.setCalendar("4", false, {"days":{"monday":true,"tuesday":true,"wednesday":true,"thursday":true,"friday":true,"saturday":true,"sunday":true},"future":true,"past":true,"custom":false,"ranges":false,"start":"","end":""}); JotForm.alterTexts(undefined); JotForm.clearFieldOnHide="disable"; JotForm.submitError="jumpToFirstError"; /*INIT-END*/ }); JotForm.prepareCalculationsOnTheFly([null,{"name":"initialIntroductions","qid":"1","text":"Initial Introductions","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},null,{"description":"","name":"date","qid":"4","text":"Today's Date","type":"control_datetime"},{"description":"","name":"clientName","qid":"5","text":"Client Name","type":"control_fullname"},{"description":"","name":"howDid","qid":"6","subLabel":"","text":"How did you hear about Solutions by Miranda","type":"control_textbox"},null,null,null,{"description":"","name":"inspirations","qid":"10","subLabel":"","text":"Inspirations","type":"control_textbox"},{"description":"","name":"website","qid":"11","subLabel":"","text":"Website","type":"control_textbox"},{"description":"","name":"email","qid":"12","subLabel":"","text":"Email","type":"control_textbox"},{"description":"","name":"notes","qid":"13","subLabel":"","text":"Notes","type":"control_textarea"},null,null,{"description":"","name":"input16","qid":"16","text":"","type":"control_fullname"},{"description":"","name":"input17","qid":"17","text":"","type":"control_fullname"},null,{"name":"actionItems19","qid":"19","text":"Action Items","type":"control_widget"},{"name":"goals20","qid":"20","text":"Goals","type":"control_widget"},{"name":"currentIssues21","qid":"21","text":"Current Issues","type":"control_widget"}]); setTimeout(function() { JotForm.paymentExtrasOnTheFly([null,{"name":"initialIntroductions","qid":"1","text":"Initial Introductions","type":"control_head"},{"name":"submit2","qid":"2","text":"Submit","type":"control_button"},null,{"description":"","name":"date","qid":"4","text":"Today's Date","type":"control_datetime"},{"description":"","name":"clientName","qid":"5","text":"Client Name","type":"control_fullname"},{"description":"","name":"howDid","qid":"6","subLabel":"","text":"How did you hear about Solutions by Miranda","type":"control_textbox"},null,null,null,{"description":"","name":"inspirations","qid":"10","subLabel":"","text":"Inspirations","type":"control_textbox"},{"description":"","name":"website","qid":"11","subLabel":"","text":"Website","type":"control_textbox"},{"description":"","name":"email","qid":"12","subLabel":"","text":"Email","type":"control_textbox"},{"description":"","name":"notes","qid":"13","subLabel":"","text":"Notes","type":"control_textarea"},null,null,{"description":"","name":"input16","qid":"16","text":"","type":"control_fullname"},{"description":"","name":"input17","qid":"17","text":"","type":"control_fullname"},null,{"name":"actionItems19","qid":"19","text":"Action Items","type":"control_widget"},{"name":"goals20","qid":"20","text":"Goals","type":"control_widget"},{"name":"currentIssues21","qid":"21","text":"Current Issues","type":"control_widget"}]);}, 20); </script> <link href="https://cdn.jotfor.ms/static/formCss.css?3.3.13482" rel="stylesheet" type="text/css" /> <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.13482" /> <link type="text/css" media="print" rel="stylesheet" href="https://cdn.jotfor.ms/css/printForm.css?3.3.13482" /> <link type="text/css" rel="stylesheet" href="https://cdn.jotfor.ms/themes/CSS/557cd890977cdfc9378b4567.css?themeRevisionID=5b4c4fb1a699e24edd3d8441"/> <style type="text/css"> .form-label-left{ width:200px; } .form-line{ padding-top:15px; padding-bottom:15px; } .form-label-right{ width:200px; } .form-all{ width:750px; color:#000000 !important; font-family:'Josefin Slab'; font-size:18px; } </style> <style type="text/css" id="form-designer-style"> /* Injected CSS Code */ @import "https://fonts.googleapis.com/css?family=Josefin+Slab:light,lightitalic,normal,italic,bold,bolditalic"; .form-all:after { content: ""; display: table; clear: both; } .form-all { font-family: "Josefin Slab", sans-serif; } .form-all { width: 750px; width: 100%; max-width: 750px; } .form-label-left, .form-label-right { width: 200px; } .form-label { white-space: normal; } .form-label.form-label-auto { display: inline-block; float: left; text-align: left; word-break: break-word; width: 200px; } .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-radio-item label:before { top: 0; } .form-all { font-size: 18px; } .form-label { font-weight: normal; font-size: 0.95em; } .supernova { background-color: #f8ebef; background-color: #fadeef; } .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 #f3b2da; -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 .form-all { margin: 0; width: 100%; } } /* | */ /* | */ @media screen and (min-width: 480px) and (max-width: 767px) { .jotform-form .form-all { margin: 0; width: 100%; } } /* | */ /* | */ @media screen and (min-width: 480px) and (max-width: 749px) { .jotform-form .form-all { margin: 0; width: 100%; } } /* | */ /* | */ @media screen and (min-width: 768px) { .jotform-form { padding: 60px 0; } } /* | */ /* | */ @media screen and (max-width: 749px) { .jotform-form .form-all { margin: 0; width: 100%; } } /* | */ .supernova .form-all, .form-all { background-color: #f8ebef; border: 1px solid transparent; } .form-header-group { border-color: #ebc5d1; } .form-matrix-table tr { border-color: #ebc5d1; } .form-matrix-table tr:nth-child(2n) { background-color: #f1d8e0; } .form-all { color: #4a4a4a; } .form-header-group .form-header { color: #4a4a4a; } .form-header-group .form-subHeader { color: #646464; } .form-sub-label { color: #646464; } .form-label-top, .form-label-left, .form-label-right, .form-html { color: #646464; } .form-checkbox-item label, .form-radio-item label { color: #4a4a4a; } .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(255, 255, 224, 0.08); } /* omer */ .form-radio-item, .form-checkbox-item { padding-bottom: 4px !important; } .form-radio-item:last-child, .form-checkbox-item:last-child { padding-bottom: 0; } /* omer */ .form-single-column .form-checkbox-item, .form-single-column .form-radio-item { width: 100%; } .form-checkbox-item .editor-container div, .form-radio-item .editor-container div { position: relative; } .form-checkbox-item .editor-container div:before, .form-radio-item .editor-container div:before { display: inline-block; vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; left: 0; width: 24px; height: 24px; } .form-radio-item:not(#foo) { position: relative; } .form-radio-item:not(#foo) .form-radio-other-input, .form-radio-item:not(#foo) .form-checkbox-item:not(#foo) .form-checkbox-other-input { margin-left: 0; } .form-radio-item:not(#foo) .form-radio-other.form-radio { display: none !important; } .form-radio-item:not(#foo) input[type="checkbox"], .form-radio-item:not(#foo) input[type="radio"] { display: none; } .form-radio-item:not(#foo) .form-radio-other, .form-radio-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-radio-item:not(#foo) .form-checkbox-other-input, .form-radio-item:not(#foo) .form-radio-other-input { margin: 0; } .form-radio-item:not(#foo) label { line-height: 18px; float: left; margin-left: 37px; } .form-radio-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 18px; height: 18px; cursor: pointer; } .form-radio-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 5px; left: 9px; width: 8px; height: 8px; } .form-radio-item:not(#foo) input:checked + label:after { opacity: 1; } .form-radio-item:not(#foo) input[type="checkbox"], .form-radio-item:not(#foo) input[type="radio"] { display: none; } .form-radio-item:not(#foo) .form-radio-other, .form-radio-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-radio-item:not(#foo) .form-checkbox-other-input, .form-radio-item:not(#foo) .form-radio-other-input { margin: 0; } .form-radio-item:not(#foo) label { line-height: 24px; float: left; margin-left: 43px; } .form-radio-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 24px; height: 24px; cursor: pointer; } .form-radio-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 7px; left: 11px; width: 10px; height: 10px; } .form-radio-item:not(#foo) input:checked + label:after { opacity: 1; } .form-radio-item:not(#foo) label:before { border: 2px solid #ffffff; } .form-radio-item:not(#foo) label:after { background-color: #ffffff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; cursor: pointer; } .form-radio-item:not(#foo) .editor-container div:before { content: ''; border: 2px solid #ffffff; border-radius: 50%; margin: 0 4px 0 -6px; } .form-checkbox-item:not(#foo) { position: relative; } .form-checkbox-item:not(#foo) label { display: block; } .form-checkbox-item:not(#foo) .form-radio-other-input, .form-checkbox-item:not(#foo) .form-checkbox-item:not(#foo) .form-checkbox-other-input { margin-left: 0; } .form-checkbox-item:not(#foo) .form-checkbox-other.form-checkbox { display: none !important; } .form-checkbox-item:not(#foo) input[type="checkbox"], .form-checkbox-item:not(#foo) input[type="radio"] { display: none; } .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-checkbox-item:not(#foo) .form-checkbox-other-input, .form-checkbox-item:not(#foo) .form-radio-other-input { margin: 0; } .form-checkbox-item:not(#foo) label { line-height: 18px; float: left; margin-left: 37px; } .form-checkbox-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 18px; height: 18px; cursor: pointer; } .form-checkbox-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 8px; left: 9px; width: 3px; height: 3px; } .form-checkbox-item:not(#foo) input:checked + label:after { opacity: 1; } .form-checkbox-item:not(#foo) label:before { border: 2px solid #ffffff; } .form-checkbox-item:not(#foo) label:after { background-color: #ffffff; box-shadow: 0 2px 0 0 #ffffff, 2px 2px 0 0 #ffffff, 4px 2px 0 0 #ffffff, 6px 2px 0 0 #ffffff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .form-checkbox-item:not(#foo) .editor-container div:before { content: ''; border: 2px solid #ffffff; border-radius: 50%; margin: 0 4px 0 -6px; } .form-checkbox-item:not(#foo) input[type="checkbox"], .form-checkbox-item:not(#foo) input[type="radio"] { display: none; } .form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other { display: inline-block !important; margin-left: 17px; margin-right: 13px; margin-top: 4px; } .form-checkbox-item:not(#foo) .form-checkbox-other-input, .form-checkbox-item:not(#foo) .form-radio-other-input { margin: 0; } .form-checkbox-item:not(#foo) label { line-height: 24px; float: left; margin-left: 43px; } .form-checkbox-item:not(#foo) label:before { content: ''; position: absolute; display: inline-block; vertical-align: baseline; margin-right: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; left: 4px; width: 24px; height: 24px; cursor: pointer; } .form-checkbox-item:not(#foo) label:after { content: ''; position: absolute; z-index: 10; display: inline-block; opacity: 0; top: 11px; left: 10px; width: 4px; height: 4px; } .form-checkbox-item:not(#foo) input:checked + label:after { opacity: 1; } .form-checkbox-item:not(#foo) label:after { background-color: #ffffff; box-shadow: 0 3px 0 0 #ffffff, 3px 3px 0 0 #ffffff, 6px 3px 0 0 #ffffff, 8px 3px 0 0 #ffffff; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .supernova { height: 100%; background-repeat: no-repeat; background-attachment: scroll; background-position: center top; background-attachment: fixed; background-size: auto; background-size: cover; } .supernova { background-image: none; background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/augustine-wong-li0iC0rjvvg-unsplash.5dacd0a3e64274.20007813.jpg"); } #stage { background-image: none; background-image: url("https://www.jotform.com/uploads/solutionsbymiranda/form_files/augustine-wong-li0iC0rjvvg-unsplash.5dacd0a3e64274.20007813.jpg"); } /* | */ .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: 15px; margin-bottom: 15px; } .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: 0px; -moz-border-radius: 0px; border-radius: 0px; } .form-all .form-textarea { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .form-all .form-sub-label { margin-left: 3px; } .form-dropdown { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; -moz-appearance: button; appearance: none; margin: 0; } .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: "Josefin Slab", sans-serif; font-size: 16px; font-weight: normal; border: none; border-width: 1px !important; border-style: solid !important; border-color: #ffffff !important; } .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print { color: #ffffff !important; background: rgba(255, 255, 255, 0); box-shadow: none; text-shadow: none; } .form-all .form-pagebreak-back, .form-all .form-pagebreak-next { font-size: 1em; padding: 9px 15px; font-family: "Josefin Slab", sans-serif; font-size: 18px; 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: center; } /*.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: "Josefin Slab", sans-serif; } .form-section { padding: 0px 0px 0px 0px; } .form-header-group { margin: 12px 0px 12px 0px; } .form-header-group { padding: 6px 36px 6px 36px; } .f

  • VincentJay
    Replied on October 21, 2019 at 6:34 PM

    Hi, I created a screencast guide that you can follow to change the font color of your form.

    1571697228jngdj5 Screenshot 10

    Please give it a try and let us know if that's what you're looking for. 

    Thank you.

  • solutionsbymiranda
    Replied on October 21, 2019 at 11:50 PM
    Hi There,
    The font I am having a hard time changing is inside the question boxes. or
    the responses if you will.
    ...
  • jherwin
    Replied on October 22, 2019 at 1:49 AM

    Please try the CSS code below:

    .form-textbox, .form-textarea, .form-dropdown {color: red !important;}

    Simply change the "red" to your preferred font color.

    Guide: How-to-Inject-Custom-CSS-Codes