I happen to know many of the readers of CSS-Tricks are strong web designers and developers. Most of you probably don’t use website builders very often, as you are a website builder. You love the control. You love the possibilities. You want to be close to the metal because that’s your expertise.
But you also know the costs. Everything you chose to yourself piles on to the responsibility you take on. Technical debt. Using a site builder like Wix can dramatically reduce that technical debt, and you might be surprised at how little control you have to give up. The following post is about some new and very powerful new features of Wix right up that alley.
One of the cool features of Wix Code is the ability to separate your site’s design and layout from its content. This means you can create and maintain your information in a database and then have your pages dynamically retrieve and display this information in whatever way you like.
Let’s take an in-depth look at what you can do with the Wix Code database, including the types of information you can store, ways you can manipulate data with code, and how you can dynamically display the information on your site.
Throughout this article, we’ll use a simplified example of an art school that stores and displays information about its courses and teachers.
The Wix Code Database
Like all databases, the Wix Code database is made up of individual tables, which we call collections. In our example of the art school (see image below), we have two collections, one each for the courses and teachers.
data-recalc-dims=1
You can create as many collections as you need and populate them with a near unending amount of data. A robust permissions model means you have complete control over who can access your information and what they can do with it.
You can work directly with your Live data, which is the information your visitors see when they view your pages. You can also work with Sandbox data, so you can try stuff out without affecting your live site. You can sync with them at any time.
Populating Collections
You have several options for populating your collections. You can manually enter data directly in the Wix Content Manager, either to your Live data or your Sandbox data.
If you’re an Excel ace, you can do all the work in Excel (or whatever spreadsheet program you prefer), save your sheet as a CSV file, and then import it into the Wix Code database. In fact, you can create your entire collection this way, schema and all. You can import to your Live data or your Sandbox data.
You can also export your Wix data to CSV files. If you make sure to include the built-in ID system field, you will be able to modify your content in your spreadsheet and then re-import it into your Wix Code database so that each record, or what we call item, is updated.
A third option is to build a form to capture user input and store it in your database.
Using External Databases
If you already have a database somewhere, you might be thinking that you don’t want to recreate it in Wix. The good news is that you don’t have to. As long as your database exposes an API, you can access it from your Wix site.
For simple applications, you can use the wix-fetch module—an implementation of the standard JavaScript Fetch API—to access your external database with an HTTP request and use that data in your Wix site’s pages.
You can also pair the wix-fetch module with another Wix module, wix-router, that lets you control the routing of incoming requests. Using the functionality provided by both of these modules, you can create SEO-friendly dynamic pages that show different data depending on the URLs used to reach them.
For example, you can design a single member profile page that can be used by all of your site’s members.
Using wix-router and wix-fetch you can write code that pulls information from incoming requests for the profile page, queries an external database to retrieve the information for the page, and then injects that data into the profile page. You can even add security to your page by using the wix-users module.
So if you create another page for users to update their profile pages, you can check who is trying to access it and only allow users to update their own profiles.
Data Hooks
You can add hooks to actions on your collections using the wix-data API.
For example, in our Teachers collection, we have two separate fields: First name and Last name. To make displaying names on our pages easier, we also want to have one field that has both names together. To do this, we can add a beforeInsert hook to our Teachers collection that hooks into the insert action, reads the contents of the First name and Last name fields, and then concatenates them and populates the Full name field.
Modeling Your Data
Now that we’ve covered the database itself, let’s talk about modeling your data in the Wix Code database.
Collection Schemas
Like all databases, each collection has a schema to define its fields. All standard field types are supported, including text, image, boolean, number, date and time, and rich text.
There is also a field type specifically designed for URLs. It automatically formats the URL into clickable links that you can add to your pages. For example, teachers in your school could supply the URL of their portfolio website, and you could include that link on their dynamic page.
You can also use the document field type to store a wide range of file types. You can allow your users to download files stored in your collections (such as reading lists for each course) or to upload their own files.
ID Fields and Primary Fields
Each collection has an _ID field, which is the primary key for that table. Collections also have a primary field (indicated by a lock icon), which is the display key for each item.
When you create joins using reference fields (see the next section), the values come from the primary field. The reference itself uses the _ID field, of course. If you plan on using reference fields, it’s a good idea to make sure the data you store in the primary field is unique.
data-recalc-dims=1
Reference Fields
Reference fields create a connection between collections that is defined in the collection schema itself. This is similar to foreign keys in relational databases.
Each reference field points to a specific collection. The value that is displayed in the reference field in each item in the collection is taken from the value of the primary field of the referenced collection.
data-recalc-dims=1
In our example, we created a reference field in our Courses collection that points to our Teachers collection so that we can indicate who teaches each class.
The advantage of reference fields is three-fold. First, they help maintain data integrity because their value is taken directly from the referenced collection. Second, they help eliminate data duplication, which we all know is the enemy of good database design. And third, when we create our page layouts, reference fields let us access information in the referenced collection as well as in the main collection we are using. This allows us to create master-detail pages, such as a list of all the courses taught by each teacher.
Creating Pages from Your Content
Of course, storing and maintaining data is nice, but the real point of having a website is displaying content to visitors. So let’s talk about how that works with Wix Code.
Back to our art school example. We have two different types of information: courses and teachers. So you could start by designing a page layout to display all the information about each of the courses. Then you might want to create a master-detail page that lists all of your teachers and the courses they teach.
Setting Up the Dynamic Page
When you create dynamic pages in Wix Code, you first define the URL that will control what content your page can display. Some URLs can specify a single item and others can specify an entire category of items (such as all courses of a certain level).
You set up the URL pattern by picking a field (or fields) from your collection. One URL pattern you could use to display each of your courses could be https://…/Courses/. Each time a different page is generated, the field is replaced by the actual title of the item being retrieved. So one-course page’s URL would be https://…/Courses/Art-History, and another course page’s URL would be https://…/Courses/Intro-to-Painting.<br /> Then you design your page layout in the Editor, putting different elements on the page and connecting the ones you want to use to display dynamic data to fields in your collection. You can use text elements, images, buttons, strips, and a variety of multi-item elements like repeaters, tables, and galleries. If you want some items to remain static, such as titles, just don’t connect them.<br /> The image below is an example of what a dynamic page layout for our Courses page could look like in the Editor. The square brackets indicate that this content is dynamic.<br /> <img src=https://i2.wp.com/css-tricks.com/wp-content/uploads/2018/01/course.png?ssl=1 alt data-recalc-dims=1 data-lazy-src=https://i2.wp.com/css-tricks.com/wp-content/uploads/2018/01/course.png?ssl=1&is-pending-load=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 class= jetpack-lazy-image><img src=https://i2.wp.com/css-tricks.com/wp-content/uploads/2018/01/course.png?ssl=1 alt= data-recalc-dims=1 /><br /> The actual dynamic pages could look something like these.<br /> <img src=https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/01/image10.png?ssl=1 alt data-recalc-dims=1 data-lazy-src=https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/01/image10.png?ssl=1&is-pending-load=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 class= jetpack-lazy-image><img src=https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/01/image10.png?ssl=1 alt= data-recalc-dims=1 /><br /> Note how both pages have the same layout. However, some of the elements’ contents have been replaced with the information about the courses from our database. The page background is also different for each page. The container box even enlarged automatically to include the larger course description for the Art History course.<br /> Note especially how the name and picture of each course’s teacher appear on the page, even though the details about each instructor are stored in a separate collection from the data about the course. This is because we connected the Courses and the Teachers collections using a reference field, which gave us access to information about the specific teacher for each course.<br /> Finally, note how the page URLs are unique to each page. In essence, each of these pages is unique. And Wix Code creates them automatically for us. If we add a new course to our collection, a page for it is automatically created.<br /> Master-Detail Pages<br /> Another cool thing you can do with Wix Code is to create master-detail pages. For example, you could create a page to act as an index that lists all the teachers in your school and the courses each one teaches. This would require pulling information from more than one collection (Courses and Teachers) and then filtering the courses by their teacher so that only the relevant courses are displayed.<br /> Our database collections are set up in a many-to-one structure; each teacher has many courses they teach. Whereas above we displayed each course and their individual teacher, now we are taking the opposite approach and displaying each teacher and all their courses.<br /> Below is a sample of what an index page with master-detail information might look like using a repeater.<br /> <img src=https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/01/image6.png?w=350&ssl=1 alt data-recalc-dims=1 data-lazy-src=https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/01/image6.png?w=350&is-pending-load=1#038;ssl=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 class= jetpack-lazy-image><img src=https://i0.wp.com/css-tricks.com/wp-content/uploads/2018/01/image6.png?w=350&ssl=1 alt= data-recalc-dims=1 /><br /> Because the repeater is connected to both our Teachers collection and our Courses collection, it can display the information from both collections dynamically. The embedded table element in each repeater item displays the list of courses each teacher teaches.<br /> Summary<br /> We’ve presented some high-level information about the Wix Code database and some of the capabilities it offers for storing your data, manipulating your data, and displaying your data dynamically to your visitors. We’ve also illustrated how the options available to you are controlled in part by the decisions you make when you create your collections and connect them. Before you get started creating your Wix Code database, it’s a good idea to spend some time thinking about what kind of information you have and how you want to display it so that you can most effectively model your data.<br /> <img src=https://i0.wp.com/www.wix.com/campaign-tracker/1.gif?ssl=1 data-recalc-dims=1 data-lazy-src=https://i0.wp.com/www.wix.com/campaign-tracker/1.gif?ssl=1&is-pending-load=1 srcset=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 class= jetpack-lazy-image><img src=https://i0.wp.com/www.wix.com/campaign-tracker/1.gif?ssl=1 data-recalc-dims=1></p> <span class="cp-load-after-post"></span></div><div class="post-meta wf-mobile-collapsed"><div class="entry-meta"><span class="category-link">Categories: <a href="https://skynetch.com/category/latest-technologies/" >Latest technologies</a>, <a href="https://skynetch.com/category/software-applications/" >software applications</a>, <a href="https://skynetch.com/category/ui-ux-layout/" >UI / UX layout</a>, <a href="https://skynetch.com/category/uncategorized/" >Uncategorized</a></span><a class="author vcard" href="https://skynetch.com/author/admin/" title="View all posts by admin" rel="author">By <span class="fn">admin</span></a><a href="https://skynetch.com/2020/08/25/" title="11:23 am" class="data-link" rel="bookmark"><time class="entry-date updated" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></a></div><div class="entry-tags">Tags: <a href="https://skynetch.com/tag/design/" rel="tag">Design</a><a href="https://skynetch.com/tag/marketing-and-seo/" rel="tag">Marketing and SEO</a><a href="https://skynetch.com/tag/mobile-apps/" rel="tag">Mobile apps</a><a href="https://skynetch.com/tag/quality/" rel="tag">Quality</a><a href="https://skynetch.com/tag/seo/" rel="tag">Seo</a><a href="https://skynetch.com/tag/software/" rel="tag">Software</a><a href="https://skynetch.com/tag/sofware-applications/" rel="tag">Sofware applications</a><a href="https://skynetch.com/tag/technology/" rel="tag">Technology</a><a href="https://skynetch.com/tag/web-applications-development-web-applications/" rel="tag">Web applications development Web applications</a><a href="https://skynetch.com/tag/website-creation/" rel="tag">Website creation</a></div></div><div class="single-share-box"> <div class="share-link-description">Share this post</div> <div class="share-buttons"> <a class="facebook" href="http://www.facebook.com/sharer.php?u=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F1861%2F&t=The+Wix+Code+Database+and+Data+Modeling" title="Facebook" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on Facebook</span><span class="screen-reader-text">Share on Facebook</span></a> <a class="twitter" href="https://twitter.com/share?url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F1861%2F&text=The+Wix+Code+Database+and+Data+Modeling" title="Twitter" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Tweet</span><span class="screen-reader-text">Share on Twitter</span></a> <a class="pinterest pinit-marklet" href="//pinterest.com/pin/create/button/" title="Pinterest" target="_blank" data-pin-config="above" data-pin-do="buttonBookmark"><span class="soc-font-icon"></span><span class="social-text">Pin it</span><span class="screen-reader-text">Share on Pinterest</span></a> <a class="whatsapp" href="https://api.whatsapp.com/send?text=The%20Wix%20Code%20Database%20and%20Data%20Modeling%20-%20https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F1861%2F" title="WhatsApp" target="_blank" data-action="share/whatsapp/share"><span class="soc-font-icon"></span><span class="social-text">Share on WhatsApp</span><span class="screen-reader-text">Share on WhatsApp</span></a> <a class="linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fskynetch.com%2F2020%2F08%2F25%2F1861%2F&title=The%20Wix%20Code%20Database%20and%20Data%20Modeling&summary=&source=Skynetch" title="LinkedIn" target="_blank" ><span class="soc-font-icon"></span><span class="social-text">Share on LinkedIn</span><span class="screen-reader-text">Share on LinkedIn</span></a> </div> </div> <div class="author-info entry-author"> <span class="author-avatar no-avatar"></span> <div class="author-description"> <h4><span class="author-heading">Author:</span> admin</h4> <a class="author-link" href="http://skynetch.com" rel="author">http://skynetch.com</a> <p class="author-bio"></p> </div> </div> <nav class="navigation post-navigation" role="navigation"><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"><span class="nav-previous disabled"></span><a class="back-to-list" href="/agency/"><i class="dt-icon-the7-misc-006-1" aria-hidden="true"></i></a><span class="nav-next disabled"></span></div></nav><div class="single-related-posts"><h3>Related Posts</h3><section class="items-grid"><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2459/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2459/">Learning from Lego: A Step Forward in Modular Web Design</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2475/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2475/">Propelling developer experience through configuration</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2491/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2491/">CSS-Tricks Chronicle XXIX</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2507/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2507/">Experimenting with Color Fonts</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2523/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2523/">The Different Ways of Getting SVG Out of Adobe Illustrator</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div><div class=" related-item"><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/275/" style="width:110px; height: 80px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/275/">mask-repeat</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></div></section></div> </article> </div><!-- #content --> <aside id="sidebar" class="sidebar"> <div class="sidebar-content widget-divider-off"> <section id="search-2" class="widget widget_search"> <form class="searchform" role="search" method="get" action="https://skynetch.com/"> <label for="the7-search" class="screen-reader-text">Search:</label> <input type="text" id="the7-search" class="field searchform-s" name="s" value="" placeholder="Type and hit enter …" /> <input type="submit" class="assistive-text searchsubmit" value="Go!" /> <a href="" class="submit"></a> </form> </section><section id="presscore-blog-posts-2" class="widget widget_presscore-blog-posts"><div class="widget-title">Recent posts</div><ul class="recent-posts round-images"><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2505-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2505-2/">Input Masking</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2498-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2498-2/">Web Animation Essentials: CSS Animations and Transitions</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2488-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2488-2/">Lazy-Loading Disqus Comments</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2483-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2483-2/">CSS Shorthand Syntax Considered an Anti-Pattern</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2482-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2482-2/">Google Analytics Can Show You Screen Resolution ? Browser Window</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li><li><article class="post-format-standard"><div class="mini-post-img"><a class="alignleft post-rollover no-avatar" href="https://skynetch.com/2020/08/25/2479-2/" style="width:40px; height: 40px;" aria-label="Post image"></a></div><div class="post-content"><a href="https://skynetch.com/2020/08/25/2479-2/">Prefer `defer` Over `async`</a><br /><time class="text-secondary" datetime="2020-08-25T11:23:33+00:00">August 25, 2020</time></div></article></li></ul></section><section id="presscore-portfolio-2" class="widget widget_presscore-portfolio"><div class="widget-title">Recent projects</div></section> </div> </aside><!-- #sidebar --> </div><!-- .wf-container --> </div><!-- .wf-wrap --> </div><!-- #main --> <!-- !Footer --> <footer id="footer" class="footer solid-bg"> <div class="wf-wrap"> <div class="wf-container-footer"> <div class="wf-container"> <section id="presscore-custom-menu-one-3" class="widget widget_presscore-custom-menu-one wf-cell wf-1-3"><ul class="custom-menu enable-bold show-arrow"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-328 first"><a href="#!/up">Home</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-329"><a href="#!/about">About Us</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-410"><a href="#!/services">Services</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-331"><a href="#!/team">Team</a></li><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-332"><a href="#!/contact">Contact</a></li><li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-8497"><a href="https://skynetch.com/blog/">Blog</a></li></ul></section><section id="presscore-contact-info-widget-2" class="widget widget_presscore-contact-info-widget wf-cell wf-1-3"><div class="widget-title">Contact Info</div><ul class="contact-info"><li><span class="color-primary">Phone number:</span><br />001 234 56 78</li><li><span class="color-primary">Address:</span><br />SoHo 94 Broadway St New York, NY 1001</li><li><span class="color-primary">Mail:</span><br />hello@dream-theme.com</li><li><span class="color-primary">Business hours:</span><br />Mon. - Fri. 10:00 - 19:00</li></ul><div class="soc-ico"><p class="assistive-text">Find us on:</p><a title="Facebook page opens in new window" href="#" target="_blank" class="facebook"><span class="soc-font-icon"></span><span class="screen-reader-text">Facebook page opens in new window</span></a><a title="Twitter page opens in new window" href="#" target="_blank" class="twitter"><span class="soc-font-icon"></span><span class="screen-reader-text">Twitter page opens in new window</span></a><a title="Dribbble page opens in new window" href="#" target="_blank" class="dribbble"><span class="soc-font-icon"></span><span class="screen-reader-text">Dribbble page opens in new window</span></a><a title="YouTube page opens in new window" href="#" target="_blank" class="you-tube"><span class="soc-font-icon"></span><span class="screen-reader-text">YouTube page opens in new window</span></a></div></section><section id="presscore-contact-form-widget-2" class="widget widget_presscore-contact-form-widget wf-cell wf-1-3"><div class="widget-title">Any questions? Get in touch!</div><form class="dt-contact-form dt-form" method="post"><input type="hidden" name="widget_id" value="presscore-contact-form-widget-2" /><input type="hidden" name="send_message" value="" /><input type="hidden" name="security_token" value="34efe4c56db6a54785ba"/><div class="form-fields"><span class="form-name"><label class="assistive-text">Name *</label><input type="text" class="validate[required]" placeholder="Name *" name="name" value="" aria-required="true"> </span><span class="form-mail"><label class="assistive-text">E-mail *</label><input type="text" class="validate[required,custom[email]]" placeholder="E-mail *" name="email" value="" aria-required="true"> </span><span class="form-telephone"><label class="assistive-text">Telephone</label><input type="text" placeholder="Telephone" name="telephone" value="" aria-required="false"> </span></div><span class="form-message"><label class="assistive-text">Message</label><textarea placeholder="Message" name="message" rows="3" aria-required="false"></textarea> </span><p><a href="#" class="dt-btn dt-btn-m dt-btn-submit" rel="nofollow"><span>Submit</span></a><input class="assistive-text" type="submit" value="submit"></p></form> </section> </div><!-- .wf-container --> </div><!-- .wf-container-footer --> </div><!-- .wf-wrap --> <!-- !Bottom-bar --> <div id="bottom-bar" class="logo-left" role="contentinfo"> <div class="wf-wrap"> <div class="wf-container-bottom"> <div id="branding-bottom"><a class="" href="https://skynetch.com/"><img class=" preload-me" src="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png" srcset="https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_27x27.png 27w, https://skynetch.com/wp-content/uploads/2020/07/skynetch_logo_57x57.png 57w" width="27" height="27" sizes="27px" alt="Skynetch" /></a></div> <div class="wf-float-left"> © 2020 Skynetch Custom Software Company </div> <div class="wf-float-right"> <div class="bottom-text-block"><p><span class="paint-accent-color">mail:</span> support@skynetch.com<span class="paint-accent-color" style="padding-left: 20px">tel:</span> +52 55 4351 9960</p> </div> </div> </div><!-- .wf-container-bottom --> </div><!-- .wf-wrap --> </div><!-- #bottom-bar --> </footer><!-- #footer --> <a href="#" class="scroll-top"><span class="screen-reader-text">Go to Top</span></a> </div><!-- #page --> <script type="text/javascript" id="modal"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1611311766 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="info-bar"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1611311766 * 1000 ; var diffms = (now - gmt) ; </script> <script type="text/javascript" id="slidein"> document.addEventListener("DOMContentLoaded", function(){ startclock(); }); function stopclock (){ if(timerRunning) clearTimeout(timerID); timerRunning = false; //document.cookie="time=0"; } function showtime () { var now = new Date(); var my = now.getTime() ; now = new Date(my-diffms) ; //document.cookie="time="+now.toLocaleString(); timerID = setTimeout('showtime()',10000); timerRunning = true; } function startclock () { stopclock(); showtime(); } var timerID = null; var timerRunning = false; var x = new Date() ; var now = x.getTime() ; var gmt = 1611311766 * 1000 ; var diffms = (now - gmt) ; </script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/main.min.js?ver=9.2.2' id='dt-main-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/plugins/go_pricing/assets/js/go_pricing_scripts.js?ver=3.3.17' id='go-pricing-scripts-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/plugins/dt-the7-core/assets/js/post-type.min.js?ver=2.5.3.1' id='the7-core-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-includes/js/wp-embed.min.js?ver=5.5.3' id='wp-embed-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/jquery.validationEngine.js?ver=9.2.2' id='the7-form-validator-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/atoms/plugins/validator/languages/jquery.validationEngine-en.js?ver=9.2.2' id='the7-form-validator-translation-js'></script> <script type='text/javascript' src='https://skynetch.com/wp-content/themes/dt-the7/js/dt-contact-form.min.js?ver=9.2.2' id='the7-contact-form-js'></script> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> <div class="pswp__bg"></div> <div class="pswp__scroll-wrap"> <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter"></div> <button class="pswp__button pswp__button--close" title="Close (Esc)" aria-label="Close (Esc)"></button> <button class="pswp__button pswp__button--share" title="Share" aria-label="Share"></button> <button class="pswp__button pswp__button--fs" title="Toggle fullscreen" aria-label="Toggle fullscreen"></button> <button class="pswp__button pswp__button--zoom" title="Zoom in/out" aria-label="Zoom in/out"></button> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"></div> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"></div> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)" aria-label="Previous (arrow left)"> </button> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)" aria-label="Next (arrow right)"> </button> <div class="pswp__caption"> <div class="pswp__caption__center"></div> </div> </div> </div> </div> </body> </html>