-
digitalmulesformsHello,
I need some assistance styling this form similar to my mockup.
I need there to be no gap between email form field and subscribe button. The border radius around the entire form should be 1px and #F2F2F2 in color. I really need it to be side-by-side on desktop but stacked vertically on mobile. The button hover should be text color of #F2F2F2 and background color #1F2428.
Please let me know if this is possible. Thanks!
Page URL: https://form.jotform.com/261555018969165 -
Rehan Support Team LeadHi Jack,
Thanks for reaching out to Jotform Support. I've been testing in a clone of your form, and I think I'm able to create the required results. But I had to make some changes in the existing CSS and also had to inject some new CSS code. I'm copy-pasting all the CSS of your form with the additions below. So you can replace your existing CSS code with the following CSS:
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&display=swap');
.form-buttons-wrapper {
border : none !important;
}
.form-all {
margin : 0 !important;
padding : 0 !important;
}
.form-all {
box-shadow : none !important;
}
/* Form Labels */
.form-label {
color : #ffffff !important;
font-family : 'Inter', sans-serif !important;
font-size : 16px !important;
font-style : normal !important;
font-weight : 500 !important;
line-height : 150% !important;
}
/* Placeholder Text */
.form-textbox::placeholder,
.form-textarea::placeholder {
color : rgba(242, 242, 242, 0.4) !important;
font-family : 'IBM Plex Sans', sans-serif !important;
font-size : 20px !important;
font-style : normal !important;
font-weight : 500 !important;
line-height : 150% !important;
}
/* Input Fields */
.form-textbox,
.form-textarea,
.form-dropdown {
border-radius : 10px !important;
box-sizing : border-box !important;
height : auto !important;
padding : 18px 16px !important;
/* increases top/bottom padding */;
}
/* Submit Button Styling */
.form-submit-button {
background-color : #F2F2F2 !important;
border : 1px solid #F2F2F2 !important;
color : #1F2428 !important;
font-family : 'IBM Plex Sans', sans-serif !important;
font-size : 18px !important;
font-weight : 500 !important;
letter-spacing : 0.9px !important;
text-transform : uppercase !important;
line-height : normal !important;
border-radius : 10px !important;
padding : 12px 48px !important;
transition : background-color 0.3s ease !important;
}
/* Hover State */
.form-submit-button:hover {
background-color : #1F2428 !important;
color: #F2F2F2 !important;
border-color : #1F2428 !important;
}
/* === Newsletter row: 2 columns (label+input) + button === */
.form-line {
display : flex !important;
flex-wrap : nowrap !important;
align-items : flex-end !important;
/* align button with input field */;
}
/* Stop Jotform column floats/forced widths from breaking layout */
.form-line-column {
float : none !important;
width : auto !important;
margin : 0 !important;
}
/* Left column: fixed 426px (label + input stacked) */
.form-line-column:first-child {
flex : 0 0 426px !important;
display : flex !important;
flex-direction : column !important;
}
/* Ensure input fills the 426px column cleanly */
.form-line-column:first-child .form-textbox {
width : 100% !important;
}
/* Right column: button fits content */
.form-line-column:last-child {
flex : 0 0 auto !important;
display : flex !important;
align-items : flex-end !important;
}
/* Kill wrapper spacing that causes misalignment */
.form-buttons-wrapper,
.form-submit-button-container,
.form-submit-button-wrapper {
margin-top : 27px !important;
margin-left : -22px !important;
padding : 0 !important;
border : 0 !important;
display : flex !important;
align-items : flex-end !important;
}
/* Prevent button text from wrapping */
.form-submit-button {
white-space : nowrap !important;
}
@media screen and (max-width: 768px){
#id_3, #cid_3, #input_3,
#id_2, #cid_2, .form-buttons-wrapper, .submitBrandingWrapper,
#input_2.form-submit-button {
width : 100% !important;
max-width : 100% !important;
display : block !important;
box-sizing : border-box !important;
margin : 2px 0px 4px 0px !important;
}
#input_2.form-submit-button {
padding : 15px !important;
margin-top : 0px !important;
}
.jf-branding {
display : none !important;
}
}
.form-required {
display : none !important;
}
.jf-form-buttons {
height: 55px;
border-bottom-left-radius: 0px !important;
border-top-left-radius: 0px !important;
}
input#input_3 {
border-top-right-radius: 0px ! Important;
border-bottom-right-radius: 0px !important;
}
input#input_3 {
width: 253px !important;
border-color: ##F2F2F2;
}
button#input_2 {
width: 147px !important;
}
Here is the result:
Reach out again if you need any other help.
-
digitalmulesforms
Hi! I added the CSS code and it looks like the form field and submit button are stacked instead of being side-by-side. Adding a screenshot, the form link, and the website it's embedded on (footer).
https://form.jotform.com/261555018969165
Preview on jotform:
https://pauleygroupdev.wpenginepowered.com/
-
Joeni JotForm SupportHi Jack,
Could you try injecting the CSS code into your form’s style settings? Let me show you how:
1. First, copy this code:
.jf-form-buttons:not(.form-pagebreak-back) {
margin-left: 337.5px !important;
top: -95px !important;
position: relative;
}
2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.
-
digitalmulesforms
Hi! Thanks for your help! I see that it looks correct in the Jotform preview, but why is the embed code looking like this?
https://pauleygroupdev.wpenginepowered.com/
-
Mikhail JotForm SupportHi Jack,
Can you try replacing your whole CSS code with the CSS code below?
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&display=swap');
.form-buttons-wrapper {
border: none !important;
}
.form-all {
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
max-width: 100% !important;
width: 100% !important;
}
/* --- Form Labels --- */
.form-label {
color: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-style: normal !important;
font-weight: 500 !important;
line-height: 150% !important;
display: block !important;
margin-bottom: 8px !important;
}
/* --- Placeholder Text --- */
.form-textbox::placeholder,
.form-textarea::placeholder {
color: rgba(242, 242, 242, 0.4) !important;
font-family: 'IBM Plex Sans', sans-serif !important;
font-size: 20px !important;
font-style: normal !important;
font-weight: 500 !important;
line-height: 150% !important;
}
/* --- Input Fields --- */
.form-textbox,
.form-textarea,
.form-dropdown {
border-radius: 10px !important;
box-sizing: border-box !important;
height: auto !important;
padding: 18px 16px !important;
background-color: transparent !important;
border: 1px solid #F2F2F2 !important;
color: #ffffff !important;
}
/* Specific fix for your input field item */
input#input_3 {
width: 100% !important;
max-width: 426px !important;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}
/* --- Submit Button Styling --- */
.form-submit-button {
background-color: #F2F2F2 !important;
border: 1px solid #F2F2F2 !important;
color: #1F2428 !important;
font-family: 'IBM Plex Sans', sans-serif !important;
font-size: 18px !important;
font-weight: 500 !important;
letter-spacing: 0.9px !important;
text-transform: uppercase !important;
line-height: normal !important;
border-radius: 10px !important;
padding: 12px 48px !important;
transition: background-color 0.3s ease !important;
white-space: nowrap !important;
}
button#input_2 {
width: auto !important;
min-width: 147px !important;
height: 59px !important; /* Perfectly matches input height container sizing */
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
}
/* Hover State */
.form-submit-button:hover {
background-color: #1F2428 !important;
color: #F2F2F2 !important;
border-color: #1F2428 !important;
}
/* --- Newsletter Row Layout: Side-by-Side Row Force --- */
/* Target Jotform's page section list wrapper holding the form line structures */
.form-section {
display: flex !important;
flex-direction: row !important; /* Locks rows side-by-side layout */
flex-wrap: nowrap !important;
align-items: flex-end !important; /* Aligns input and button cleanly along the bottom baseline */
width: auto !important;
}
.form-line {
float: left !important;
clear: none !important; /* Allows items to sit adjacent on the same line */
padding: 0 !important;
margin: 0 !important;
width: auto !important;
}
/* Structure formatting for input row block wrapper */
.form-line-column {
float: left !important;
clear: none !important;
width: auto !important;
}
/* Spacing corrections for the submit container block wrapper */
.form-buttons-wrapper,
.form-submit-button-container,
.form-submit-button-wrapper {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
display: flex !important;
align-items: flex-end !important;
}
.form-required {
display: none !important;
}
/* --- Mobile Responsiveness Dropdown Breakdown --- */
@media screen and (max-width: 768px) {
.form-section {
flex-direction: column !important; /* Stack vertically cleanly on mobile viewports */
align-items: stretch !important;
}
.form-line,
.form-line-column,
input#input_3,
button#input_2,
.form-buttons-wrapper,
.form-submit-button-container {
width: 100% !important;
max-width: 100% !important;
display: block !important;
box-sizing: border-box !important;
margin: 6px 0 !important;
}
input#input_3 {
border-radius: 10px !important; /* Restores fully rounded look on small screens */
}
button#input_2 {
border-radius: 10px !important;
height: auto !important;
padding: 18px 16px !important;
}
.jf-branding {
display: none !important;
}
}
Give it a try and let us know if you have any other questions.
Your Reply
Something Went Wrong
An error occurred while generating the AI response. Please try again!