Field customization in Form Builder

Hey there @Helga and @Max! Could you also share more specific targets for font? for instance I want a different font and sizing for individual label blocks then the ones that are attached to other items. Here is a reference of what I am hoping to achieve…

Hello @Quilla

.es-field-layout-label:not(
  [class*="FieldsGrid__Row-sc"]:nth-child(4) .es-field-layout-label,
  [class*="FieldsGrid__Row-sc"]:nth-child(6) .es-field-layout-label,
  [class*="FieldsGrid__Row-sc"]:nth-child(8) .es-field-layout-label
),
[class*="Heading__HeadingControl-sc"] {
  font-family: antique press;
}

Just keep in mind that changing the order of the fields will affect the CSS. If you rearrange them, you’ll need to update the field numbers (4, 6, 8, etc.) in the code accordingly.

Give it a try and let me know if it helped :wink:

Hey Max!!! yes this is amazing!! I just have a couple more tweaks I was hoping you might be able to help with!

Thank you so much for sharing the screenshots!

I’ve passed your request on to the devs and will let you know once the solution is ready :slightly_smiling_face:

We’ve saved this CSS configuration in your widget, but haven’t published changes:

.es-fields-heading-control,
[class*="Heading__HeadingControl-sc"],
.es-field-layout-label {
  font-family: "antique press", serif !important;
}
.es-field-layout-label {
  font-size: 22px !important;
  line-height: 1.3 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(4) .es-field-layout-label,
[class*="FieldsGrid__Row-sc"]:nth-child(6) .es-field-layout-label,
[class*="FieldsGrid__Row-sc"]:nth-child(8) .es-field-layout-label {
  font-size: 13px !important;
  line-height: 1.3 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(9) .es-field-layout-label {
  font-family: hudson, "Hudson", serif !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}
.es-fields-choice-options-container,
.es-fields-choice-options-container .es-choice-option-label,
.es-fields-choice-options-container .es-choice-option-item-label,
.es-fields-choice-options-container [class*="choice-option__Label-sc"],
.es-fields-choice-options-container [class*="choice-option__ItemLabel-sc"] {
  font-size: 13px !important;
  line-height: 1.3 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(1) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(2) {
  margin-top: -20px !important;
  padding-top: 0 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(11) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(12) {
  margin-top: -18px !important;
  padding-top: 0 !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(20) {
  margin-bottom: 8px !important;
}
[class*="FieldsGrid__Row-sc"]:nth-child(21) {
  margin-top: 48px !important;
}

If you like the result, click on the Publish button in the configurator and the changes will be reflected on your website :slightly_smiling_face:

Yes thank you!!! The only question I have is that the little labels like “first name” and “last name” are supposed to be Hudson. Is there a way of changing that? As well as fixing this gap and moving yours sincerely, to meet A Hopeful Future Client?

Thank you again for everything Max! You guys are always the best and so quick to respond!

Just to clarify, here are the field labels where you’d like to use the Hudson font: First Name, Last Name, Phone Number, Email Address, Days of the Week, Time of the Day.

Is everything correct?