I added a Formspree contact form to a page, and the default looks wrecked.
I’m using the Edge theme, and it seems like Formspree inherits my theme’s CSS.
My question is: where in my theme do I edit the CSS so that I can alter my contact form? Also, do you use Formspree, or are there other integrations you like?
This is what it looks like right now. Examples of what I’d like to change include getting rid of the border and widening the message textbox.
Was gonna say that you should use Formspree’s #fs-frm IDs in order to change the form’s internal styling (as I’ve done), until I realized, as you inferred, that it’s an Edge issue. If you have one it’d probably be best if you supplied a link, supposing you can.
@Stromfeldt, are you saying that you changed <form id="fs-frm"> to change the styling?
By supplying a link, do you mean one to the form? The form I’m using is a Simple Contact Form from Formspree’s Library:
<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/xxxxxxxxxx" 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>
<p><textarea rows="5" name="message" id="message" placeholder="Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec ullamcorper nulla non metus auctor fringilla nullam quis risus." required=""></textarea></p>
<input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
</fieldset>
<input type="submit" value="Submit">
</form>
The styling of the form itself, yes. That is, if you wanted to change the styling of the text, the boxes (including the colours of all those), etc.
But it seems that the problems you’re having are due to Edge styling that is imposing something upon the form. The easiest way to figure out what’s causing the issues would be to use a browser’s dev tools, hence me asking if you have a live page to look at. (You could also manually go through all of Edge’s coding to deduce what the problem is, but nobody’s going to want to do that.)
Hi Cole here, cofounder of Formspree.
Cool website! It’s coming along nicely.
I don’t know much about Edge theme, but it looks like there’s a form.css file with just one css rule for inputs. If you can find that file in the theme you can update it to style your form, including the textarea and filedset tags. By default, browsers have their own styles for these tags, and that’s what you’re seeing now (the 2px border for fieldset, and the chrome around textarea).
Probably the quickest fix is to expand that css rule by adding the textarea selector like this:
input[type="text"],
input[type="password"],
input[type="email"],
textarea { // <---- added
// ...
}
That will get you close, but you might not want textareas to be the same height as your inputs. You can actually remove the height property altogether, and instead use vertical padding to make both inputs and textareas bigger. For example:
padding: 10px 15px;
Then drop the border on fieldset by adding another rule:
fieldset {
border: none;
padding: 0;
}
Finally to improve that button I suggest also adding the button to the input rule, with another selector:
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"], // <---- added
textarea {
// ...
}
And I’m a fan of the pointer cursor style for buttons, which you can achieve with another rule that just targets submit inputs:
input[type="submit"] {
cursor: pointer
}
One more thing: I dropped the outline: none rule to improve accessibility.
Final form.css file looks like this:
input[type=email],
input[type=password],
input[type=text],
input[type=submit],
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid var(--mid-gray-color);
border-radius: 5px;
font-size: 16px;
padding: 10px 15px;
width: 100%;
}
input[type="submit"] {
cursor: pointer
}
fieldset {
border: none;
padding: 0;
}
Here’s what the form looks like now:
There’s room for more improvement, but hopefully this points you in the right direction. I hope I didn’t get too far into the weeds. Good luck!
EDIT: I should have mentioned, you can also copy/paste the formspree form styles which come with the examples on Form Library | Formspree. But I thought it might just be easier to edit the forms.css file that’s already in the theme. The default formspree stylesheet is exported when you click the “copy” or “download” buttons, in a style tag after the HTML code.
Thank you so much for all your help, @colevscode. I really appreciate it!
Right now I have form.css set to the following, but there have been no changes to the actual contact form.
@colevscode Longtime Formspree customer here! Thanks for creating such a useful and awesome product, that I can recommend to people frequently. And great to see you here on the Ghost forum!
If Formspree and Ghost had a baby, it would grow up to be so useful and awesome.
Hm, I suspect it’s a matter of getting your css changes deployed to wherever you’re viewing the form.
If you inspect the form in your browser (using developer tools) and look at the button’s css, is it picking up the new styles?
We might need some help from ghost experts to debug this. 
@colevscode Honestly, it’s probably something I did - I’m still pretty new to all this!
@DonaldH Thanks, I will check it out!
