Mobile Friendly Drop Down for Contact Form 7

  • Hello, on my first post I would like to thank everybody that contribute to this awesome forum!!

    Note: MY code may be painful for the eyes ?? I know there are probably waaaay better and easier way of doing what I did lol. So I hope someone can help me fix the issues I am having in any way possible.

    Using : “contact form 7 v4.5.1”
    Website : https://www.mozys.ca/work
    Purpose of page: Online Job Application

    Problem 1: Drop down menus and labels for the weekly “AVAILABILITY” is not mobile friendly, I couldn’t find a way to lock down Monday with the 2 fields below it.. they all just float everywhere when it is in mobile mode.

    Problem 2: I have not been able to line up the text and check-boxes as I would like, and its even worse in internet explorer.

    Here goes the code:

    <div class="row">
	<div class="col-sm-12" ; style="font-size: 18pt" > <B>1. Personal Information</B></div></br>
	<div class="col-sm-6">[text* First-name placeholder "First Name*"]</div>
	<div class="col-sm-6">[text* Last-name placeholder "Last Name*"]</div>
	<div class="col-sm-12">[text* Street-Address placeholder "Street Address*"]</div>
	<div class="col-sm-6">[text* City placeholder "City*"]</div>
	<div class="col-sm-6">[select* Province first_as_label "Select Province*" "Alberta" "British Columbia" "Manitoba" "New Brunswick" "Newfoundland and Labrador" "Northwest Territories" "Nova Scotia" "Nunavut" "Ontario" "Prince Edward Island" "Quebec" "Saskatchewan" "Yukon"]</div>
	<div class="col-sm-6">[text* postal-code placeholder "Postal Code*"]</div>
	<div class="col-sm-6">[tel* your-tel your-number placeholder "Your Phone Number*"]</div>   
	<div class="col-sm-12">[email* your-email placeholder "Your Email*"]</div>

	<div class="col-sm-6">[select* int_student first_as_label "Are you an International Student?*" "Yes" "No ]</div>
	<div class="col-sm-6">[select work_permit first_as_label "If Yes, Do you have a work Permit?" "Yes" "No ]</div>
	<div class="col-sm-6">[select* education first_as_label "Please select highest level of education completed?*" "Currently in High School" "High School" "Certificate Program" "College/University" "Masters Degree" "Other" ]</div>
	<div class="col-sm-6">[select* full_part_time first_as_label "Type of employment?*" "Part-Time" "Full-Time" "Seasonal" ]</div>
</div>

<div class="row">
	<div class="col-sm-12" ; style="font-size: 18pt" > </br> <B>2. Availability </B></div>
	<div class="col-sm-12" ; style="font-size: 16" >  (If not available, please pick "Not Available") </br></br> </div>
	

	<div class="container_apply">
		<div>Monday</div><div>Tuesday</div><div>Wednesday</div><div>Thursday</div><div>Friday</div><div>Saturday</div><div>Sunday</div>
	</div>

		<div class="container_apply">
            <div> [select* mon-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div>
			<div> [select* tue-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* wed-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div>
			<div> [select* thu-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* fri-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* sat-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* sun-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 

		
			<div> [select* mon-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div>
			<div> [select* tue-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* wed-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* thu-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* fri-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* sat-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
			<div> [select* sun-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> 
        </div>

        <div class="col-sm-6">[text* hrs_work placeholder "Preferred number of hours per WEEK *"]</div>
        <div class="col-sm-6"> 
              <div class="col-sm-12">[checkbox* position default:1_2_3_4 "Sandwich Assembler" "Line Cook" "Cashier"  "Dishwasher"]</div>
        </div>

</div>

<div class="row">
	<div class="col-sm-3" ; style="font-size: 18pt" > </br></br><B>3. Employment History </B></div>
	<div class="col-sm-9"> 	</br></br>[file file-871 limit:2mb] </div>
	<div class="col-sm-12" ; style="font-size: 16" >  You may apply by attaching a resume OR filling the below fields.  You may also apply without any work experience, if so please proceed to next step. </br></br> </div>
	<div class="col-sm-2" > <B> Most Recent / Current Company</B>  </div>
	<div class="col-sm-10">[text employer1_name placeholder "Company Name"]</div>
	<div class="col-sm-6">[date employer1_start date-format:mm/dd/yy change-month change-year placeholder "Start Date"]</div>
	<div class="col-sm-6">[date employer1_end date-format:mm/dd/yy change-month change-year placeholder "End Date"]</div>
	<div class="col-sm-6">[text employer1_position placeholder "Position & Duties"]</div>
	<div class="col-sm-6">[text employer1_reason placeholder "Reason for Leaving"]</div>
	
	<div class="col-sm-2" > <B> <Center> Previous Company </CENTER></B>  </div>
	<div class="col-sm-10">[text employer2_name placeholder "Company Name"]</div>
	<div class="col-sm-6">[date employer2_start date-format:mm/dd/yy change-month change-year placeholder "Start Date"]</div>     
	<div class="col-sm-6">[date employer2_end date-format:mm/dd/yy change-month change-year  placeholder "End Date"]</div>
	<div class="col-sm-6">[text employer2_position placeholder "Position & Duties"]</div>
	<div class="col-sm-6">[text employer2_reason placeholder "Reason for Leaving"]</div>
</div>

<div class="row">
	<div class="col-sm-8 ; vertical-center">[select* contact_method first_as_label "Please Select Preferred Method of Contact*" "eMail" "Phone Call" "Text" "Any"]</div>
	<div class="col-sm-3 ">[recaptcha]</div>
</div>

<p>[submit "APPLY"]</p>

    Here is the css related to Problem 2, the checkboxes

    
span.wpcf7-list-item { 
display: inline; 
margin-left: 10px;     

}

span.wpcf7-list-item * { 
display: table-cell; 

vertical-align:middle;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
}

span.wpcf7-list-item-label {

vertical-align:text-top;

}

span.wpcf7-form-control-wrap {
    
}
    • This topic was modified 8 years, 5 months ago by nizoo.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Regarding the drop downs, you should place the label and the corresponding fields all in one div container so when they do move around the related elements are kept together. Use media queries to change the width of each day’s container to 100% once the viewport is small enough so that all the days stack vertically on mobile devices.

    Unfortunately, I cannot identify the issue with the check boxes.

    I will suggest that you check your browser console and resolve any errors that show up. My Chrome is having trouble with cross origin resource sharing regarding the Dashicons font. Using Dashicons with the check boxes should not be necessary.

    Thread Starter nizoo

    (@nizoo)

    Thanks for the help man, I was able to make the drop downs to line up and stay with their respective day..

    However I am not able to use Media Queries thingy, I did the following, I am not sure if it is right..

    my html looks like this:

    <div class="container_apply" ; "container_apply2">

            <div class="col-sm-12"><div>Monday</div> <div> [select* mon-from first_as_label "FROM*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div> <div> [select* mon-to first_as_label "TO*" "Not Available" "1:00 AM" "2:00 AM" "3:00 AM" "4:00 AM" "5:00 AM" "6:00 AM" "7:00 AM" "8:00 AM" "9:00 AM" "10:00 AM" "11:00 AM" "12:00 PM" "1:00 PM" "2:00 PM" "3:00 PM" "4:00 PM" "5:00 PM" "6:00 PM" "7:00 PM" "8:00 PM" "9:00 PM" "10:00 PM" "11:00 PM" "12:00 AM"] </div>  </div></div>

    and css

    @media only screen and (max-width: 479px){
    .container_apply2 { width: 100%; }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile Friendly Drop Down for Contact Form 7’ is closed to new replies.