Input and Drop Down Field Styling Issues
-
Hi, I’m trying to build a form in Contact Form 7 for a WordPress site and I am having trouble with:
a) neatly aligning all the input fields ( which includes some drop down fields);
b) adjusting the width of the drop down fields ( to be the same size as the input fields)
c) adjusting the horizontal spacing between all fields (input and drop down)
d) changing the label font colour.The HTML is follows:
<div id=”responsive-form” class=”clearfix”>
<div class=”form-row”>
<div class=”column-half”>First Name [text* first-name]</div>
<div class=”column-half”>Last Name [text* last-name]</div>
</div><div class=”form-row”>
<div class=”column-half”>Organisation [text* your-organisation]</div>
<div class=”column-half”>Position [text* your-position]</div>
</div><div class=”form-row”>
<div class=”column-half”>Address [text* your-address]</div>
<div class=”column-half”>Suburb [text* your-suburb]</div>
</div><div class=”form-row”>
<div class=”column-half”>State [select* State “– Select State–” “Australian Capital Territory” “New South Wales” “Northern Territory” “Queensland” “South Australia” “Tasmania” “Victoria” “Western Australia”]</div>
<div class=”column-half”>Post Code [text* your-postcode]</div>
</div><div class=”form-row”>
<div class=”column-half”>Email [email* your-email]</div>
<div class=”column-half”>Phone [text* your-phone]</div>
</div><div class=”form-row”>
<div class=”column-half”>Industry [select* Industry “– Select Industry–” “Aged Care ” “Agricultural” “Airline Operations” “Aluminium ” “Ambulance and Patient Transport” “Amusement, Events and Recreation” “Animal Care and Veterinary Services” “Aquaculture” “Asphalt ” “Banking Finance and Insurance” “Broadcasting and Recorded Entertainment” “Building Services” “Building, Metal and Civil Construction” “Business Equipment ” “Cement and Concrete Products” “Cemetery Operations” “Children’s Services” “Cleaning Services” “Clerical ” “Clothing ” “Coal ” “Coal Export Terminals” “Commercial Sales” “Contract Call Centre” “Corrections and Detentions” “Diving Services” “Dredging ” “Dry cleaning and Laundry Services” “Educational Services” “Electrical Contracting” “Electrical Power” “Fast Food” “Fire Fighting Services” “Food, Beverages and Tobacco Manufacturing ” “Funeral Directing” “Gardening Services” “Grain Handling” “Graphic Arts” “Hair and Beauty” “Health and Welfare Services” “Hospitality ” “Indigenous Organisations and Services ” “Journalism” “Licensed and Registered Clubs” “Live Performance” “Local Government Administration” “Mannequins and Modelling” “Manufacturing and Associated Industries” “Marine Tourism and Charter Vessels” “Maritime ” “Market and Business Consultancy Services” “Meat ” “Mining ” “Miscellaneous” “Nursery” “Oil and Gas” “Passenger Vehicle Transport (non rail)” “Pharmaceutical ” “Pharmacy Operations” “Plumbing” “Port Authorities” “Postal Services” “Poultry Processing ” “Publishing ” “Quarrying” “Racing” “Rail” “Real Estate” “Restaurants” “Retail ” “Road Transport” “Salt” “Scientific Services” “Seafood Processing” “Security Services” “Social, Community, Home Care and Disability Services” “Sporting Organisations” “State and Territory Government Administration” “Stevedoring” “Storage Services” “Sugar” “Technical Services” “Telecommunications Services” “Timber and Paper Products” “Tourism ” “Vehicle ” “Waste Management ” “Water, Sewerage and Drainage Services” “Wine ” “Wool Storage, Sampling and Testing”] </div><div class=”column-half”>No of Employees [select Employees “–No of Employees–” “< 15” “16 > 50” “51 > 100” “> 100″]</div>
<div class=”form-row”>
<div class=”column-full”>Subject [select* Subject “Advice” “Advocacy” “Audits” “Business Process Improvement” “Change Management” “Coaching” “Competency Frameworks” “Compliance” “Customer Journey Mapping” “Diversity” “Employee Engagement” “Employment Cessation” “Employment Contracts” “Inclusion” “Goal Setting” “Job Design & Evaluation” “Learning & Development” “Onboarding” “Organisational Design” “Organisational Development” “Payroll” “Performance Management” “Policies” “Position Decsriptions” “Procedures” “Project Management” “Recruitment & Selection” “Reward & Recognition” “Service Blueprints” “Strategy Development” “Succession Planning” “System Procurement & Implementation” “Talent Management” “Time & Attendance” “Values & Behaviours” “Workplace Behaviour” “Workplace Investigations”]</div>[file Upload limit:10mb filetypes:doc|pdf|xls]
<div class=”form-row”>
<div class=”column-full”>Your message [textarea your-message]</div>
</div><div class=”form-row”>
<div class=”column-full”>[submit “Send”]</div>
</div></div><!–end responsive-form–>
The CSS is
#responsive-form{
max-width:600px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box}
.clearfix:after {
content: “”;
display: table;
clear: both;
}/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 input[type=”textarea”]{
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}.wpcf7-select{
width:100%;
max-width:100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}I would be very grateful for some assistance to solve these 4 issues
Cheers
Michael -
Hi Michael, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the plugin author directly or ask in the volunteer-based WordPress.org forums.
- The topic ‘Input and Drop Down Field Styling Issues’ is closed to new replies.
WordPress.com Forums 