Style field boxes

Hi David,

Normally the theme you are using would automatically style forms to match your website. However some themes might not include such styling. Would you be able to send me a link to the page with your form? I’ll see if I can send some quick CSS to help.

We’re also considering adding styling options to the plugin itself. If it looks like that will help with this issue, I’ll push that forward for the next release.

Thanks for the reply @pipdig. Here is a link to a page using your plugin -> https://members.vestright.com/help-desk-test/

Also, below is a link to a screenshot of my current Contact page, which was built using Gravity Forms. Notice that Gravity Forms inherits the font and font size from the theme. So the boxes are bigger and match our branding better.

https://drive.google.com/file/d/10yGWcpt3o_6llJyEli2IPo0hoTIViskA/view?usp=sharing

Thanks again!

It should certainly be possible to inherit the styles from Gravity Forms. Would you be able to send a link to the page shown in your screenshot? This will help me to inspect the classes used for that.

Hey thanks again @pipdig. Here’s a link to a gravity form page on my site:

https://members.vestright.com/test-gravity-form/

Hi @davidcom, apologies fort he delay!

The styling for the Gravity Form is set by that plugin rather than the theme you are using. This makes things more tricky to inherit the styles from it. So instead I’ll see if I can send some quick CSS to clean things up. If you copy the following into the Additional CSS tab it should more cloesly match the Gravity Form:

.zrf-form label, .zrf-form input[type="text"], .zrf-form input[type="password"], .zrf-form input[type="tel"], .zrf-form input[type="email"], .zrf-form input[type="file"], .zrf-form textarea, .zrf-form select {
  padding: 5px 0;
  font-size: inherit;
  font-family: inherit;
}
.zrf-form label {
  font-weight: 700;
}
#zrf_submit {
  font-family: inherit;
  font-size: 1em;
}

Thanks so much! That worked!