How can I do to add a button to a form used to start process?

 
1
0
-1

Hi community.

 I´m needing add a button at the foot of a Form.  I´m using an HTML field to show the button but the button must be aligned with the submit field. Please see the example below.

I´m open to hearing suggestions


And this is the Code


<div id="footer" style="text-align: right;">
  <button type="button" name="button" id="cancelButton">Cancelar</button>
</div>

<script type="text/javascript">

    $('#cancelButton').click(function(){
        
    history.go(-1);
    
});
</script>

<style>
  button {
    color: #ffffff;
    background-color: #5789e5;
    font-size: 14px;
    border: 1px solid #2d63c8;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
  }
  button:hover {
    color: #2d63c8;
    background-color: #ffffff;
  }
</style>

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      Hey there,

      To align the button with the submit field, you can wrap both the submit field and the button in a container and adjust the styles accordingly. Here's the modified code:

      However, this custom HTML must not be put in the Form Builder, Add the Custom HTML in the UI builder.


      <div id="footer" style="text-align: right;">
  <div class="button-container">
    <input type="submit" value="Submit">
    <button type="button" name="button" id="cancelButton">Cancelar</button>
  </div>
</div>

<script type="text/javascript">
  $('#cancelButton').click(function(){
    history.go(-1);
  });
</script>

<style>
  .button-container {
    display: flex;
    align-items: center;
  }
  input[type="submit"] {
    color: #ffffff;
    background-color: #5789e5;
    font-size: 14px;
    border: 1px solid #2d63c8;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
    margin-right: 10px; /* Adjust margin as needed */
  }
  input[type="submit"]:hover {
    color: #2d63c8;
    background-color: #ffffff;
  }
  button {
    color: #ffffff;
    background-color: #5789e5;
    font-size: 14px;
    border: 1px solid #2d63c8;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
  }
  button:hover {
    color: #2d63c8;
    background-color: #ffffff;
  }
</style>

      This code places both the submit field and the button inside a container with the class "button-container", which is styled with flexbox to align its items vertically. Adjust the margin-right property of the submit button to control the spacing between the submit field and the button.

      You can adjust the code accordingly 

      hope it helps!

      1. Fabian Barrera

        Hi Ginger, thanks for the answer. 

        Unfortunately I need do this change in a form that is loaded 
        from a Run Process menu and I don´t see an option to add UI parameters in the 
        UI Builder for this menu, do you know another way to achive it?


      CommentAdd your comment...