CSS not being applied

Just as an update, I tried this in Chrome, Firefox, Edge and even IE, every single one renders things differently. I assume this is most likely a theme issue conflict?

Hello,

You put the Webba shortcode inside the ‘pre’ tag, that’s why CSS in not applied correctly. Please, add the shortcode outside of ‘pre’ tag and let us know so we can check for your second question.

Don′t understand add shortcode outside pre tag. Where is this. Could you show me.?

When you past shortcode in your page, you added unwanted tags – <pre>[webba_booking]</pre>

To fix it please, do the following:

1. delete shortcode from your page.

2. copy shortcode from here: [webba_booking]

3. past in your page.

• This reply was modified 6 years ago by Webba Appointment Booking.

So I never added pre to the tags, in fact I used the webba for button on a new page, but fixed that problem.

Okay, so next problem, I am using a contact form 7 in it (if you pick Sharks) you will see. When I go to click book it does not do any booking, it just scrolls up a little. All the others use the default form. But I need a way to add some additional fields, hence the contact form 7

• This reply was modified 6 years ago by Adam Berns.

Please, post the code of your form here.

Here is the form, at the most basic level.
But if you are saying that I cannot use the Contact Form 7 in the free version, and I need to upgrade to the pro version to make this work, I am okay with that.

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Telephone Number
[tel* TelephoneNumber] </label>

<label> Student Names
[textarea* StudentNames id:studentNames]</label>

Ok, now it Works. I just manually put the code in a new page. Thanks.

@jollyshots , here is the fixed code:

<p><label for="wbk-name">Your Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Telephone Number</label>[tel* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-students">Student Names</label>[textarea wbk-students class:wbk-textarea id:wbk-students]</p>

where is this documented? I have one last one I want to enter, a Hidden Drop down menu that can be edited by the admin in the portal.

Using custom fields in the booking form