/    Sign up×
Community /Pin to ProfileBookmark

How to style this form?

Copy linkTweet thisAlerts:
Aug 23.2022

Hello, this is my first post here.

I’m a game developer and I’m adding a contact page to my website myself. I’m using a contact form from FormSubmit.co but when I paste the code in my html document it’s all very small and it looks very basic. I want it to look like the demo form on the FormSubmit website. Sorry I can’t put pictures here. I think I need some containers or formatting or css styling… I’m very noob at this, can anyone help me please?

to post a comment
Full-stack DeveloperHTML

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertAug 23.2022 — > @Businek#1646415 Sorry I can't put pictures here

You can do this by upload to https://postimages.org and post a "forum link"

[url=https://postimg.cc/yJDSSfhV][img]https://i.postimg.cc/YS3NZZhm/postimage.png[/img][/url]
Copy linkTweet thisAlerts:
@BusinekauthorAug 23.2022 — @sibert#1646416 Oh thank you! So simple, I didn't know this existed :)
Copy linkTweet thisAlerts:
@BusinekauthorAug 23.2022 — So this is my html document with pasted code [url=https://postimg.cc/JDmYTgfz][img]https://i.postimg.cc/JDmYTgfz/Screenshot-2022-08-23-11-16-14.png[/img][/url]

and this is the form demo on FormSubmit.co where I took the code. [url=https://postimg.cc/0MfWhnvd][img]https://i.postimg.cc/0MfWhnvd/Screenshot-2022-08-23-11-16-43.png[/img][/url]

Can someone direct me the right way to make it look better, please?
Copy linkTweet thisAlerts:
@SempervivumAug 23.2022 — You are right, you need some styling by CSS. Try this:
``<i>
</i> form {
margin: 0.5rem 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 1rem;
column-gap: 0.5em;
}

form textarea,
button[type="submit"] {
grid-column: 1/3;
}

form input,
form button,
form textarea {
min-width: 0;
font-size: 1.5rem;
padding: 0.2rem;
border: 1px solid lightgray;
border-radius: 4px;
}

form textarea {
height: 5rem;
}

form button {
background-color: #555;
color: white;
}<i>
</i>``
Copy linkTweet thisAlerts:
@BusinekauthorAug 23.2022 — @Sempervivum#1646421 Hey thanks a lot! I will play with it and see what I can do :) Thanks!
Copy linkTweet thisAlerts:
@BusinekauthorAug 23.2022 — @Sempervivum#1646421 So I fiddled with the code you wrote here and it's awesome, it's magic what the css can do. Just one issue I have, I can't make all the elements fit in a central column like so [url=https://postimg.cc/RWYnfsYW][img]https://i.postimg.cc/RWYnfsYW/Screenshot-2022-08-23-19-20-37.png[/img][/url]

I searched the web, html guides and other stuff but I'm not sure if it's the html or the css that makes it appear that way. Can you help me yet again, please?
Copy linkTweet thisAlerts:
@SempervivumAug 23.2022 — @Businek#1646450

Does that screenshot show the layout as it is currently or as you wish it should look like?

When I view my test file the layout looks exactly as the FormSubmit Demo you posted initially.
Copy linkTweet thisAlerts:
@BusinekauthorAug 23.2022 — @Sempervivum#1646451 Hey, sorry, I don't even know how I got this but I managed to do what I wanted :D Right after posting the last call for help I solved it and quickly deleted the post.

Now my contact page looks like this [url=https://postimg.cc/t7b2vkq1][img]https://i.postimg.cc/t7b2vkq1/Screenshot-2022-08-23-20-03-52.png[/img][/url]

Now I just need to tweak the text and details. But can you tell me, what's the variable name for changing the text box outline color when active/highlighted? I tried border-active and border-highlighted and doesn't work.
Copy linkTweet thisAlerts:
@SempervivumAug 23.2022 — The outline is visible only when when the element is focused. You can change it's color by `outline-color</C>:<br/>
<URL url="https://developer.mozilla.org/de/docs/Web/CSS/outline-color">https://developer.mozilla.org/de/docs/Web/CSS/outline-color</URL><br/>
Alternatively you can make the outline invisible and style the border instead by use of the pseudo class <C>:focus</C>:
<CODE>`<i>
</i> form textarea {
height: 5rem;
outline: none;
}

form textarea:focus {
border-color: blue;
}<i>
</i>``
Copy linkTweet thisAlerts:
@BusinekauthorAug 23.2022 — @Sempervivum#1646453 Thanks a lot! Everything works, I really appreciate your help :) And I had fun doing it :D
Copy linkTweet thisAlerts:
@SempervivumAug 23.2022 — That's fine, helping out was a pleasure for me.
×

Success!

Help @Businek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...