Skip to main content

Notifications

Announcements

🌸 Community Spring Festival 2025 Challenge & Updates🌸
News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / How can we change the ...
Customer experience | Sales, Customer Insights,...
Suggested answer

How can we change the colour of the 'Submit' button

(0) ShareShare
ReportReport
Posted on by GraceC

I am trying to change the colour of the 'Submit' button (not other buttons which can be easily changed). It appears that we need to do it from HTML. Can anyone help/advise how i can do it or what i need to change as i don't have any coding experience. 

  • Dsouza_28 Profile Picture
    Dsouza_28 7 on at
    RE: How can we change the colour of the 'Submit' button

    Hi GraceC ,

    that's good to know.

    Yes it depends on the chosen templates, the HTML changes.

    *please mark verified for the answer that helped solve the issue.

  • Suggested answer
    GraceC Profile Picture
    GraceC on at
    RE: How can we change the colour of the 'Submit' button

    Hi thanks, this worked though in other forms i need to add the other lines of code.

  • Suggested answer
    Dsouza_28 Profile Picture
    Dsouza_28 7 on at
    RE: How can we change the colour of the 'Submit' button

    Hi GraceC ,

    okay, please follow the steps:

    Navigate within the HTML of the form and find Button array. 

    Then add a line : background-color: #xxxxx (the color code you need) 

    see below:

    pastedimage1653062312629v1.png

    The result in the Designer now should look like this:

    pastedimage1653062356711v2.png

  • GraceC Profile Picture
    GraceC on at
    RE: How can we change the colour of the 'Submit' button

    pastedimage1653058264620v1.png

  • Dsouza_28 Profile Picture
    Dsouza_28 7 on at
    RE: How can we change the colour of the 'Submit' button

    Hi GraceC,

    can you please share a screenshot of the Form?

  • GraceC Profile Picture
    GraceC on at
    RE: How can we change the colour of the 'Submit' button

    Hi Roy, there's no background-color for the Submit button... only border that I could change but i need to change the entire background colour . See below html:

    <form data-template-id="c8453286-d610-4f84-9b28-ed82da4cf8e1" class="one-column-form" data-container="true">

    <style>

     div[data-editorblocktype=Field-radioButtons] {

      width:25%;

     }

     div[data-editorblocktype=Field-radioButtons] input {

      width: auto;

      height: auto;

      margin-bottom: 3px;

      float: right;

     }

     div[data-editorblocktype=Field-checkboxList] input,

     div[data-editorblocktype=Field-checkbox] input  {

      width: auto;

      height: auto;

      margin-bottom: 3px;

      margin-right: 8px;

      float: left;

     }

     div[data-editorblocktype=Field-checkboxList] span.lp-checkboxListItem,

     div[data-editorblocktype=Field-radioButtons] span.lp-radioButton {

      /* This rule is needed to style all radio button fields. For product constraints each option is defined as input and label wrapped into a span*/

      display: block;

      margin: 2px;

     }

     form {

      padding: 22px;

      margin: 0 auto;

     }

     .one-column-form {

      max-width: 450px;

     }

     .lp-form-header {

      font-weight: bold;

      margin-bottom: 21px;

     }

     label {

      margin: 0;

     }

     input {

      border-radius: 3px;

      border: 1px solid #333333;

      height: 40px;

      width: 100%;

      margin-bottom: 28px;

      text-indent: 10px;

     }

     input[type="radio"] {

      width: 1.5em;

      height: 1.5em;

      display: inline-block;

      margin: 0 5px 0 0;

     }

     input[type=checkbox] {

      width: 1.5em;

      height: 1.5em;

      display: inline-block;

      margin: 0 5px 0 0;

      vertical-align: middle;

     }

     select {

      border-radius: 3px;

      border: 1px solid #333333;

      height: 40px;

      width: 100%;

      margin-bottom: 28px;

     }

     textarea {

      border-radius: 3px;

      border: 1px solid #333333;

      width: 100%;

      margin-bottom: 28px;

      height: 120px;

      overflow: auto;

     }

     button {

      border-radius: 3px;

      border: 1px solid #fa7c1e;

      width: 100%;

      overflow: hidden;

      text-overflow: ellipsis;

      height: 60px;

      vertical-align: bottom;

      margin-top: 12px;

      font-weight: bold;

      text-transform: uppercase;

     }

    </style>

    <div class="wrapperContainer" data-container="true">

     <div data-editorblocktype="Text">

      <p class="lp-form-header">

       [Form heading]

      </p>

     </div>

     <div data-editorblocktype="Field-text">

      <div class="marketing-field">

    <div class="lp-form-field">

     <label class="lp-label lp-ellipsis" for="3f746946-34b4-442c-a677-e232cdd2bc40" title="">

         First Name

     </label>

     <input class="lp-form-fieldInput" id="3f746946-34b4-442c-a677-e232cdd2bc40" name="3f746946-34b4-442c-a677-e232cdd2bc40" placeholder="First" title="" type="text" value="">

    </div>

      </div>

     </div>

     <div data-editorblocktype="Field-text">

      <div class="marketing-field">

    <div class="lp-form-field">

     <label class="lp-label lp-ellipsis" for="e1dfc514-f301-4cb2-855a-4c8fa8331207" title="">

         Last Name

     </label>

     <input class="lp-form-fieldInput" id="e1dfc514-f301-4cb2-855a-4c8fa8331207" name="e1dfc514-f301-4cb2-855a-4c8fa8331207" placeholder="Last" title="" type="text" value="">

    </div>

      </div>

     </div>

     <div data-editorblocktype="Field-email">

      <div class="marketing-field">

    <div class="lp-form-field">

     <label class="lp-label lp-ellipsis" for="7f685ebb-7c54-4cff-a1bc-772562d25c38" title="">

         Email

     </label>

     <span class="lp-required" style="color: rgb(255, 0, 0);">

         *

     </span>

     <input arai-required="true" class="lp-form-fieldInput" id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" placeholder="Email" required="required" title="" type="email" value="">

    </div>

      </div>

     </div>

    </div>

    <div class="wrapperContainer" data-container="true">

     <div data-editorblocktype="SubmitButtonBlock">

      <div class="lp-form-field">

    <button class="lp-form-button lp-form-fieldInput" name="submit2a115e8b-ee65-4c7c-bdc0-87a08982bd7e" type="submit">

        Submit

    </button>

      </div>

     </div>

    </div>

    </form>

  • Suggested answer
    Dsouza_28 Profile Picture
    Dsouza_28 7 on at
    RE: How can we change the colour of the 'Submit' button

    Hi GraceC ,

    No worries, no coding is required for this task  

    When you are on the marketing form, switch to the HTML tab and search for:

    form button [type="submit"] - this will usually be in the first half of the HTML code

    please see the screenshot:

    pastedimage1652973252211v1.png
    In the background color input the required HEX color code or the RGB code. 
    Let me know if it works, by accepting this as a verified answer. 
    Thanks. 
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

🌸 Community Spring Festival 2025 Challenge & Updates🌸

Quick Links

🌸 Community Spring Festival 2025 Challenge 🌸

WIN Power Platform Community Conference 2025 tickets!

Jonas ”Jones” Melgaard – Community Spotlight

We are honored to recognize Jonas "Jones" Melgaard as our April 2025…

Kudos to the March Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 294,069 Super User 2025 Season 1

#2
Martin Dráb Profile Picture

Martin Dráb 232,858 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,158 Moderator

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans