Hello Fabian,

Thank you for reaching out to us.

1.Try the following CSS  for this purpose:

#amelia-container{
    box-shadow: none !important;
}

2.To add a link to Terms & Conditions, you can use "Checkbox" or "Radio" custom fields. In the custom field you need to add an anchor tag like this:

<a href="https://wpamelia.com/terms-and-conditions/" target="_blank">Terms & Conditions</a>

So this text appears as a hyperlink that opens a new tab (target="_blank") and takes the customers to your Terms & Conditions without them leaving the booking form. So the custom field on the back end would look like this:

As you can see, we made this radio button a mandatory field, so no one can book an appointment without checking the "I agree" button.

3. To disable the keyboard for mobile devices when interacting with the .am-select .el-input__inner input field in Amelia, you can add custom CSS that targets the input field on mobile devices and prevents it from focusing. Here's an example of how to do it:

• @media only screen and (max-width: 768px): This applies the CSS only to devices with a screen width of 768px or smaller, which typically corresponds to mobile devices.
• .amelia-v2-booking #amelia-container .am-select .el-input__inner: This is the selector for the input field you want to target.
• pointer-events: none;: This disables interaction with the input field, effectively preventing the mobile keyboard from appearing when the field is tapped.

This will disable the input field on mobile devices, preventing the keyboard from opening. Let me know if you need further adjustments!

Hello Fabian,

Thank you for reaching out!

To address the large space issue between the header and form on mobile devices, you can try adding the following CSS to your site:

This should help reduce the space on mobile screens. Since Astra and Spectra Pro's padding/margin settings don't seem to affect Amelia forms, using custom CSS is the most effective way to target and adjust these elements.

For the pointer-events issue, ensure the CSS is applied correctly by double-checking the selectors in your theme's customizer or CSS editor. If the keyboard still pops up, consider inspecting the element via browser developer tools to confirm the class names and adjust accordingly.

Let me know if you need further assistance!

Hello Fabian,

Thank you for your patience.

Regarding the issue with the mobile keyboard popping up when clicking on a category selection field, it seems that CSS alone may not be enough to prevent this behavior. As an alternative, we can try using JavaScript to disable the focus on the input field, which should prevent the mobile keyboard from appearing.

Here's a simple JavaScript solution you can try:

This script disables the ability to interact with the input fields, preventing the keyboard from appearing on mobile devices. You can add this script to your site using the custom JS section or by embedding it in your theme's footer.

Let me know if this resolves the issue or if you'd like further assistance!