PLEASE NOTE: We've been as thorough as we can with this information, but if you require further information beyond what is in this document please just get in touch. And remember, we can always be commissioned to create pages for you.
WHAT’S REQUIRED?
An understanding of HTML, CSS and JavaScript or JQuery is beneficial to actually develop and manipulate the page, however, there are some templates to get started. You can also send us the landing page code you want to put within Databowl. To create an LP you first need to set up a campaign in Databowl, selecting the ‘landing page’ option. A landing page will typically have a form that is filled out by a user, this is where Databowl fields come into play. The information submitted generates a lead within Databowl.
Terminology
Pages VS Partials
In Databowl, a page is something the user actually sees whereas a partial is a page segment that is pulled into a page using different yield tags. It’s beneficial to work on partials separately and use them within your design as it segments pages into working blocks.
USING HTML, CSS AND JAVASCRIPT/JQUERY
A typical LP in Databowl is made up of five individual files: Site-layout, header, footer, index and thank-you. All in which can have its individual code amended to build/design pages. The first three files are page partials in which content is pulled in to other pages in use. Site-layout wireframes the design which allows you to display different page partials depending on what you want to do. The other two are pages which can be navigated to on a web browser to see content. Everything works together.
<yield name="header"></yield>
This will pull in the header partial. You could have other page partials to be pulled in as well.
<yield name="content"></yield>
Pulls in all main content from form fields, and other page information.
<yield name="footer"></yield>
Pulls in all footer content required.
CSS: Ideally, keep all CSS within the assets section. Ideally, use comments to segment your CSS into an easily readable format. If you are using a framework such as Bootstrap, you can implement this using a CDN link (see Bootstraps online documentation). Then you can use their classes within your HTML to build (and style) your page.
JQuery: Manipulate your page with this JavaScript framework. You can set up onClick events for example.
DATABOWL FIELDS
A campaign will have a selection of fields. These fields (can) relate to what will be displayed in the developed LPs form. It’s a good idea to set out which fields are needed first for a particular campaign.
Once the required fields are setup, ensure the ‘field definitions’ are set to what is required. These basically allow you to choose what type of field is required. The choice is yours! Note that when you add a new field to a campaign these will be added in the field definitions. So you may need to update them depending on what you need.
The key thing: one databowl field = one field yield. One field yield has a label, placeholder and can have a multitude of inputs (single selection or multiple selection for example). Fields can be switched on and off when working on a HTML page, but you will need to synchronize any HTML to ensure these are displayed.
One databowl field may have many options, but only one field yield will be used to display the options. Field yields must be contained within a fieldset tag or an error will be thrown when saving the page. First name will just be one singular textual input, however a person’s title will be one of many options. The one field will be yielded into the page with its yield tag.
<fieldset>
<field-yield data-field="F_3_FIRSTNAME"></field-yield>
<field-yield data-field="F_4_TITLE"></field-yield> → Has multiple options such as Mr, Mrs, Ms, Miss
</fieldset>
CUSTOM FIELDS
Field templates can be changed by going to Sharebowl > templates. You can make changes to form rows and fields using JQuery and CSS within your landing page designs. A popular change is to create iconography for radio buttons as opposed to standard label and radio button format.