Summary
This document describes the complete CSS styling applied to the Main Contact Form (WPForms ID 26741) used on Tulu Travel’s contact page. These styles ensure brand consistency, improved readability, and a polished premium layout.
Context
The native WPForms layout needed enhancements to better match Tulu Travel’s visual identity.
Goals:
- Improve readability of field labels
- Unify typography
- Customize buttons to match brand colors
- Ensure consistency across browsers
- Maintain responsiveness
The CSS was inserted via the site’s custom CSS/snippet system.
Implementation Details
The following styles apply exclusively to WPForms Form ID 26741, preventing unintended overrides on other forms.
Includes:
- Form labels (uppercase, spaced, clean typography)
- Input/textarea styles
- Placeholder styling
- Submit button (pill shape, brand green, centered)
/* ----------------------------------------- */
/* TULUTRAVEL — Estilos SOLO para Form ID 26741 */
/* ----------------------------------------- */
/* FIELD LABELS */
#wpforms-form-26741 .wpforms-field-label,
#wpforms-form-26741 .wpforms-field-sublabel {
font-family: "Afacad Flux", sans-serif !important;
font-weight: 500 !important;
font-size: 15px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #222 !important;
margin-bottom: 6px !important;
}
/* INPUT TEXT */
#wpforms-form-26741 input[type="text"],
#wpforms-form-26741 input[type="email"],
#wpforms-form-26741 input[type="tel"],
#wpforms-form-26741 input[type="number"],
#wpforms-form-26741 input[type="date"],
#wpforms-form-26741 input[type="url"],
#wpforms-form-26741 select,
#wpforms-form-26741 textarea {
font-family: "Poppins", sans-serif !important;
font-weight: 400 !important;
font-size: 16px !important;
color: #1F1F1F !important;
line-height: 1.4 !important;
}
/* PLACEHOLDERS */
#wpforms-form-26741 ::placeholder {
font-family: "Poppins", sans-serif !important;
font-size: 14px !important;
font-weight: 300 !important;
color: #A5A5A5 !important;
opacity: 1 !important;
}
/* SUBMIT BUTTON CONTAINER */
#wpforms-form-26741 .wpforms-submit-container {
text-align: center;
}
/* SUBMIT BUTTON */
#wpforms-form-26741 button[type="submit"],
#wpforms-form-26741 .wpforms-submit {
font-family: "Afacad Flux", sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #ffffff !important;
background-color: #2A8D7C !important;
border: none !important;
border-radius: 999px !important;
padding: 14px 38px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
}How to Modify
- To adjust button color: change background-color on the submit button.
- To update typography: edit font-family in label or input selectors.
- To change spacing: modify margin/padding values in labels or submit container.
- To apply this style to another form: replace the #wpforms-form-26741 selector with the new form’s ID.
Best Practices
- Keep form CSS tied to specific IDs to avoid global overrides.
- Use !important sparingly — only where WPForms injects inline styles.
- Maintain typography consistency by limiting used font families.
- Test form styling on mobile and desktop before publishing.
Last Updated
2025-12-03