Website booking form

To start using the booking form on your website, you need to get a special technical number of your company (token). To do this, you need to contact support. After receiving the number, you need to insert just a few lines into your website code.

This code must be inserted between the tags <head><link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/ > This code must be inserted before the closing tag </body><script src="https://rentprog-b5205.web.app/js/app.js">< /script> This is the code of the application itself, you need to insert it between the <body> tags in the place you need

<rentprog-widget token="received token" locale="language" show_all_cars='false' places='[{"place":"Office","price":0},{"place":"City delivery","price":30},{"place":"Airport","price":80}]' chairs='{"daily": false, "price": 30}' boosters='{"daily": true, "price": 10}' equipment='[{"item":"Roof rack","price":50, "daily": false},{"item":"Chains","price":10, "daily": true}]' agreement='{"text": ", and also accept ", "link_text": "rent terms", "link": "https://rentprog.com/public/agreement.html"}' passport_required="false" driver_license_required="false" birthday_required="false" middlename_required="false" email_required="false" phone_required="true" button_classes="text-4xl lg:text-lg h-14 lg:h-10 bg-blue-500 flex justify-center items-center w-full text-white px-4 py-3 mt-2 rounded-md focus:outline-none" icon_classes="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono" form_container="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg lg:text-base" container_classes="relative px-2 py-4 lg:px-10 lg:py-10 bg-white lg:mx-8 mx-0 shadow" title_container_classes="block pl-2 font-semibold text-xl self-start text-gray-700" title_classes="lg:leading-relaxed sm:text-4xl text-xl" > </rentprog-widget>

Instead of "received token" you need to insert a token issued by support.

Instead of "language" you need to insert en - for English or ru - for Russian.

show_all_cars - show all cars, by default only available cars are shown on the specified dates, taking into account the interval between bookings specified in the settings

passport_required - passport data fields, if set to "true", the fields become mandatory

driver_license_required - driver's license data fields, if set to "true", the fields become mandatory, if "false" then optional

birthday_required - date of birth field, if set to "true", the fields become mandatory, if "false" then optional

email_required - Email field, if set to "true", the fields become mandatory, if "false" then optional

phone_required - phone input field, if set to "true", the fields become mandatory, if "false" then optional

middlename_required - middle name input field, if set to "true", the fields become mandatory, if "false" then optional

places - these are places of issue and reception with prices for delivery/reception

chairs - child seats, daily - payment by the day or for the entire rental period, price - price

boosters - child seats without a back (seats), the settings are the same

agreement - the first line is fixed, since we collect personal data, if you want to add a link to your conditions, then you need to fill in this parameter

If the parameters chairs, boosters, equipment, agreement are not needed, just remove them from the code.

Visual design

For design, the Tailwind v2 library is used. Learn more about here. To speed up the loading of the form, not all classes are used, only those that are already used in the form, as well as all the background and text color classes (bg-... and text-...). If you really need some kind of additional class, please write to support and we will add it. If you want to make changes use the variables below. It is best to leave the default classes that are responsible for padding and so on, and change only the classes responsible for the background and text colors. But making changes to the indents, etc. is also possible, but this may affect the display on different devices, please be careful. You can see the default values ​​in the example above, as well as in the generated form on your site. The use of the variables below is optional, if left blank, the default values ​​will be taken.

button_classes - css classes that control the visual display of buttons.

icon_classes - css classes that control the visual display of the icon on the left.

container_classes - css classes that control the visual appearance of the container.

form_container - css classes that control the visual appearance of the form container.

title_container_classes - css classes that control the visual appearance of the title container.

title_classes - css classes that control the visual display of the title.