Change form field shape to rounded / pill on promotional pop-up?

Site URL: https://psygaia.org

Hi, I'm looking for CSS to make the promotional pop up form fields rounded, including the SIGN UP button.

Thank you!

Hi @yogacid, try this code and let me know how it goes. Also, play with the PX values:

.sqs-popup-overlay .sqs-slide-layer-content {

  border-radius : 25px;
  
  }

.sqs-popup-overlay .sqs-popup-overlay-close {

  border-top-right-radius : 25px;
  
  }

.sqs-slide-wrapper[ data-slide-type = "popup-overlay"] button 

{ border-radius: 10px;
  
}

16 hours ago, Spark-Plugin said:

Hi @yogacid, try this code and let me know how it goes. Also, play with the PX values:

.sqs-popup-overlay .sqs-slide-layer-content {

  border-radius : 25px;
  
  }

.sqs-popup-overlay .sqs-popup-overlay-close {

  border-top-right-radius : 25px;
  
  }

.sqs-slide-wrapper[ data-slide-type = "popup-overlay"] button 

{ border-radius: 10px;
  
}

 

Hi, thanks, this worked, except for the email form! Can we round the email field into a pill too?

8 hours ago, Spark-Plugin said:

Hi @yogacid, sure we can, there you go:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions:not(.stacked) .form-item input[type="text"] {
    border-radius: 10px !important;
}

Let me know if it works for you:)

That works, thanks! However, the email field is still square on mobile. Is that changeable too?

@yogacid, Yes it is, here is the full updated code:

   .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions.stacked .input-wrapper:not(.hidden) .form-item, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions:not(.stacked) .input-wrapper:not(.hidden) .form-item, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions.stacked .input-wrapper:not(.hidden) button, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions:not(.stacked) .input-wrapper:not(.hidden) button, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions.stacked .input-wrapper:not(.hidden) input[type="text"], .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].newsletter-layout-style-inline .actions:not(.stacked) .input-wrapper:not(.hidden) input[type="text"] {
        width: 100%;
        border-radius: 10px !important;
    }