Form styling issues?

  • Resolved adamrf

    (@adamrf)


    1 year, 4 months ago

    Hello,I am a new user to this platform and would like to test it out before making a purchase. I am experiencing difficulties with the booking form. As you can see from my screenshot, the form appears to be restricted in its width. Additionally, I am perplexed by the layout of the form, which consists of multiple lines of text directly down the page. I would appreciate it if you could explain why this layout is not more aesthetically pleasing and allows for better readability on desktop.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support jaysupport

    (@jaysupport)

    1 year, 4 months ago

    Hi adam,

    The sizing and styling of the fields may be impacted by your theme’s styling/CSS. If you could share a link to your booking page, we could take a look and hopefully determine if that’s the case.

    The default layout of the form is to be one field on top of each other. Aesthetically pleasing is probably pretty subjective, but, you might be able to alter it with some custom CSS to be closer to what you would like.

    Thread Starter adamrf

    (@adamrf)

    1 year, 4 months ago

    Sure you can see it here. Do you think you might be able to provide some CSS to help this look better?

    Thank you

    Adam

    Plugin Support jaysupport

    (@jaysupport)

    1 year, 4 months ago

    Hi Adam,

    Thank you for providing that information. You can use the following Custom CSS to adjust the layout of the fields. You can paste it in the Site Editor styling section, or, if you are using a non-block theme, into the additional CSS section of the customizer (e.g. WP Admin Sidebar > Appearance > Customize > Additional CSS)

    .rtb-booking-form {
    width: 75%;
    margin: 0 auto;
    margin-top: 1em;
    }
    .rtb-text.date,
    .rtb-text.time,
    .rtb-text.name,
    .rtb-text.email{
    float: left;
    margin-right: 1em;
    }

    Thread Starter adamrf

    (@adamrf)

    1 year, 4 months ago

    Thank you that did help me to fix it! There was some issues with the desktop display but I added more CSS to help fix this. If anyone want’s to try the CSS it’s 

    /* Center the booking form on desktop */
    .rtb-booking-form {
    width: 75%;
    margin: 0 auto;
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    }

    /* Form fields layout */
    .rtb-text.date,
    .rtb-text.time,
    .rtb-text.name,
    .rtb-text.email {
    margin-right: 1em;
    margin-bottom: 1em;
    display: inline-block;
    text-align: left;
    }

    /* Mobile responsive adjustments / @media screen and (max-width: 768px) { .rtb-booking-form { width: 90%; / Adjust form width on mobile */
    }

    .rtb-text.date,
    .rtb-text.time,
    .rtb-text.name,
    .rtb-text.email {
    display: block;
    margin-right: 0;
    margin-bottom: 1em;
    }
    }

    I also wanted to ask. In the notification setting under “Admin Email Address” can I use multiple emails separated with a comma or?

    • This reply was modified 1 year, 4 months ago by adamrf.
    Plugin Support jaysupport

    (@jaysupport)

    1 year, 4 months ago

    Hi adam,

    Great, thanks for letting us know!

    Yes, you can enter multiple admin email addresses into that field, separating them with commas.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Form styling issues?’ is closed to new replies.