Creating Engaging Forms in Showit: A Technical Guide + Best Practices

How Forms Work in Showit

Unlike forms in other website builders, Showit forms are custom-built using text blocks, rectangles, and input fields. This means that you need to create them manually, and it might take more time and effort. But on the other hand, it allows for full creative freedom over their design, making them independent of the site’s global styles. Plus, we are going to give you the shortcuts to build your Showit forms faster.

Key things to know:

• Form fields are text blocks positioned over a rectangle with an input field enabled.
• You must manually enable input functionality on a rectangle for user input.
• Forms can be fully customized without affecting the rest of your site’s design.
• Submissions are stored in Showit’s dashboard under the Messages tab.
• Notification settings allow you to receive submissions via email (and optionally via SMS).

💡 Don’t Start from Scratch! Use a Free Showit Template Instead

We highly recommend starting with an existing Showit form template instead of building one from scratch. Showit provides free templates with pre-built forms that you can:

• Copy and paste into your own design
• Tweak colors, fonts, and styles to match your branding
• Ensure all fields and submissions work correctly without extra setup

To find a free form template: Open the Showit Library > Look for a Free Template > Copy the Form Section.

This saves time and prevents common setup mistakes!

---

How to Build (or Customize) a Form in Showit

Step 1: Add a Pre-Built Form from a Template

1. Open the Showit Library and find a template with a contact form.
2. Copy the form section and paste it into your own page.
3. Adjust the design while keeping the input fields intact.

Step 2: Customize the Form’s Appearance

1. Select the background rectangle and adjust colors, borders, and shadows.
2. Click on the form labels (text boxes) and change the font, size, or color.
3. Ensure input fields are correctly positioned and labeled.

Step 3: Enable Input Fields (If Building from Scratch)

If you are not using a template and manually building a form, follow these steps:

1. Add a rectangle for each input field.
2. Select the rectangle and enable input in the right-hand panel.
3. Choose the correct input type (Text, Email, Phone, etc.).
4. Add a text label above or inside the input field.

Step 4: Add a Submit Button

1. Create a rectangle for the button.
2. Add a text layer inside (e.g., “Submit”).
3. In the right-hand panel, set the rectangle’s Click Action to “Submit Form”.

Step 5: Set Up Submission Settings

1. Click the form settings panel in Showit.
2. Add your email address to receive submissions.
3. Test the form by submitting a test message.

---

Where Do Showit Form Submissions Go?

Submitted forms appear in Showit’s Dashboard under the Messages tab.
You can receive email notifications for new submissions.
You can enable SMS alerts in your Showit Account Settings > Notifications.

---

Design Best Practices for Showit Forms

Since Showit forms are manually designed, you have full control over their aesthetics. Follow these best practices to create an effective, user-friendly form:

1. Start with a Template for Efficiency

Copying an existing form saves time and ensures correct setup. Just tweak styles instead of manually configuring input fields.

2. Make Input Fields Clear & Visible

Ensure fields are easy to spot by:

• Using contrasting background colors
• Adding a border or subtle shadow around input fields
• Using placeholder text for better usability

3. Use Clear Labels

Avoid confusion with descriptive labels:

• Place labels above or inside input fields
• Ensure labels remain visible when users start typing

4. Design a Standout Submit Button

The Submit button should:

• Be large and easy to tap on mobile
• Use a high-contrast color
• Have a hover effect for better interaction

Example CSS:

button {
  background: #ff5733;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}
button:hover {
  background: #e04e2a;
}

---

5. Optimize for Mobile

Ensure the form is fully responsive by:

• Testing form fields on both desktop and mobile
• Increasing touchable areas
• Adding extra padding around form fields

6. Keep Forms Short

🚫 Don’t ask for unnecessary information! Stick to essential fields only.

✅ Good Example: Name + Email + Message
❌ Bad Example: Name + Email + Phone + Address + Subject + Message

---

Final Thoughts

Using Showit’s form templates instead of building forms from scratch is the easiest way to get a working form fast while maintaining full creative control. Just copy a pre-built form, tweak the styles, and ensure submissions are working correctly.

• Copy and paste a form from a free Showit template
• Customize it without messing up input functionality
• Check Showit’s Messages tab for new submissions
• Test the form before publishing

By following these steps, you’ll create engaging, high-converting forms while keeping your design workflow simple!

Want to have pre-made forms ready to use? Check out our Showit Templates to help you create a high-converting, beautifully designed site – without the guesswork.

Need help with your Showit site? Contact us through this form.