Linking Elementor forms to Zásilkovna

Picture of Ondřej Koziorek
Ondřej Koziorek

If you want to offer the user a choice of branches in your Elementor form, you can do this using their API. The important thing is that you need to register with the delivery service to have your own API key. 

I followed the instructions on connection via SimpleshopDocumentation of the Zásilkovna.

How do you do that? First, create three fields: The first one will be radio buttons to select the transport option and name it with the ID transport. The field name and value are separated by a character |, so name the Mailroom option as "Mailroom by CR|mailroom" (see screenshot).

Screenshot 2024 10 31 at 21.56.33

The second field will be a text field with ID shipping_address without field name - will be used for address. The third will be a hidden field with ID shipping_id - this will be used to store the exact branch ID.

Then insert the following code via HTML element.

				
					
    .packeta-selector-open {
        background-color: black;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        margin-top: 10px;
        margin: 10px; /* Margin around button */
    }

    .packeta-hidden {
        display: none; /* Hide fields for user */
    }

    .selected-pickup-point {
        margin: 10px; /* Margin around the text about the selected branch */
        font-size: 16px;
        color: #333;
    }




 /* insert your API key here !!!

				
			

That's it - now, when the user selects shipping via Zásilkovna, a pop-up window opens with the branch selection. You will then receive an email with information about the branch the user has selected.

Please note that this code only allows you to select a branch - you still need to create the parcel manually in the parcel office.