Skip to main content
How to Customize the Design of your Form

Learn how to change the background and add images as well as text sections to tailor the look and feel of your response form

Petya Filipova avatar
Written by Petya Filipova
Updated over 2 weeks ago

Customize Your Form Design for a Professional Look

Step-by-Step Guide to Designing Custom Forms in zkipster

The Form Composer gives you the opportunity to change the style of your response or consent form to make it look completely on brand by adding text, logos, images, videos, e-signature field and changing the background displayed when viewing the form on the web page.


Please note: If the same form is being used across different campaigns, the design of the form and any changes made to it will be reflected across all campaigns

The zkipster Form has 3 pages which you can fully customize:

  • Form page – This page is the actual Response Form where you can request all the information that you would like to collect from your guests.

Custom Fonts (Enterprise Accounts)

Once inside, you can click, drag and drop a file or click on the box to upload a font package that you own.

Please note: zkipster only accepts the following font file formats: .ttf, .otf, .woff, .woff2, .svg, .eot.

Upon uploading your font package, you will be prompted to confirm that you own this font or have the right to use the font.

Once uploaded, your fonts will be visible in the text sections of your form available to select and use.

Background

Background Color

Select this option if you want a plain color background on your form. If you have been given exact an HEX color code from your design team, you can simply paste it into the Background Color box.

Background Image

Upload a background image of your choosing (PNG, JPG, GIF). You can use whatever file size you like, however, the higher the image resolution the better - especially for screens with a high display resolution. Please note that the background image will remain fixed when scrolling on the form.

Reordering and Duplicating Image and Text Sections

zkipster will provide you with Image and Text sections by default, but you can amend these as you wish.

All image and text sections are movable and can be reordered by simply dragging and dropping them into the desired position:

The image and text sections can easily be duplicated in case you need more than one of those items on your form. Simply hover with your cursor over the respective tab your want to copy for the Duplicate icon to appear:

You can always turn off any sections you do not need by clicking into it and then toggling it off.

At the bottom of each section you can always set the top margin for that specific section:

Image


Internal Label

Give your image section a name in order to define its specific purpose on the form (i.e. Logo, Flyer, Signature, etc.), especially if you are working with more than one image file.

Show when form is closed

As long as this option is toggled ON, the respective image and text section will remain visible on the web page following a guest submitting their form response (i.e. 'Confirm' or 'Decline'). It will also still show up once the form has closed.

If you want the image or text to disappear from the response form following a guest's submission and once it is closed, switch the toggle to OFF.

Image Upload

Upload your image (JPG, PNG, GIF) by clicking into the square and selecting the picture from your files. The maximum file size is 5MB. Please be aware that the form width is 318 px so any larger images will be displayed and resized to that width automatically.

You can further adjust the width and height of your image manually and adjust the alignment on the form.

Link Image

You can incorporate a weblink for your image, in case you want to your guests to visit a specific event landing page, company or venue website, etc.

Text

As with the Image section(s), set up the Internal Label and Show when form is closed options as you need.

The Rich Text Editor enables you to:

  • Change the font, style, size and color of your text. (Please note that you are able to upload your own custom fonts on zkipster's Enterprise plan. More details here.)

  • Introduce horizontal lines across your text

  • Amend the text alignment to left, right or center

  • Add bullet or numbered lists

  • Insert hyperlinks

  • Enable Right to Left writing (to support Arabic, Hebrew and other RTL writing systems)

  • Embed videos. Check this article for further instructions

  • Insert tables

  • Use dynamic guest and event tags to personalize your form content

RSVP Button

This is where you can design the look of the RSVP button that will take you to the actual Response Form if you have the Landing page enabled. This button is also present in the Success page.

Relationships

If you will be using the ‘Relationships’ feature in zkipster, you can toggle this section ON and define the information that you would like to add to the below tabs that will be shown in the ‘Landing’ page and/or ‘Success’ page.

  • Settings – this is where you can include all related guests that you would like to receive the invitation or only filter to specific relationships.

  • Text – by default it would say ‘RSVP ON BEHALF OF’ and you can customize and edit the message from this tab that you would like to display to your guest.

  • Related Link – this is where you can re-arrange and add the information by ticking the checkbox to include the First name, Last name, Salutation and Guest status (Confirmed or Unconfirmed) of a related guest. An option to tick the box to include the main guest in the Landing page or Success page and amend the Font, Style, Size, Font Color, Alignment, Background color, Padding (10px default) and whether your button should have rounded corners.

  • Button – this is where you can customize the Background color of the button and the Arrow color.

Response Fields

The Response Fields section of your form allows you to gather further details from your attendees when they are RSVPing to your event, such as dietary requirements, names of their +1s, etc.

As with the different sections of your email, the response fields of your form can also be dragged and dropped in the desired location of this section:

Customizing the Design of the Response Fields

Clicking into the Response Fields tab does not only reveal each guest field, it further gives you the ability to customize the look of your fields via the Design option at the very top of the section:


From the Design section you are able to amend the Font, Style, Size, Font Color and Alignment of both your Field Labels as well as Field Descriptions:


Pro Tip: You are able to upload your own custom fonts on zkipster's Enterprise plan. Find out more about this here!

Configuring the Response Fields

Clicking into one of your fields will open up an array of options to set it up even further:

Response Field Activation

Switch the toggle to ON to activate the field on your form, or set it to OFF in order to hide it.

How to account for your Main Guest's +1s

Toggle the 'Total Guests' response field to ON. The drop down menu will give your guests the option to RSVP for themselves and any +1s you have allotted them. This article explains exactly how to assign +1s for each of your guests when you import your guest list.

Display Name

Give your response field a Display Name - this means that, while internally in zkipster the field is called 'Total Guests', you can rephrase the wording of it specifically for your form to give your guests more clarity, i.e. name it 'Party Size' instead.

Pro Tip: You can make use of the Display Name to set up your response form in a different language altogether! For example, the First Name default field can very easily be changed to the French equivalent 'Prénom' instead:


Description Text

Add a short description to provide your guests with more context in relation to a specific field. This additional text will sit right below your field's Display Name on the form:

'Locked' Toggle

Switch on this toggle to lock any response field that you do not want your guest to be able to change. zkipster highly recommends locking the response fields for First and Last Name to prevent any third person (that has been forwarded your event invitation via email) from potentially overwriting your original guest's name inside zkipster:

'Required' Toggle

Switching on the Required toggle makes the field mandatory and your guests will not be able to submit their response without it:

'Conditional Visibility' Toggle

Turn on Conditional Visibility to transform your response fields into dynamic fields to make them only show up if certain response criteria from a previous field have been met. Learn more here!

Creating New and Editing Existing Response Fields

You can create new custom guest fields for your response form at any point, directly through the 'Add Custom Field option' at the bottom of your Response Fields section:

Alternatively, create a new custom field or edit the response options of an existing field via the 'Guest Fields' tab on the left hand side of your browser:

Find out more about custom guest fields here.

"Confirm" and "Decline" Options on the Form

The "Confirm" and "Decline" Options tabs in the form composer is where you can:

  • Define if guest status will be automatically changed or not upon form submission


  • Compose your Button Designs

"Confirm" Options

Inside this section, you will see both a Response Settings as well as a Button Design tab, both of which are broken down in more detail below:

Response Settings

This is where you can toggle ON the Set Guest Status.


Set Guest Status

By default, the ‘Set Guest Status’ will always be toggled ON in your response form, meaning that the guest status will be changed to Confirmed automatically when your guest confirms his attendance through the response form. If you enable the ‘Decline’ button in your form, the guest status will then be changed to ‘Declined’ automatically.



Please note: The 'Set Guest Status' default settings under the 'Confirm or Decline Options' of the consent form is always toggled OFF. We recommend leaving it as OFF in the consent form so that the guest status will not be changed upon submission.



Button Design

You can completely customize the look of your button via the Button Design tab. In this section, you can change the:

  • Button Text for "Confirm"

  • Font, Style, Size, Text Color and Letter Spacing of your button text

  • Background and Hover Colors

  • Padding, Width and whether your button should have rounded corners

Find out how to add an additional Decline button option for your guests in the 'Decline Options' section below.

"Decline" Options

If you would like to add a Decline option to your response form toggle this section from 'OFF' to 'ON':

Response Settings

The Response Settings are almost identical to the 'Confirm Options', as you can see below. You are also able to decide whether guests responding with 'Decline' can leave any required response fields empty.


RSVP Response (Under Success page)

This is the message that will appear after a guest confirms or declines their attendance on your response form.

If a guest confirms, feel free to customize the Response Submission for "Confirm" message. You can use this section to:

  • Let guests know a follow up email will be coming shortly with more event details

  • Provide an email for guests to reach out to if they would like to invite others

  • Let them know you are excited to have them!

If a guest declines, feel free to customize the Response Submission for "Decline" message as you see fit. You can use this option to:

  • Tell your guests you are sorry to hear they cannot make it

  • Provide further information on other events they might like to attend instead

You can also Preview your 'Confirm' or 'Decline' message as a Guest. Learn more in the article here.

Add to Calendar (Under Success page)

Toggle this option 'ON' if you would like your guests to be able to add your event to their calendars. The information for the Add to Calendar is automatically populated with the information you set in the Event Details. This includes: the Event Name, Event Start Time/Date and Event Location you determined when you set up your event.

You also have the option to customize the Add to Calendar text, color, alignment, and size.

Social Share Icons

Social media are websites and applications that enable users to create and share content or to participate in social networking.

Toggle on the 'Social Share Icons' button to enable this section in the RSVP form.

You can add social media icons to your email which will lead guests to your event or company social network pages:

  • Icon Settings: Choose which social media icons you would like to include in your invitation and insert the links to the corresponding social media pages. Re-arrange the order they appear in if needed. As a best practice and to avoid overcrowding, we recommend to keep the number of social networks between three and four icons.

  • Icon Design: Customize the color, alignment, size, and top margin (default 40 px) of the your social media icons as you see fit your your invitation design:

Did this answer your question?