When designing forms, surveys, pages, and messages within Kizen, you'll be using the Kizen builder. 

The structure of the builder includes Sections, Rows, Columns, and Elements

The hierarchy goes as follows: Rows are located within Sections, Columns are located within Rows, and Elements are located within Columns or Rows

Sections, Rows, and Columns can be a variety of widths and colors to build out dynamic and appealing designs. 

Sections, Rows, and Columns allow you to set the overarching structure, format, and design, while Elements make up the main content and fields of that form, survey, page, or email.

The various Elements you can include on your form, survey, page, or email are located under the following categories within the content builder on the left:

  • Company Fields (Form or Survey Only)

  • Contact Fields (Form or Survey Only)

  • Form Fields (Forms Only)

  • Commerce (Form or Survey Only)

  • Attachments (Email Only)

  • Text

  • Images

  • Dividers

  • Buttons

  • Social

  • HTML

To access the content builder, click "Add Content."

Depending on what you're designing (a form, survey, page, or message), you'll see a different category list under the content builder.

Scroll over a category to see what is available to add to your design.

To add content, drag fields to the preferred Section, Row, and Column of your page.

To edit a Section, Row, Column, or Element, click onto that field and the appropriate content editor will open up within the left menu.

To build and design your forms, surveys, pages, or emails, follow the steps below: 

  • Set your Body Settings, which will be the foundation of your design

  • Use Section, Row, and Column settings to build out the structure and design of your page

  • Add Content Elements to build out the content of your design

  • Set your Branding in your Business Settings to be pulled in when using Kizen templates

Set Your Body Settings

Body Settings allow you to set the Background Color and text color, size, and font (for forms, surveys, and pages) of your overall design. 

Body Settings, especially Background Color, can be viewed as the foundation of your design. The Background Color you set in your body settings will apply to the entire width and height of your design and will be "underneath" any other colors you set within your Sections, Rows, Columns, and Elements

For forms, surveys, and pages, the text settings will apply to all field labels and text, unless otherwise changed (applicable to the text block only).

To set the foundation of your design, click Body on the left menu to edit the settings of the overall form, survey, page, or email. 

Choose the Background Color and Text Color by selecting from the drop-down menu, or by entering a specific hex code. Click Choose.

To set the text size, click the up and down arrows, or type in your font size. Choose your font by selecting a font from the drop-down menu. 

Show Gridlines by clicking the checkbox to see the outlines of each Section, Row, Column, and Element on your page. This will help you visualize exactly what aspect of your design needs tweaking or editing. 

Sections will be outlined in blue, Rows and Columns in orange, and Elements in green. 

Device Preview lets you see what your design looks like on desktops, tablets, and mobile devices. All designs built within the Kizen builder will be optimized for these screen sizes. 

After setting your design's Body Settings, it's time to build your design using Sections, Rows, Columns, and Elements.

Use Section, Row, and Column Settings

Sections, Rows, and Columns create the structure of your design. By adjusting the color, background image, width, and height of these pieces, you can create dynamic and appealing designs. 

We'll show you first how to add Sections, Rows, and Columns, followed by how to edit them. 

Adding Sections

You can have multiple Sections on a page. 

Your design will default to having one Section. To add more Sections to your design, hover over Section in the content builder and drag the Blank Section to where you'd like it on the page.  

In order to add Elements into your design, each Section needs to have at least one Row, which is why when you add a Section, it will default to including one Row

Adding Rows (and Columns)

When adding Rows, you're able to choose the number of Columns you'd like in that Row as well as the width of each Column. Combining different row varieties will help you create dynamic layouts. 

To add a row, hover over Rows, and drag the Row/Column combination of your choice into a Section of a page.

Although you can choose from a variety of column widths, you can edit the width of the columns by dragging the column separator. 

Editing Sections, Rows, and Columns

To edit an aspect of your design, click on it and the appropriate editor will open up on the left.

When you click on a row, you'll be able to edit both the row and the individual columns within that row. 

For Sections, you can:

  • Edit the Width

  • Set a Max Width

  • Select for the Section to take up the Full Height

  • Edit the Background Color or choose an Image

  • Or edit the Margin, Padding, and Border

For Rows, you can:

  • Edit the Background, Max Width, Margin, Padding, and Border.

For Columns, you can:

  • Edit the Background and Padding.

Enabling Full Height (Sections)

You have the option to enable Sections to take up the entire height of a page. To enable Full Height, click the checkbox to select. 

Editing the Width (Sections)

To edit the Width, use the up and down arrows or enter the width in pixels. You can set different widths for different Sections

Adding a Background Image (Sections)

You can add images to the background of your Sections to create beautiful designs. To add an image to your background, click Choose Image. 

Select an image from your Image Library, or click Upload a File, to select an image from your computer.

Once an image is selected, click Save Selection.

From here you're able to adjust the following image settings:

  • Size: Choose whether you'd like the image to be its default size (Auto), make the image as large as possible to cover the entirety of the background (Cover), or scale the image to the largest size so that both its width and height fit inside the content area (Contain).

  • Repeat: Choose whether you'd like the image to repeat both horizontally and vertically (On), just horizontally (Horizontal), just vertically (Vertical), or not at all (Off).

  • Horizontal Position: Choose whether you'd like the image horizontally aligned to the Left, Center, or Right.

  • Vertical Position: Choose whether you'd like the image vertically aligned to the Top, Center, or Right. 

Note: As a reminder, Rows are laid on top of Sections. If you'd like your background image to peek out underneath your Rows, you'll want to ensure your Rows don't have a Background Color selected (like our example above).

Editing the Background (Sections, Rows, and Columns)

To edit the Background Color, select a color from the drop-down menu, or enter a specific hex code.

Editing Max Width (Sections and Rows)

To edit the Max Width, use the up and down arrows or enter the width in pixels. 

Editing the Margin, Padding, and Border

The Margin is the outer space of an element, while Padding is the inner space of an element. Margin is the space outside the Border of an element, while Padding is the space that is inside the Border

If you've set a Background Color of a Row, expanding the Margin will not expand the Background Color, because it is outside the Border of your Row. Expanding the Padding will expand the Background Color because it's within the Border of your Row

To toggle between editing the Margin, Padding, or Border, click which one you'd like to edit.

Editing the Margin (Sections and Rows) 

To edit the Margin, use the up and down arrows, or enter the desired top and bottom Margin in pixels. 

Editing the Padding (Sections, Rows, and Columns)

To edit the Padding, first select if you'd like the same Padding on the top, bottom, left, and right by selecting Same All Sides

Edit the Padding by using the up and down arrows, or by entering the Padding in pixels. 

Editing the Border (Sections and Rows)

To edit the Border, first select if you'd like the same size Border on the top, bottom, left, and right by selecting Same All Sides

Add the size of the Border by using the up and down arrows, or by entering the size in pixels. 

Choose the Border color by selecting from the drop-down menu, or by entering a specific hex code. Click Choose to set your Border.

Now that you know how to use Sections, Rows, and Columns, you're ready to build out the content of your design using Content Elements

Add Content Elements

There are a variety of Content Elements that you can use when building out your design:

  • Company Fields (Form or Survey Only)

  • Contact Fields (Form or Survey Only)

  • Form Fields (Forms Only)

  • Attachments (Email Only)

  • Text

  • Images

  • Dividers

  • Buttons

  • Social

  • HTML

To access the content builder, click "Add Content" from your form, survey page, or email.

Depending on what you're designing, you'll see a different category list under the content builder.

Scroll over a category to see what fields are available to add to your form, survey page, or message.

To add content, drag fields to the preferred Section, Row, and Column of your page. Drag-and-drop to re-order or move fields. 

To edit or customize an Element, click onto that field and the appropriate content editor will open up within the left menu.

Within the builder, each category will provide you with a few different design options, or Elements, and each Element is specifically customizable. 

With each Element, you're able to edit the Background Color, Margin, Padding, and Border to further design your page. 

We'll go over how to customize each available Element, followed by how to edit the Background, Margin, Padding, and Border of each. 

Company and Contact Fields 

Company Fields allow you to capture basic company information as well as any custom company fields you've set.

To add a Company Field, click Add Content, hover over Company Fields, and drag the field of your choice into a Column or Row

Contact Fields allow you to capture basic contact information as well as any custom contact fields you've set

To add a Contact Field, click Add Content, hover over Contact Fields, and drag the field of your choice into a Column or Row

Customize Company and Contact Fields

To customize company and contact fields, you can:

  • Edit the Label 

  • Edit the Default Text to add an example response or instructions

  • Make the field required

Form Fields 

Form Fields allow you to capture information specific to the form or survey you're creating. 

The field types that are available to use within your form or survey are: 

  • Rating

  • Short Text

  • Long Text

  • Drop Down 

  • Number

  • Multiple Choice

  • Yes/No Question

  • File Uploader

  • Team Member Selector

To add a Form Field, click Add Content, hover over Form Fields, and drag the field of your choice into a Column or Row

Customizing Form Fields

Request a Rating of 1-5 or 1-10 on your Form or Survey. To customize the Ratings Field, you can:

  • Edit the Label

  • Edit the Left Label and Right Label to identify what a low vs. high rating means 

  • Select the Rating Range from the dropdown to choose between 1-5 or 1-10

  • Make the field required

Request Short Text to capture one line of information. To customize the Short Text field, you can:

  • Edit the Label 

  • Edit the Default Text to add an example response or instructions

  • Make the field required

Request Long Text to capture unlimited information. To customize the Long Text field, you can:

  • Edit the Label 

  • Edit the Default Text to add an example response or instructions

  • Make the field required

Provide a Dropdown to request one selection out of a list of options. To customize the Dropdown field, you can:

  • Edit the Label 

  • Edit the Default Text to add an example response or instructions

  • Make the field required

  • Click Add Choice to create a new option. To edit options, click the edit icon. Delete options by clicking the trash can icon and reorder the options by clicking the up and down arrows. 

Request a Number to capture a variety of set number types. To customize the Number field, you can:

  • Edit the Label 

  • Edit the Default Text to add an example response or instructions

  • Choose whether the field will be a Money Field

  • Set the number of Decimal Points you'd like collected

  • Make the field required

Provide a Multiple Choice question to request one or multiple selections from a list of options. To customize the Multiple Choice field, you can:

  • Edit the Label

  • Click Add Choice to create a new option. To edit options, click the edit icon. Delete options by clicking the trash can icon and reorder the options by clicking the up and down arrows. 

  • Choose whether someone can select more than one option

Provide a Yes/No Question for a simple yes, no, or maybe question. To customize the Yes/No field, you can:

  • Edit the Label

  • Make the field required

  • Choose whether or not to include Maybe as an option

Request a File with the File Uploader field. To customize the File Uploader field, you can:

  • Edit the Label

Note: To access files uploaded, visit Reporting and you'll see all submissions. Click Open Original to access the file. 

Capture a specified Team Member with the Team Member Selector. The options provided under the drop-down menu will be the Team Members you've added to your Kizen account. To customize the Team Member Selector field, you can:

  • Edit the Label 

  • Edit the Default Text to add an example response or instructions

  • Make the field required

For each of the field types, you can edit the design settings for that Element, under Block Settings.

Attachment

This field allows you to place an attachment within an email body. Using the Attachment content block gives you the opportunity to track contact engagement with your attachment and learn over time which attachments have the most benefit to your contacts.

To add an Attachment, click Add Content, hover over Attachment, and drag the Attachment field into a Column or Row of your email.

Customizing the Attachment Field

To select the attachment you'd like to add, click Choose File. 

Select a file from your File Library, or click Upload a File to select a file from your computer. 

Once a file is selected, click Save Selection.

To add multiple files you'll need to add multiple Attachment fields. 

Your attachment will show up within your email wherever you drag it. 

Text 

Text is the basis of your emails and pages. It also allows you to add headings, instructions, and content to your forms.

To add Text, click Add Content, hover over Text, and drag the appropriate text field into a Column or Row.

Customizing Text

A basic text editor will pop up when you click the text field. Here you can edit the font, size, line height, alignment, style, links, tables, or insert a merge field. 

A Merge Field allows you to pull in contact information, company information, team member information, or any custom field information into emails.

The specific field value will be pulled based on who is sending the email or receiving the email. If you add a First Name placeholder in your email, the name will be pulled in from the contact record of each person receiving your email. 

Images 

Adding in high-quality images will allow you to create beautiful and appealing emails, forms, and pages.

To add an Image, click Add Content, hover over Image, and drag the image field into a Column or Row.

Customizing Images

Pulling in the Image field will automatically open up your Image Library.

Select an image from your Image Library, or click Upload a File to select an image from your computer.

Once an image is selected, click Save Selection.

From here you're able to adjust the following image settings:

  • Width and Height: Select Auto for each image to default to the appropriate size of the space. Select Auto for one to adjust the size of the other while keeping the image proportions. Adjusting both sizes will not keep the proportions of the image. Images cannot be bigger than the space they're contained in.

  • Alt-Text: Alt-Text provides a textual alternative to non-text content for use in search engines, for people with disabilities, or for those who don't have image availability. Enter a description of your image here. 

  • URL: Add a URL if you'd like your image to link to a specific page. 

  • Position: Choose whether you'd like the image horizontally aligned to the Left, Center, or Right.

Click Edit Image within the content editor to pull up a Photo Editor.

Dividers

Dividers give you an additional resource to break up and structure your form, survey, email, or page. 

To add a Divider, click Add Content, hover over Dividers, and drag your preferred Divider into a Column or Row.

Customizing Dividers

You can edit the Color and Thickness of your divider. 

To edit the Color, select a color from the drop-down menu, or enter a specific hex code and click Choose.

To edit the Thickness, use the up and down arrows or enter the thickness in pixels. 

Buttons 

Buttons stand out, call people to take action, and are highly customizable for your needs. 

To add a Button, click Add Content, hover over Buttons, and drag your preferred Button into a Column or Row.

Customizing Buttons

To customize your Buttons, you can edit:

  • Action: Choose whether you want your Button to open a page, submit a form, hit the next page in a multi-page survey, or return back to a previous page in a multi-page survey.

  • Position: Choose whether you'd like the image horizontally aligned to the Left, Center, or Right.

  • Font Size: Edit the size of the Button text. 

  • Text: Edit the words on the Button

  • Text Color and Background Color: Edit the colors of the buttons by selecting a color from the drop-down menu, or entering a specific hex code and clicking Choose.

  • Border Radius: Edit the Border Radius to add rounded corners to your button by using the up and down arrows, or entering the radius in pixels.

  • Padding: Editing the Padding will expand or decrease the space within the borders of the Button itself. To edit the Padding, first select if you'd like the same Padding on the top, bottom, left, and right by selecting Same All Sides. Edit the Padding by using the up and down arrows, or by entering the Padding in pixels.

  • Border: To edit the Border of the Button, first select if you'd like the same Border on the top, bottom, left, and right by selecting Same All Sides. Edit the Border size by using the up and down arrows, or by entering the Padding in pixels. Edit the Border color by selecting a color from the drop-down menu, or entering a specific hex code and clicking Choose.

Social

Allow people to easily connect to your social media accounts by adding Social Media buttons to your form, survey, page, or emails. 

To add Social Media Icons, click Add Content, hover over Social, and drag your preferred icon style buttons into a Column or Row of your design.

Customizing Social

You have the ability to add links to your Facebook, Twitter, Pinterest, LinkedIn, Instagram, Medium, Vimeo, and/or YouTube accounts. 

To add an account, simply check or uncheck that platform. Add the appropriate links to your accounts, and click the up and down arrows to reorder your icons. 

You can then edit:

  • Style: Choose Square or Circle icons.

  • Spacing: Edit how far apart each icon is from each other. 

  • Align: Choose whether the icons will be vertically aligned to the Left, Center, or Right. 

HTML

You can easily add HTML code blocks to further customize the design and behavior of your form, survey, page, or email. 

To add HTML, click Add Content, hover over HTML, and drag your custom HTML block into a Column or Row.

Customizing HTML

To add HTML code, enter it within the <div> </div> parameters within the content editor on the left. 

Editing Content Element Settings

The Block Settings allow you to edit the design of the Element

You can edit the Background, Margin, Padding, and Border of the Element.

To edit the Background Color, select a color from the drop-down menu, or enter a specific hex code.

To toggle between editing the Margin, Padding, or Border on the Block Settings, click the one you'd like to edit.

The Margin is the outer space of an element, while Padding is the inner space of an element. Margin is the space outside the Border of an element, while Padding is the space that is inside the Border

Editing the Margin 

To edit the Margin, first select if you'd like the same Margin on the top, bottom, left, and right by selecting Same All Sides.

Edit the Margin by using the up and down arrows, or by entering the Margin in pixels. 

Editing the Padding

To edit the Padding, first select if you'd like the same Padding on the top, bottom, left, and right by selecting Same All Sides

Edit the Padding by using the up and down arrows, or by entering the Padding in pixels.

Editing the Border

To edit the Border, first select if you'd like the same size Border on the top, bottom, left, and right by selecting Same All Sides

Add the size of the Border by using the up and down arrows, or by entering the size in pixels. 

Choose the Border color by selecting from the drop-down menu, or by entering a specific hex code. Click Choose to set your Border.

Did this answer your question?