Archived topic
How to customize form and button
7 replies · Started by Former User on February 2, 2021
Hello,
I have added a button -"DOWNLOAD NOW" but I have to add a form which sents data with POST method. I understand every comment and I replaced all needed things and ID'S.
The question is:
1. how to make the button from this form below look like a button on my home page. The red button, rounded corners etc
2. and below input form.
What I have to "learn" to make that changes on my own - CSS?
I have code:
` <form action="https://automater.pl/rest/form-transaction" method="POST">
<!-- Set the language of transaction to en (English) -->
<input type="hidden" name="language" value="en">
<!-- Activating sending message to Client with order status -->
<input type="hidden" name="send_status_email" value="y">
<!-- Set ID of payment gateway account -->
<input type="hidden" name="connector_id" value="13421">
<!-- Adding one product with ID: 452 -->
<input type="hidden" name="products[0][id]" value="452">
<input type="hidden" name="products[0][quantity]" value="1">
<!-- Add two products with ID: 7764 -->
<input type="hidden" name="products[1][id]" value="7764">
<input type="hidden" name="products[1][quantity]" value="2">
<!-- Show field for enter e-mail address -->
<input type="email" name="email" required="required">
<!-- Set address to redirect after payment -->
<input type="hidden" name="return_url" value="http://sklep.pl/success.html">
<!-- Show submit button -->
<input type="submit" value="Submit">
</form>
Best,
Arek
Hi there,
1. try this CSS:
form input[type="submit"] {
background-color: #cf2e2e;
color: #fff;
padding: 15px 20px;
border-radius: 7px;
border-width: 1px;
border-style: solid;
border-color: #fff;
}
form input[type="submit"]:hover {
background-color: #cf2e2e;
color: #fff;
border-color: #cf2e2e;
}2. Best way to learn CSS is to get used to using the Developers Tools, Inspect elements, check their styles, play with it.... this is a good starter guide on that:
https://developers.google.com/web/tools/chrome-devtools/css
Ultimately it takes a lot of practice, and any property you don't understand you can get info on them from MDN Mozilla and W3C Schools.
Thank You, David!
It works, with the first question.
And the second one is:
1. how I can move the button below the input form?
EDIT: I resolved this: I added < br/> after input form - is correct method?
Currently, it's like this:
[input] [button submit]
I want to achieve something like this:
[input] - centered
[button submit]
2. How to set "Fill horizontally space" of button
edit: I resolved this: width:100% :D
Edit your forms HTML so we can include a class, eg. automater-form - the HTML will look like this:
<form class="automater-form" action="https://automater.pl/rest/form-transaction" method="POST">
Then some CSS:
form.automater-form {
display: flex;
flex-wrap: wrap;
}
form.automater-form input[type="email"],
form.automater-form input[type="submit"] {
flex: 1 0 100%;
text-align: center; /* Optional to center input text */
}Damn! Thank You very much!
Now I read all about classes and other stuff to understand whats happened here ;)
Using with button width:100% - it's not correct? To fill horizotally
Yep width: 100%; will do the same job. But as i was using Flex Box on the form i kept with the flex shorthand for sizing the elements.
OK. I understand!
Thanks once again.
You're welcome
