Skip to main content
All CollectionsAppointments & Events Bookings
How to add Custom Questions to the booking page?
How to add Custom Questions to the booking page?
Support avatar
Written by Support
Updated over a week ago

Step-1: Create Question Template

You can add questions directly to a particular event or you can create a question template and link that template with your event.

1. To create a question template, first go to 'settings' and then select 'Question Templates'.

2. Select 'Create New Template' and give a name to the template.

3. After that add the questions that you want to add in the template (Open ended question, One choice question, Multiple choice question) and click on 'Save'.

Step3.png

How to use the created question template on the booking page?

1. When we created any event, the questionnaire is disabled by default.

To enable it, go to the event for which you created the question template and click on 'On' in the Questions section.

Step5.png

2. Required template can be selected from the drop-down and then click 'Save'

Step6.png

Step-2: Enable Question Widget
​
1. Go to "Servv App -> Widgets -> Events Widget -> Waiting list and question form" section and select "Enable question forms and waiting list" field.
​

Step-3: Edit template to display questions on your site

  1. To display questions on your website, you will need to enable "Servv" app to your Product page. To enable, go under "Themes" section and click "Customize". Then, select "Products -> Default Product" in the top menu to display the product template. Then, click "Add Block -> Apps" and select "Servv" app and add it to the page.
    ​

2. To customize the look and feel of "Add to Cart" button, add a "Custom Liquid" block to the same page and add this code. You can edit the colors and font to match your site theme.
​

{% style %}
.svv-opw-open-OtOADialog-container .svv-opw-open-OtOADialog-button {
border-radius: var(--buttons-radius-outset);
color: black;
background-color: #fffef2;
font-size: 1.5rem;
letter-spacing: .1rem;
line-height: calc(1 + .2 / var(--font-body-scale));
}

.svv-opw-open-OtOADialog-container .svv-opw-open-OtOADialog-button:hover {
background-color: #fffef2; /* Same background color on hover */
}
{% endstyle %}
Did this answer your question?