In this post, I'll show you how to integrate What3Words into your Knack application for precise location management. What3Words provides a unique method to identify any location on Earth within a 3m square, which is especially useful for project management and deliveries. By utilising What3Words, you can streamline your operations and provide precise location information to your team and clients.
If you have questions or need further assistance, feel free to reach out!
Sign up to Knack for Free - Affiliate Link
Add to CSS section
/*w3w custom button */.custom-button {
padding: 5px 5px; /* Increased padding for better spacing */
background-color: white; /* White background for the outline effect */
color: #E11F26; /* Text color matching the original button */
text-align: center;
border: 2px solid #E11F26; /* Border to create an outline */
border-radius: 5px;
text-decoration: none; /* Remove underline */
transition: all 0.5s ease; /* Smooth transitions for hover effects */
display: inline-block; /* Make the link behave like a button */
}
.custom-button:hover {
background-color: #E11F26; /* Change background color on hover */
color: white; /* Change text color on hover */
}
When adding the above code to your CSS section you need to ensure that the class name you give to this snippet of code is the same as you use in the html code in the field label instructions.
In the video, I show you the html snippet below. Please note that the class name is the same as above in blue. The class name in the CSS can be whatever you want. I would suggest something like "w3w custom button", rather than my generic "custom button" class name.
Add this to the form instructions description:
<a href="https://what3words.com/lifts.dust.burns" target="_blank" class="custom-button"> What3Words Website </a>
The html code will use the CSS settings based on the class name
Comments