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, then 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 options by clicking the up and down arrows. 

Request a Number to capture a variety of number types that you can set. 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 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 

Using images will allow you to create beautiful and appealing emails, forms, and pages. Adding in high-quality images to your emails can set you above the rest. 

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, select an image from your computer and click Open.

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 the 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 on search engines, or those with disabilities, or for those who don't have image availability. Enter a description of your image. 

  • 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 into a Column or Row 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?