Overview
Custom forms is an advanced feature that allows you to customise the information and styling of a popup after clicking on a pin. You can create many variations of a custom form and select which one you like. Custom forms uses HTML and CSS for styling and layouts with the addition to Twig, an easy to learn PHP template engine. This is used for requesting the data from the server for a specific pin (such as contacts, transactions, statuses, etc.) and displaying it inline within the HTML tags.
If you do not know enough HTML, CSS, and Twig. Then you can just use our template to follow along below. There are some resources at the bottom of this page if you’d like to learn more about creating your own.
Enabling Custom Forms
If you do not have Custom Forms enabled, then simply hover over Map Settings on the side panel and select Advanced Settings.
Once you are on the page, go to the Features tab. Custom Forms will be disabled by default, so just select enable in the drop down menu. You have now enabled Custom Forms. Now go back to Map View on the side panel.
If you want to customise the internal popup, then you should select the Info Popup drop down and select which one you want after you have created one.
Using Custom Forms
Creating a custom form is easy. Simply hover over Map Settings again and you should now see Custom Forms added. Select Custom Forms and you should see a popup window called Forms. You can create as many custom forms as you like. To create one, just select the green button New Forms.
This will display a text editor. Give it a name and paste this into it.
<div style="max-width: 400px">
{% for t in transactions %}
<div style="display: flex; display: -webkit-flex; flex-wrap: wrap; flex-direction: row; justify-content: start; align-items: start;">
<div style="margin-right: 10px;">
<img src="http://accede.com.au/wp-content/uploads/sites/13/2015/09/accedelogo.jpg" width="75" alt="" />
</div>
<div>
<h3 style="color: #0079ae"><b>{{t.Status.Statustext}}</b></h3>
<h5 style="text-align: left; max-width: 300px">{{location.Formattedaddress}}</h5>
</div>
</div>
<hr>
<h5 style="color: #000168"><b>Contact Us</b></h5>
<p style="max-width:300px">{{t.CustomFields['email-8']}}</p>
<p style="max-width:300px">{{t.CustomFields['website-6']}}</p>
<p style="max-width:300px">{{t.CustomFields['phone-8']}}</p>
<h5 style="color: #000168"><b>Memo</b></h5>
<p style="max-width:300px">{{t.CustomFields['memo-2']}}</p>
{% endfor %}
</div>
Once you have pasted it in, select the blue button Save. You should now see the custom form saved on the list.
You have now created your first custom form. The next step is to link it to your embedded maps. We have a support article that can walk you through if you do not know how to embed your map already. Otherwise, skip to the next section.
Setting up Embedded Maps
This is the last step. You now just need to enable the Info Popup in the drop down menu in API and Embedding.
Wrapping up
You should now have Embedded Maps working. If some data does not show up i.e. custom fields, then that is okay. You just need to change the selectors within Twig’s syntax.
Resources:
HTML – https://developer.mozilla.org/en-US/docs/Web/HTML
CSS – https://developer.mozilla.org/en-US/docs/Web/CSS
Twig – https://twig.symfony.com/