Improved support for input and textarea

Hi there! I really enjoy the Sumo theme but could use some help with styling input and textarea and hopefully these fixes could be applied at the theme so others can benefit. (I'm also not sure how to "override CSS" in a Micro.blog theme.)

In my case I wanted to add a "contact" form in a page on micro.blog. Here's the outputted site: haglund.micro.blog/contact and a screenshot:

Issues:

on-hover for email field is the "hand" instead of the I-beam
name field has no styling applied
comment field has no styling applied

I'm using formkeep as the API for receiving the data and emailing me (in a foolish attempt to keep my email address more private).

Here's the HTML I put into Micro.blog's page editor for context:

<p>Get in touch by completing the form below.</p>

<form action="https://formkeep.com/f/74c6cdc3fe47"
 accept-charset="UTF-8"
 enctype="multipart/form-data"
 method="POST"
 target="_blank">

<input type="hidden" name="utf8" value="✓">
<!-- Email field -->
  <label for="email-address">Email Address</label>
  <input type="email" id="email-address" name="email">

<!-- Name field -->
  <label for="name">Name</label>
  <input type="name" id="name" name="name" required>

<!-- Comment field -->
  <label for="comment">Comment</label>
  <textarea name="comment" id="comment" rows="8" required></textarea>

<button type="submit">Submit</button>
</form>

Happy to help dabble with this. I did a little CSS work getting my current Eleventy site working but I'm new to Hugo themes.

I will add a little more basic form styling in the next update, thanks for suggesting.

For now, I suggest adding some CSS classes to your form and using that to style things directly.

For example:

HTML:

CSS: .my_contact_form input[name="name"] { padding: XXxx; }

On Nov 19, 2024, at 9:30 PM, AndrewHaglund @.***> wrote:

Hi there! I really enjoy the Sumo theme but could use some help with styling input and textarea and hopefully these fixes could be applied at the theme so others can benefit. (I'm also not sure how to "override CSS" in a Micro.blog theme.)

In my case I wanted to add a "contact" form in a page on micro.blog. Here's the outputted site: haglund.micro.blog/contact https://haglund.micro.blog/contact/ and a screenshot:

image.png (view on web) https://github.com/user-attachments/assets/fd68bef9-6a28-43f8-aa92-a5e9fe81a6ac Issues: image.png (view on web) https://github.com/user-attachments/assets/a6bb71e9-96c0-48a0-8188-2ad54eb3ee88 on-hover for email field is the "hand" instead of the I-beam name field has no styling applied comment field has no styling applied I'm using formkeep https://formkeep.com/ as the API for receiving the data and emailing me (in a foolish attempt to keep my email address more private).

Here's the HTML I put into Micro.blog's page editor for context:

Get in touch by completing the form below.

<form action="https://formkeep.com/f/74c6cdc3fe47" accept-charset="UTF-8" enctype="multipart/form-data" method="POST" target="_blank">
Email Address Name Comment
Happy to help dabble with this. I did a little CSS work getting my current Eleventy site https://haglund.app/contact/ working but I'm new to Hugo themes.

— Reply to this email directly, view it on GitHub https://github.com/MattSLangford/Sumo-Theme/issues/2, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKHCHFEEXLF7XIJGDN5IQST2BP66ZAVCNFSM6AAAAABSDSOPXCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGY3TIMRSGEZDMNY. You are receiving this because you are subscribed to this thread.

MattSLangford / Sumo-Theme

Improved support for input and textarea #2