Missing CSS styles for form fields

[matthiasguentert]

I have been using the ghost theme liebling for a while together with a contact from provided by formspree.io. This is what the form looks like. I have created a new page, added a new HTML section and pasted the code bellow.

<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/my_address@domain.tld" method="post">
  <fieldset id="fs-frm-inputs">
    <label for="full-name">Full Name</label>
    <input type="text" name="name" id="full-name" placeholder="First and Last" required="">
    <label for="email-address">Email Address</label>
    <input type="email" name="_replyto" id="email-address" placeholder="email@domain.tld" required="">
    <label for="message">Message</label>
    <textarea rows="5" name="message" id="message" placeholder="Your message" required=""></textarea>
    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
  </fieldset>
  <input type="submit" value="Submit">
</form>

This is what it looks like when using the liebling theme

And this is what it looks like when using the attila theme

As you can see there must be something wrong with the way styles get applied. Any help on this would be greatly appreciated!

[zutrinken]

The format for form fields is missing so far. I'll rename the issue to work on that.

[matthiasguentert]

Thanks for your quick reply. I think I found the issue in the meantime. The thing is that formspree provides some inline styles that I missed to copy... sorry for the noise...

This is what the form should look like

<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/my_address@domain.tld" method="post">
  <fieldset id="fs-frm-inputs">
    <label for="full-name">Full Name</label>
    <input type="text" name="name" id="full-name" placeholder="First and Last" required="">
    <label for="email-address">Email Address</label>
    <input type="email" name="_replyto" id="email-address" placeholder="email@domain.tld" required="">
    <label for="message">Message</label>
    <textarea rows="5" name="message" id="message" placeholder="Your message" required=""></textarea>
    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
  </fieldset>
  <input type="submit" value="Submit">
</form><style>/* reset */
#fs-frm input,
#fs-frm select,
#fs-frm textarea,
#fs-frm fieldset,
#fs-frm optgroup,
#fs-frm label,
#fs-frm #card-element:disabled {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
  border: none;
  border-radius: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#fs-frm label,
#fs-frm legend,
#fs-frm ::placeholder {
  font-size: .825rem;
  margin-bottom: .5rem;
  padding-top: .2rem;
  display: flex;
  align-items: baseline;
}

/* border, padding, margin, width */
#fs-frm input,
#fs-frm select,
#fs-frm textarea,
#fs-frm #card-element {
  border: 1px solid rgba(0,0,0,0.2);
  background-color: rgba(255,255,255,0.9);
  padding: .75em 1rem;
  margin-bottom: 1.5rem;
}
#fs-frm input:focus,
#fs-frm select:focus,
#fs-frm textarea:focus {
  background-color: white;
  outline-style: solid;
  outline-width: thin;
  outline-color: gray;
  outline-offset: -1px;
}
#fs-frm [type="text"],
#fs-frm [type="email"] {
  width: 100%;
}
#fs-frm [type="button"],
#fs-frm [type="submit"],
#fs-frm [type="reset"] {
  width: auto;
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
#fs-frm [type="button"]:focus,
#fs-frm [type="submit"]:focus,
#fs-frm [type="reset"]:focus {
  outline: none;
}
#fs-frm [type="submit"],
#fs-frm [type="reset"] {
  margin-bottom: 0;
}
#fs-frm select {
  text-transform: none;
}

#fs-frm [type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  display: inline-block;
  width: auto;
  margin: 0 .5em 0 0 !important;
}

#fs-frm [type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/* address, locale */
#fs-frm fieldset.locale input[name="city"],
#fs-frm fieldset.locale select[name="state"],
#fs-frm fieldset.locale input[name="postal-code"] {
  display: inline;
}
#fs-frm fieldset.locale input[name="city"] {
  width: 52%;
}
#fs-frm fieldset.locale select[name="state"],
#fs-frm fieldset.locale input[name="postal-code"] {
  width: 20%;
}
#fs-frm fieldset.locale input[name="city"],
#fs-frm fieldset.locale select[name="state"] {
  margin-right: 3%;
}
</style>

[zutrinken]

That's a quick fix. But in general these default definitions should be part of the theme as well. So thanks for raising the issue. Glad you make it work in-between.

[matthiasguentert]

It turned out the workaround is not really one. The font-size is so tiny it hardly can't be read. I would be glad if you could look into this. Attila is an awesome theme.

[zutrinken]

@sp4rc there are some basic form styles on master. Feedback appreciated. You have to adjust the html a bit and wrap every label + field into a paragraph. It should look like this:

<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/my_address@domain.tld" method="post">
  <fieldset id="fs-frm-inputs">
      <p>
        <label for="full-name">Full Name</label>
        <input type="text" name="name" id="full-name" placeholder="First and Last" required="">
      </p>
      <p>
        <label for="email-address">Email Address</label>
        <input type="email" name="_replyto" id="email-address" placeholder="email@domain.tld" required="">
      </p>
      <p>
        <label for="message">Message</label>
        <textarea rows="5" name="message" id="message" placeholder="Your message" required=""></textarea>
      </p>
      <p>
        <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
      </p>
  </fieldset>
  <input type="submit" value="Submit">
</form>

[matthiasguentert]

Nice! Things look good now! Thank you 🙏

One more minor thing. It seems the version stayed on 2.2.0 which is confusing as it makes an old 2.2.0 and a new 2.2.0 :-)

[zutrinken]

Release isn't ready yet, that's why it's still 2.2.0 on master :-)