Hello there,

Thank you for reaching out to us.

If we understand you properly you want to be able to show all the available time slots to your customers but not to allow them to book. If this is the case then I'm afraid that this is not possible. If you show the booking form and you show avaliable time slots then a customers are able to book. There is no way to prevent them from booking so they can book without consultations with you.

As for width unfortunately, currently, this feature is not built-in in Amelia.

Our support does not fully provide customization solutions, but we can try to provide some basic CSS in situations like this.

For manipulating the width of the "outer Booking container", you can try this CSS:

.amelia-v2-booking #amelia-container.am-fs__wrapper {    max-width: 1200px !important;    width: 100%;    height: 560px;    margin: 99px auto;    border-radius: 8px;    box-shadow: 0 30px 40px #0000001f;
}

For example, on our Demo page, if I add that CSS, the outer container expands like this :

Just the background color we set is transparent, so it is not very visible on our page,

 but that width can be changed like that.

-

Now, if you also wish to manipulate this "inner Booking container width", you can use this CSS selector :

.amelia-v2-booking #amelia-container .am-fs__main {        max-width: 1200px;    width: 100%;
}

If I add that to our Demo, here is the result :

As you see, we have successfully changed the width this way.

The main property to edit is "max-width" with a fixed pixel value.

Hope this helps in case it does not we encourage you to kindly consider submitting this valuable suggestion as a feature request through the following link: https://features.wpamelia.com/. The prioritization of feature development is greatly influenced by the number of customer requests received. By participating and expressing your support, you contribute significantly to the potential expedited implementation of this feature.

-

If you wish to see a built-in solution for users to choose the Booking Form width from Amelia's Customize interface, 

please feel free to search through our feature suggestion page, 

 to see if someone may have already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog page if you'd like, where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

We wish you all the best and hope you have a wonderful day ahead. 

Hello again,

Sorry that we could not be of more help in booking regards but Amelia is not designed in that way.

As width if we understand you properly you want custom field to be all the way stretched on the booking form?

If this is the case they yes we can help we have just implemented this option in the last update 7.6.1 check if you have this version and in custom field section you can choose if the custom field will occupy 1/2 or 1/1 like this

Hope this helps. 

Hello again,

This could be issue with container size so please try and change the width. So when the width of the form is less than 768 (mobile size) and you have placed our form for example in an element whose width is 700px and therefore the width of our form is 700pxi, then this rule for 1/2 and 1/1 does not apply, they must be respected rules of responsive_a design_a, so that is why the width of all fields is 100%.

Hope this helps. 

We wish you all the best and hope you have a wonderful day ahead.  

Hello again,

We will take a look at this now and as soon as we have more information we will contact you again on this ticket.

Hello again,

As far as we can see everything is working fine

These settings only apply to custom fields and this is how it is supposed to look. So as far as we can see there are no issues and should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.

We wish you all the best and hope you have a wonderful day ahead. 

Hello again,

My apologies but we do not quite what you want to achieve. Do you want to prevent that customers can book on the booking form? Sorry we have to check since Amelia is designed for appointment booking. 

Looking forward to your reply. 

Hello again,

Do you want it to look like this

If that is the case then you can use this CSS

.amelia-v2-booking #amelia-container .am-fs__main-footer {
    display: none
}

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

If you need help with adding custom JS to the page, please take a look at this article.

Hope this helps. 

We wish you all the best and hope you have a wonderful day ahead. 

Hello again,

As far as we can see everything is fine now it looks like you managed to achieve what you needed.

We wish you all the best and hope you have a wonderful day ahead. 

Hello again,

We will take a look at this now and we will reach out to you again on this ticket as soon as we have more information

Hello again,

I consulted our colleagues but we are not quite sure what you want to achieve and how?

Please send us a short video of the issue and a narrative of how and what you want to achieve. We are not quite sure how you came to this step when we have sent you a CSS that removes the footer button so that you can not go to next step.

Looking forward to your reply. 

Hello again,

We will consult our colleagues again and see if this is possible or not. 

Hello again,

We just got the feedback from our colleagues and they have told us that you can try out this CSS

.amelia-v2-booking #amelia-container .am-advsc__wrapper div.am-advsc__slots-wrapper {
    display: none !important;
}

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

This should help. 

Hello again,

You are most welcome, and we are glad that we were able to help you. Should you have any further inquiries, we kindly request that you open separate tickets for each question and we will gladly help you there.