Adding Forms to Your Website

Forms allow you to collect information from your website visitors, such as contact details, feedback, or survey responses. Creatpad automatically handles form submissions and sends them to your email.

What you can do with forms

Forms on Creatpad are perfect for:

• Contact forms: Let visitors get in touch with you
• Feedback collection: Gather opinions about your products or services
• Newsletter signups: Build your email list
• Survey responses: Collect data for research or business insights
• Event registrations: Manage RSVPs and attendee information

How forms work on Creatpad

When you add a form to your website, Creatpad automatically:

1. Processes form submissions from your visitors
2. Stores the data securely
3. Sends you an email notification with the submission details
4. Provides a simple way to manage all your form responses

Creating your first form

Step 1: Create your HTML form Add a standard HTML form to your website. Here's a basic contact form example:

<form action="/api/forms/save" method="POST" data-creatpad-form="contact">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Step 2: Important form attributes Make sure your form includes these essential attributes:

• action="/api/forms/save" - This tells the form where to send the data
• method="POST" - This specifies how to send the data
• data-creatpad-form="your-form-name" - Give your form a unique name

Step 3: Upload your website Once you've added the form to your HTML file:

1. Save your changes
2. Create a ZIP file of your website (if needed)
3. Upload to Creatpad using the normal upload process

Form field types

You can use various input types in your forms:

Text inputs

<input type="text" name="name" placeholder="Your name">
<input type="email" name="email" placeholder="your@email.com">
<input type="tel" name="phone" placeholder="Phone number">

Text areas

<textarea name="message" rows="4" placeholder="Your message"></textarea>

Selection inputs

<!-- Dropdown -->
<select name="subject">
  <option value="general">General Inquiry</option>
  <option value="support">Support</option>
  <option value="sales">Sales</option>
</select>

<!-- Radio buttons -->
<input type="radio" name="priority" value="low" id="low">
<label for="low">Low Priority</label>

<input type="radio" name="priority" value="high" id="high">
<label for="high">High Priority</label>

<!-- Checkboxes -->
<input type="checkbox" name="newsletter" value="yes" id="newsletter">
<label for="newsletter">Subscribe to newsletter</label>

Form validation and styling

Required fields Add the required attribute to make fields mandatory:

<input type="email" name="email" required>

Input validation Use HTML5 validation attributes:

<input type="email" name="email" required>
<input type="url" name="website" placeholder="https://yourwebsite.com">
<input type="number" name="age" min="18" max="100">

Styling your forms You can style your forms with CSS just like any other HTML element:

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

input, textarea, select {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #007cba;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #005a87;
}

Managing submissions

Email notifications When someone submits a form on your website:

• You'll receive an email notification immediately
• The email includes all the form data
• Submissions are sent to the email address associated with your Creatpad account

Form data security

• All form submissions are processed securely
• Data is encrypted during transmission
• We follow best practices for data protection

Advanced features

Multiple forms on one site You can have multiple forms on your website by giving each one a unique name:

<form data-creatpad-form="contact">
  <!-- Contact form fields -->
</form>

<form data-creatpad-form="newsletter">
  <!-- Newsletter signup fields -->
</form>

Custom success messages After a form is submitted, you can redirect users to a thank you page or show a success message using JavaScript.

Troubleshooting

Form not working? Check these common issues:

1. Missing required attributes: Ensure you have action="/api/forms/save" and method="POST"
2. No form name: Add data-creatpad-form="your-form-name"
3. Missing name attributes: All input fields need a name attribute
4. JavaScript errors: Check your browser's developer console for errors

Not receiving emails?

• Check your spam/junk folder
• Verify the email address on your Creatpad account
• Make sure the form is properly configured