[ad_1]
Hello, Takayuki Miyoshi!
I'm working for my project and using on it Contact Form 7, thank you very much, it fits to all my client's requirements. I managed to style it according to my website design, and everything looks fine, except only one little thing, the Recaptcha on mobile view does not stay within the column and I don't know how to fix it! Could you please help me!!!??
Here is the link to the screenshot:
Here is the form:
Submit your requestCreating an inclusive environment for children with learning differences is crucial for their growth and development. By embracing their unique abilities and providing support tailored to their individual needs, we foster a sense of belonging and empower these children to reach their full potential. Select your program [select* Programs include_blank "Digital Safety" "Python for Bits" "Python for Bytes" "Advanced Coding Topics" "Introduction to Educational Tools" "Scratch for Bits"] Select Location [select* Location include_blank "Pacific Heights Elementary" "Edgewood Elementary" "Sunnyside Elementary"] Select your date [date* Selectyourdate] Select your time [select Selecttime "2:45pm - 3:45pm"] Parent/Guardian Name [text* parent-first-name placeholder "Parent first name*"] Parent/Guardian Last Name [text* parent-last-name placeholder "Parent last name*"] Child First Name [text* child-first-name placeholder "Child first name*"] Child Last Name [text* child-last-name placeholder "Child last name*"] Child Date of Birth [date* birth-date min:9_years_old max:18_years_old]
[acceptance acceptancechilddateofbirth]
Confirm your child 9-18 years old </label>
<label> Any medical conditions?
[text any-medical-conditions]</label>
<label> Advise of any learning or behavioural issues staff should be aware of
</label>
<label> Privacy & Legal
[acceptance acceptance-805]Yes, I consent to my data being stored according to the guidelines set out in the Privacy Policy.</label>
[/acceptance]
Your email [email* verification akismet:author_email] Put your verification code here [text* verification-otp]
[recaptcha]
Submit your request
[submit "Register for your course"]
Here is the CSS that I use to inline the fields and do not inline them on the mobile view:
/* CSS for CF 7 */
form.wpcf7-form label {
width: 100%;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.contact-form-wrapper {
background-color: #0000004D;
border-radius: 50px;
border: none;
padding: 50px;
box-sizing: border-box;
}
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="email"],
.contact-form-wrapper select,
.contact-form-wrapper textarea {
width: 100%;
border-radius: 6px !important;
box-sizing: border-box;
}
.single-raw {
width: 100%;
clear: both;
border-radius: 6px !important;
margin-bottom: 20px;
margin-right: 10px !important;
box-sizing: border-box;
}
.single-column {
width: 50%;
float: left;
padding-right: 10px;
box-sizing: border-box;
}
.single-column input {
width: 100%;
box-sizing: border-box;
}
.single-raw .tribe-tickets__tickets-buy {
background-color: #EA424D;
transition: transform 0.3s ease;
width: 100%;
padding-bottom: 25px;
box-sizing: border-box;
border: none;
outline: none;
}
.single-raw .tribe-tickets__tickets-buy:hover {
background-color: #ECAB3E;
transform: translateY(-5px);
}
.submit-button input[type="submit"] {
background-color: #EA424D;
transition: transform 0.3s ease;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
}
.submit-button input[type="submit"]:hover {
background-color: #ECAB3E;
transform: translateY(-5px);
}
@media only screen and (max-width: 600px) {
.single-column {
width: 100%;
float: none;
}
.single-raw {
display: flex;
flex-direction: column;
}
.single-column label {
width: 100%;
}
.single-column input[type="text"] {
width: 100%;
}
.contact-form-wrapper {
padding: 20px;
}
}
And here is the link to the page where in mobile view recaptcha does not fit:
PLEASE HELP ME, AS I DON'T KNOW WHOM TO ASK ALREADY!
Thank you very much!
With Kindest Regards,
Olga. PThe page I need help with: [log in to see the link]
