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:
Landing page – The initial page where you can add any relevant information about your event before directing the guest to the actual Response Form. This page is optional and can be disabled. You can learn more about setting up the Landing page here. Please note that this page can be used to enable responding on behalf of a related guest via the ‘Relationships’ section.
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.
Success page – This will be the page shown after submitting the Response Form. You can customize this page and display different messages when your guest confirms or declines an invitation. You can learn more about setting up the Success page here.
Learn more: How to Navigate Through your Response Form Pages
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.
Learn more: How to Navigate Through your Response Form Pages
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: