[Support request] How to customize form and button

Home Forums Support [Support request] How to customize form and button

Home Forums Support How to customize form and button

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1642567
    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

    #1643019
    David
    Staff
    Customer Support

    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.

    #1643071
    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% ๐Ÿ˜€

    #1643153
    David
    Staff
    Customer Support

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

    #1643191
    David
    Staff
    Customer Support

    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.

    #1643321
    Anonymous

    OK. I understand!

    Thanks once again.

    #1643425
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.