Hi Team, Form customisation question

Hi guys, it's me again..

  • Tyler Postle

    Hey Mohamed,

    hope you're doing well today and thanks for your question!

    Are you wanting to change that text above the confirmation box?

    you can do that by using this shortcode parameter:

    [app_confirmation ... title="Please check the appointment details below and confirm:"]

    Change that text to whatever you like :slight_smile:

    What do you mean by terms and conditions feel format? You can mark it as required, that way they will have to select it before submitting the appointment, much like a terms and conditions box. Is that what you're after?

    Look forward to hearing back Mohammed!

    Hope you're having a great day.

    All the best,
    Tyler

  • Mohamed Zamir

    Hey @Tyler Postle,

    Thanks for the swift reply

    So it didn't occur to me that shortcode can do the job, Thanks! but now I have another problem, im tweaking around with the CSS and it seems like

    .appointments-confirmation-wrapper h3 { font-size: 0.8em; font-weight: 1000; }

    this doesn't apply if the shortcode parameters are used.

    ---------

    for the check box issue, is there any way to change the default form based on my "Capture.png" file attached to what i've proposed on "capture2.png "

    just a shift of the checkbox and text to make it look like what its intended, also vaguely looks like this

    http://help.ablecommerce.com/mergedProjects/ablecommerce7/terms.gif

    BTW If you have the time please look into this issue for me regarding my recent query

    https://premium.wpmudev.org/forums/topic/regex-if-else-email-optional-legend-customization

    Thank you,
    Zamir

  • Tyler Postle

    Hey Zamir,

    Hope you're doing well today! Thanks for your reply :slight_smile:

    For the CSS that isn't applying now, try instead adding this:

    .page-make-an-appointment legend {
    font-size: 0.8em;
    font-wieght: 1000;
    }

    and to swap the checkbox and the label try adding this, you may have to change the width a little bit :slight_smile:

    .appointments-field.appointments-checkbox-field > label {
        float: right;
        width: 90%;
    }
    
    .appointments-field-entry.appointments-checkbox-field-entry {
        float: left;
    }

    Hope this helps Zamir!

    Look forward to hearing back.

    All the best,
    Tyler

  • Mohamed Zamir

    Hey @Tyler Postle, Thank you for the reply,

    So for the legend I tried your new CSS class variable. which still doesn't do the trick. But I got the main thing from you code ;

    .page-make-an-appointment legend

    which was the "legend". And then after testing out various combination this finally worked!

    appointments-confirmation-wrapper legend { font-size: large; }

    Thank you !

    As for the swapping of field and field entry issue;

    .appointments-field.appointments-checkbox-field > label {
    float: right;
    width: 90%;
    }

    .appointments-field-entry.appointments-checkbox-field-entry {
    float: left;
    }

    This doesn't seem to work, tried to understand it but cant grasp the class.
    Sorry man, hope there's a way to resolve this. I'm grateful so far !

    Thank you,
    Zamir

  • Tyler Postle

    Hey Zamir,

    No problem! Happy to help :slight_smile:

    That last part should be floating the checkbox to the left and the title of the field to the right so it looks more like the image you linked. Can you try making them "!important" to force the styles, sometimes it can be a necessary evil :p

    .appointments-field.appointments-checkbox-field > label {
        float: right !Important;
        width: 90% !important;
    }
    
    .appointments-field-entry.appointments-checkbox-field-entry {
        float: left !important;
    }

    If that doesn't work either then would you mind pasting in the link to your appointments table so I can take a closer look :slight_smile:

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.