[Support request] How to customize form and button

[Anonymous]

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&#8221; 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”&gt;
<!– Show submit button –>
<input type=”submit” value=”Submit”>
</form>

Best,
Arek

[David]

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.

[Anonymous]

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% 😀

[David]

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 */
}

[Anonymous]

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

[David]

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.

[Anonymous]

OK. I understand!

Thanks once again.

[David]

You’re welcome

[Author]

Posts