.pv-inline-form{
.gform_body{
padding-top: 80px;
@media(max-width: 860px){
padding-top: 25px;
}
.gform_fields{
.gfield{
.ginput_container{
flex-grow: 1;
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('/wp-content/uploads/2023/06/arrow-down.svg');
background-repeat: no-repeat;
background-size: 16px;
background-position: right center;
padding-right: 30px;
/* padding-left: 0; */
}
@media(min-width: 861px){
select{
text-align: center !important;
text-align: -webkit-center !important;
text-align-last: center;
-webkit-text-alig-last: center;
-moz-text-align-last: center;
direction: ltr;
background-position: 70% center;
}
input{
text-align: center !important;
}
}
}
@media(min-width: 861px){
label, .gfield_description{
flex: 0 0 auto;
}
.gfield_description{
font-size: 20px;
}
&.scta-top{
display: inline-flex;
//width: 33.333% !important;
justify-content: flex-start;
align-items: center;
vertical-align: middle;
gap: 10px;
&.scta-name{
width: 38%;
}
&.scta-company{
width: 31%;
}
&.scta-job{
width: 31%;
}
}
&.scta-center{
display: inline-flex;
justify-content: flex-start;
align-items: center;
vertical-align: middle;
gap: 10px;
padding-top: 25px;
}
&.scta-center.scta-subject{
width: 33.3333%;
}
&.scta-center.scta-message{
width: 66.6666%;
}
&.scta-bottom{
display: inline-flex;
width: 100%;
justify-content: flex-start;
align-items: center;
gap: 10px;
vertical-align: middle;
padding-top: 25px;
}
&.scta-top:not(:first-child),
&.scta-message{
padding-left: 10px;
}
}
@media(max-width: 860px){
display: block !important;
width: 100% !important;
label{
margin-bottom: 0 !important;
}
.gfield_description{
padding-top: 15px;
font-size: 16px;
}
.ginput_container{
input, select{
padding: 15px 0 !important;
}
}
&:not(:first-child){
margin-top: 20px;
}
}
&.gfield_error{
.ginput_container{
input, select{
border-color: red !important;
border: unset !important;
border-bottom: 1px solid red !important;
}
}
.gfield_validation_message{
display: none !important;
}
}
}
}
}
.gform_footer{
padding-top: 45px;
span.fas.fa-arrow-right{
&::before{
@include arrow-white;
margin-left: 10px;
}
}
@media(max-width: 860px){
padding-top: 0 !important;
}
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter