Forms

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px
Section Overlay Embeded

Do you need more detailed data?

Our ratings data is designed to fully support you as you calculate credit risk exposure, develop and monitor investments, support regulatory and performance attribution reporting.

Request a sample data file: fill out the form and one of our specialists will get in touch to schedule an appropriate time to discuss.

Thank you for your request. One of our specialists will be in touch shortly.

If you need immediate assistance, please contact our nearest office.

Download Now

Thank you. Your download link will be emailed to you shortly.

Code

HTML CSS SCSS JS 
<div class="embedded-form">
  <div class="form-form">
    <script>
      MktoForms2.loadForm("//your.fitchsolutions.com", "732-CKH-767", 4337);
    </script>
    <form id="mktoForm_4337" data-form-type="static"></form>
  </div>
  <div class="form-thankyou">
    <p> Thank you. Your download link will be emailed to you shortly. </p>
  </div>
</div>

 

.mktoForm {
  font-size: 100%;
}

.mktoFieldWrap {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.mktoFormRow,
.mktoFormCol {
  width: 100%;
  padding: 0 var(--spacing-1);
}

.embedded-form .mktoFormRow {
  width: 100%;
  padding: 0;
}

.embedded-form .mktoFormCol {
  padding: 0 0 0 2.4rem;
}

.embedded-form .mktoFormRow .mktoFormCol:first-child {
  padding: 0;
}

/* iPad Portrait  */
@media only screen and (max-width: 768px) {
  .mktoFormRow {
    padding: 0;
  }
}

.mktoFormRow,
.mktoFormRow .fieldset {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
  align-items: flex-start;
}

.mktoFormRow .mktoFormCol,
.mktoFormRow .fieldset .mktoFormRow {
  margin-bottom: 1.8rem;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.mktoFormRow .fieldset .mktoFormRow {
  padding: 0;
}

.mktoFormRow .fieldset .mktoFormRow,
.mktoFormRow .fieldset .mktoFormCol {
  margin-bottom: 0;
}

.mktoFormRow fieldset {
  margin: 0;
  padding: 0;
  border: 0 none;
}

label[for|='edit'],
.mktoLabel {
  margin-bottom: 0.8rem;
  padding: 0;
  font-size: 100%;
  line-height: var(--line-height-3);
  -ms-flex-order: 1;
  order: 1;
}

.embedded-form label[for|='edit'],
.embedded-form .mktoLabel {
  margin-bottom: 0.8rem;
  padding: 0;
  font-size: 100%;
  line-height: var(--line-height-3);
  -ms-flex-order: 1;
  order: 1;
  color: inherit;
}

label.form-required[for|='edit'],
.mktoRequiredField .mktoLabel {
  font-weight: bold;
}

.mktoLabel + .mktoField {
  margin-bottom: var(--spacing-1);
}

.mktoAsterix {
  padding: 0;
  float: right;
  color: #d61616;
  display: none;
}

.mktoRequiredField .mktoAsterix {
  display: inline-block;
}

.mktoForm input[type='text'],
.mktoForm input[type='url'],
.mktoForm input[type='email'],
.mktoForm input[type='tel'],
.mktoForm input[type='number'],
.mktoForm input[type='date'],
.mktoForm input[type='password'],
textarea.mktoField,
select.mktoField {
  width: 100%;
  height: auto;
  padding: 1rem;
  line-height: var(--line-height-3);
  border: 0.1rem solid var(--border-color);
  border-radius: 0.5rem;
  -ms-flex-order: 2;
  order: 2;
  color: #000000;
}

input[type='radio'] {
  -webkit-appearance: radio;
}

select.mktoField {
  background: white;
  height: 4.1rem;
}

.mktoCheckboxList {
  position: relative;
  padding-right: 0.5rem;
  text-align: left;
  -ms-flex-order: 1;
  order: 1;
}

.mktoForm .mktoCheckboxList label {
  padding: 0 1.8rem var(--font-size-2) 0.6rem;
  float: left;
  margin: -0.5rem 0 0 0;
}

.mktoHtmlText {
  width: 100%;
}

.mktoButtonRow {
  width: 100%;
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
  text-align: center;
}

.mktoButtonWrap {
  width: 100%;
  margin-left: 0;
  text-align: center;
  display: block;
}

.embedded-form .mktoButtonWrap {
  text-align: right;
}

.mktoError {
  position: absolute;
  width: 100%;
  top: calc(100% - 1.2rem);
  right: 0 !important;
  bottom: auto !important;
  z-index: 100;
}

.mktoError .mktoErrorArrowWrap {
  width: 1.6rem;
  height: 0.8rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0.5rem;
  z-index: 100;
}

.mktoError .mktoErrorArrowWrap .mktoErrorArrow {
  background-color: var(--form-error-background);
  border: var(--form-error-border);
  border-right: none;
  border-bottom: none;
  display: inline-block;
  height: 1.6rem;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  width: 1.6rem;
  margin-top: 0.5rem;
}

.mktoError .mktoErrorMsg {
  margin-top: 0.7rem;
  padding: 1rem var(--spacing-1);
  background: var(--form-error-background);
  background-image: none;
  border: 0 none;
  border-radius: 0;
  text-shadow: none;
  color: var(--text-color);
}

#form-thankyou,
.form-thankyou {
  display: none;
}

.form-notice {
  font-size: var(--font-size-3);
  text-align: center;
}

.form-item {
  margin-bottom: 2.4rem;
}

.form-item label {
  margin-bottom: 0.6rem;
  font-weight: bold;
  display: block;
}

.form-item input {
  width: 100%;
  height: auto;
  margin-bottom: 0.6rem;
  padding: 1rem;
  background: none;
  border: 0.1rem solid var(--inverted-border-color);
  border-radius: 0.3rem;
  line-height: var(--line-height-3);
}

.mktoFormRow:nth-last-of-type(5) {
  width: 100%;
}

#form-thank-you-message {
  text-align: center;
}

.form-thankyou {
  display: none;
}

.description {
  margin-bottom: var(--spacing-2);
}

/* iPhone 6 onwards */
@media only screen and (max-width: 480px) {
  .mktoFormRow,
  .mktoFormRow .fieldset {
    display: block;
  }
  .mktoFormRow .fieldset .mktoFormRow {
    min-height: 5.0rem;
    margin-bottom: 0.6rem;
    display: -ms-flexbox;
    display: flex;
  }
  .embedded-form .mktoFormCol {
    padding: 0 0 0 0;
  }
}

input#Has_Accepted_Privacy_Policy_Terms__c {
  margin: 0.2rem 0 0 1.2rem;
}

.embedded-form label.mktoLabel[for='Has_Accepted_Privacy_Policy_Terms__c'] {
  width: 90% !important;
}

label.mktoLabel[for='Has_Accepted_Privacy_Policy_Terms__c'] a {
  text-decoration: underline;
  color: inherit;
}

.overlay-content-wrapper .form-thankyou p {
  color: var(--text-color);
  padding: 0 var(--spacing-1);
}

.embedded-form .form-thankyou p {
  color: var(--inverted-text-color);
  padding: 0 var(--spacing-2);
}

#Comments__c {
  resize: none;
}

 

.mktoForm {
  font-size: 100%;
}
.salesforce-embedded-form form {
  width: calc(100% + var(--spacing-2));
  margin-left: calc(var(--spacing-1) * -1);
  display: flex;
  flex-flow: row wrap;
}
.salesforce-embedded-form .input-field {
  width: 50%;
  padding: 0 var(--spacing-1);
  flex-grow: 1;
  
  @include mq-4 {
    width: 100%;
  }
}
.salesforce-embedded-form .full {
  width: 100%;
}

.mktoFieldWrap {
  position: relative;
  display: flex;
  flex-flow: row wrap;
}

.mktoFormRow,
.mktoFormCol {
  width: 100%;
  padding: 0 var(--spacing-1);
}
.embedded-form {

  .mktoFormRow {
    width: 100%;
    padding: 0;
  }

  .mktoFormCol {
    padding: 0 0 0 var(--spacing-2);
  }

  .mktoFormRow .mktoFormCol:first-child {
    padding: 0;
  }
} 

@include mq-3 {
  .mktoFormRow {
    padding: 0;
  }
}

.mktoFormRow,
.mktoFormRow .fieldset {
  display: flex;
  align-items: flex-start;
}
.mktoFormRow .mktoFormCol,
.mktoFormRow .fieldset .mktoFormRow,
.salesforce-embedded-form form > div {
  margin-bottom: 1.8rem;
  flex-grow: 1;
}

.mktoFormRow .fieldset .mktoFormRow {
  padding: 0;
}
.mktoFormRow .fieldset .mktoFormRow,
.mktoFormRow .fieldset .mktoFormCol {
  margin-bottom: 0;
}

.mktoFormRow fieldset {
  margin: 0;
  padding: 0;
  border: 0 none;
}

label[for|='edit'],
.mktoLabel,
.input-field label {
  margin-bottom: 0.8rem;
  padding: 0;
  font-size: 100%;
  line-height: var(--line-height-3);
  order: 1;
}

.embedded-form label[for|='edit'],
.embedded-form .mktoLabel {
  color: inherit;
}

label.form-required[for|='edit'],
.mktoRequiredField .mktoLabel,
.input-field.required label {
  font-weight: var(--bold);
}
.mktoLabel + .mktoField,
.input-field label + input,
.input-field label + select,
.input-field label + textarea {
  margin-bottom: var(--spacing-1);
}

.mktoAsterix {
  padding: 0;
  float: right;
  color: var(--form-required);
  display: none;
}
.mktoRequiredField .mktoAsterix {
  padding-left: 0.3rem;
  display: inline-block;
}

.salesforce-embedded-form .required label:after {
  content: ' *';
  color: var(--form-required);
}

.mktoForm input[type='text'],
.mktoForm input[type='url'],
.mktoForm input[type='email'],
.mktoForm input[type='tel'],
.mktoForm input[type='number'],
.mktoForm input[type='date'],
.mktoForm input[type='password'],
.salesforce-embedded-form input[type='text'],
.salesforce-embedded-form input[type='url'],
.salesforce-embedded-form input[type='email'],
.salesforce-embedded-form input[type='tel'],
.salesforce-embedded-form input[type='number'],
.salesforce-embedded-form input[type='date'],
.salesforce-embedded-form input[type='password'],
textarea.mktoField,
select.mktoField,
.select-dropdown select.dropdown {
  width: 100%;
  height: auto;
  padding: 1rem;
  line-height: var(--line-height-3);
  border: 0.1rem solid var(--border-color);
  border-radius: 0.5rem;
  order: 2;
  color: var(--black);
}
input[type='radio'] {
  -webkit-appearance: radio;
}
select.mktoField,
.input-field select {
  background: white;
  height: 4.1rem;
}
.mktoCheckboxList {
  position: relative;
  padding-right: var(--spacing-1);
  text-align: left;
  order: 0;

  & input {
    margin: 0;
    vertical-align: text-top;
  }
}
.mktoHtmlText {
  width: 100%;
}

.mktoButtonRow {
  width: 100%;
  margin-top: var(--spacing-2);
  text-align: center;
}
.overlay-content-wrapper .mktoButtonRow {
  margin-bottom: var(--spacing-2);
}

.mktoButtonWrap {
  width: 100%;
  margin-left: 0;
  text-align: center;
  display: block;
}

.embedded-form .mktoButtonWrap {
  text-align: var(--form-button-position);
}

.mktoError {
  position: absolute;
  width: 100%;
  top: calc(100% - var(--spacing-1));
  right: 0 !important;
  bottom: auto !important;
  z-index: 100;
}

.mktoError .mktoErrorArrowWrap {
  width: 1.6rem;
  height: 0.8rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0.5rem;
  z-index: 100;
}

.mktoError .mktoErrorArrowWrap .mktoErrorArrow {
  background-color: var(--form-error-background);
  border: var(--form-error-border);
  border-right: none;
  border-bottom: none;
  display: inline-block;
  height: 1.6rem;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  width: 1.6rem;
  margin-top: 0.5rem;
}

.mktoError .mktoErrorMsg {
  margin-top: 0.7rem;
  padding: 1rem var(--spacing-1);
  background: var(--form-error-background);
  background-image: none;
  border: 0 none;
  border-radius: 0;
  text-shadow: none;
  color: var(--inverted-text-color);
}

#form-thankyou,
.form-thankyou {
  display: none;
}

.form-notice {
  font-size: var(--font-size-3);
  text-align: center;
}

.form-item {
  margin-bottom: var(--spacing-2);

  label {
    margin-bottom: 0.6rem;
    font-weight: var(--bold);
    display: block;
  }
  input {
    width: 100%;
    height: auto;
    margin-bottom: 0.6rem;
    padding: 1rem;
    background: none;
    border: 0.1rem solid var(--inverted-border-color);
    border-radius: 0.3rem;
    line-height: var(--line-height-3);
  }
}


.mktoFormRow:nth-last-of-type(5) {
  width: 100%;
}

#form-thank-you-message {
  text-align: center;
}
.form-thankyou {
  display: none;
}
.description {
  margin-bottom: var(--spacing-2);
}

@include mq-4 {
  .mktoFormRow,
  .mktoFormRow .fieldset {
    display: block;
  }
  .mktoFormRow .fieldset .mktoFormRow {
    min-height: 5.0rem;
    margin-bottom: 0.6rem;
    display: flex;
  }
  .embedded-form {
  
    .mktoFormCol {
      padding: 0;
    }
  }
}

// input#Has_Accepted_Privacy_Policy_Terms__c {
//   margin: 0.2rem 0 0 var(--spacing-1);
// }
.salesforce-row {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
}
.salesforce-row .salesforce-legal {
  order: 2;
}
.salesforce-row .salesforce-legal + input {
  position: relative;
  width: 13px;
  height: 13px;
  text-align: left;
  order: 1;
}

label.mktoLabel[for='Has_Accepted_Privacy_Policy_Terms__c'],
label.mktoLabel[for='acceptedEventTerms'],
.salesforce-row .salesforce-legal {
  max-width: calc(100% - 24px);
}
label.mktoLabel[for='Has_Accepted_Privacy_Policy_Terms__c'] + .mktoCheckboxList,
label.mktoLabel[for='acceptedEventTerms'] + .mktoCheckboxList,
.salesforce-row .salesforce-legal + input {
  width: 24px;
}

label.mktoLabel[for='Has_Accepted_Privacy_Policy_Terms__c'] a,
label.mktoLabel[for='acceptedEventTerms'] a,
.salesforce-row .salesforce-legal a {
  text-decoration: underline;
  color: inherit;
}

.overlay-content-wrapper .form-thankyou p {
  color: var(--text-color);
  padding: 0 var(--spacing-1);
}
// .embedded-form .form-thankyou p {
//   color: var(--inverted-text-color);
//   padding: 0 var(--spacing-2);
// }

#Comments__c {
  resize: none;
}

 

// THIS IS THE MINIMUM JS REQUIRED TO REMOVE MARKETO STYLING

function detectMobile() {
	if ( navigator.userAgent.match(/Android/i)
		|| navigator.userAgent.match(/webOS/i)
		|| navigator.userAgent.match(/iPhone/i)
		|| navigator.userAgent.match(/iPad/i)
		|| navigator.userAgent.match(/iPod/i)
		|| navigator.userAgent.match(/BlackBerry/i)
		|| navigator.userAgent.match(/Windows Phone/i)
	){
		return true;
	}
	else {
		return false;
	}
}
function removeMarketo() {	
	jQuery('.mktoForm style, .mktoOffset, .mktoClear, .mktoGutter, .mktoForm legend').remove();
	jQuery('*').removeClass('mktoHasWidth');
	jQuery('.mktoForm, .mktoForm *').removeAttr('style');
 }

jQuery(function ($){
	MktoForms2.whenReady(function () {
		// REMOVE MARKETO STYLING
		$('link[rel=stylesheet][href~="/js/forms2/css/forms2.css"]').remove();
		$('link[rel=stylesheet][href~="/js/forms2/css/forms2-theme-simple.css"]').remove();
		$('#mktoForms2BaseStyle, #mktoForms2ThemeStyle, .mktoForm style').remove();
		removeMarketo();
		
		$(document).on('change', function(e){  
			removeMarketo();
		});
	});
});

jQuery(window).on("load", function (e){
    jQuery(window).resize(function (){
    	removeMarketo();
    });
    if (detectMobile()) {
        window.addEventListener("orientationchange", function (){
        	removeMarketo();
        }, false);
	}
});

 

Design Files

Figma

Component Options

Component Options

There are no options for this component.

Component
Form
Copyright © 2024 GAMEWORK | Nicholas Game
How To
Upgrading to Drupal 10
Velocity for Marketo
jQuery: The Basics
Homebrew
Gulp
Making the Grade
Formatting SVG Logos for the Website
Marketo Landing Page Builder
Work with our submodules
Drush Launcher
Upgrade PHP and change PATH
Qualtrics
Bitbucket SSH Key
Git
VS code extensions
Guide
Profile Banner
Fitch Ratings - Analyst Listing Page
CSS Custom Properties (Variables)
Carousel - Waterwheel
Mix it Up
Brand Navigation
Top Bar
Fitch Ratings - Podcast
Fitch Ratings - Analyst Profile
Event
Long Read
Article
Code test
Search Demo
Profile - Sustainable Fitch
Search Icon
Login
Language Filter
Theme Switch
Flip Card
Overlay
Infographic CDS
Interactive Map
Iframe
Footer
Main
Header
Accordion
Wrappers
Podcasts
DOM Layout
Figure
Search Tools
Search Bar
Search Overlay
Ratings Process
Ratings Definitions
Language Switch
Video Teaser
Video Player
Video Banner
Profile Teaser
Event Teaser
Back to Top
Pager
Navigation - Dropdown
Navigation - Overlay
Profile - Leadership FR
Profile - Leadership FG V2
Leadership Overview - FG
Forms
Leveraged Finance
Tags
Profile - Leadership FG V1
Profile - Analyst
Banner V2
Promo Hightlight
Tables
History - Fitch Group
Insights
Event Teaser
Event Listing
Overview
Logos
Title
Video
Text
Tab Wrapper
Tab
Sub Title
Section More
Showcase
Section
Quote
Promo Box
Post
Page Teaser
Page Promo
Page Layout - Left or Right Column with Main Column
Number
Node Reference
Map
Key Point
Key Highlight
Image
Icon Teaser
Highlight
Grid Column Wrapper
Grid Column
From library
Figure
Column Wrapper
Column
Carousel Slide
Carousel
Card
Call to action
Box
Block Reference
Banner
Email Guide
View Online
Email Components
Fitch Group
Fitch Ratings
Fitch Solutions