Custom code newsletter form

Hello everyone and have a nice day 🙂
I need help with a newsletter form.
First screenshot: this is how I need it to look like.
The second and third screens are what I have now (with a hover effect).
I need to remove this hover effect and replace it with an arrow, and also move the text in the inbox to the left edge. 
The site with the example form: https://cupofjo.com/
The code I took from the site: https://www.detraform.com/blog/free-squarespace-plugin-minimal-newsletter-block

My code:

/* Detraform's Minimal Newsletter Block*/

.newsletter-block {
  padding-top: 50!important;
  .newsletter-form-wrapper {
    background-color: transparent;
    padding: 0 !important;
    .newsletter-form-body {
      flex-direction: row;
      -webkit-box-align: left;
      -ms-flex-align: left;
      -ms-grid-row-align: left;
      align-items:  ;
      display: flex;
      padding-bottom: 0;
      border-bottom: 1px solid;
      border-color: #FDF7EC;
      .newsletter-form-fields-wrapper {
        width:  ~"calc(75% - 8px)";
        margin: 0px;
        .newsletter-form-field-wrapper {
          display: block;
          width: 100%;
          padding: 0px;
        }
        input {
          font-family: 'Arial';
          letter-spacing: 0;
          font-size: 14px;
          line-height: 1.4em;
          padding: 15px 20px;
          background-color: transparent;
          @media screen and (max-width: 640px) {
            padding: 15px 15px;
          }
          @media screen and (max-width: 420px) {
            padding: 17px 0 17px 12px;
          }
          display: block;
          border: none;
          &::placeholder{
            font-family: 'Arial';
            font-size: 14px;
            line-height: 1.4em;
            letter-spacing: 0;
            color: #FDF7EC !important; 
          }
        }
        @media screen and (max-width: 1350px) {
          width:  ~"calc(70% - 8px)";
        }
        @media screen and (max-width: 1200px) {
          width:  ~"calc(64%)";
        }
        @media screen and (max-width: 1024px) {
          width:  ~"calc(75%)";
        }
      }
      .newsletter-form-button-wrapper {
        width: 24%;
        height: 100%;
        margin: 0px;
        padding: 0;
        margin-top: 0px;
        vertical-align: middle;
        button {
          background-color: transparent !important;
          border: none !important;
          vertical-align: top;
          box-shadow: none !important;
          padding: 17px;
          width: 100%;
          font-family: 'Arial';
          font-size: 0.9em;
          line-height: 1.5em;
          letter-spacing: 0;
          text-align: right !important;
          span {
            text-align: right !important;
            text-transform: none;
            color: #FDF7EC !important;
            font-weight: 400;
            &:hover {
              opacity: .7;
            }
          }
          @media screen and (max-width: 1024px) {
            text-align: right;
            padding-left: 0;
            padding-right: 10px;
          }
          @media screen and (max-width: 640px) {
            text-align: right;
            padding-left: 0;
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1350px) {
          text-align: right;
          padding: 0 30px;
          width: 32%;
          .newsletter-form-button {
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1024px) {
          text-align: right;
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 0;
          padding-right: 15px;
        }
        @media screen and (max-width: 640px) {
          padding-right: 12px;
        }
      }
      @media screen and (max-width: 1200px) {
        text-align: right;
        width: 100%;
      }
    }
    .newsletter-form-footnote {
      text-align: left;
      letter-spacing: .0em;
    }
  }
  .newsletter-form-footnote {
    margin-top: 16px;
    p {
      font-family: 'Arial' !important;
      line-height: 1.25em;
      opacity: 1;
      strong {
        font-weight: 400;
        color: #FDF7EC !important;
      }
    }
  } 
}

Try adding this and tweaking as needed! 

.newsletter-form-button-label {
  visibility: hidden;
}
.newsletter-form-button-icon {
  position: relative;
  top: 4px;
  left: 35px;
  &:after {
    content:'→';
  }
}

You can replace the content inside the apostrophes with whatever text you like and maybe even set a background image to use a custom icon.