Skip to main content

Adding Forms to Your Site (Contact, Applications, etc.)

Gil Chan avatar
Written by Gil Chan
Updated yesterday

Overview

CraftedStays doesn't have a built-in form builder, but you can easily add forms using third-party services and HTML blocks.

Recommended Form Services

Service

Best For

Free Tier

Google Forms

Simple contact forms, surveys

Yes, unlimited

Typeform

Beautiful, conversational forms

Yes, limited

Jotform

Complex forms with logic

Yes, limited

Tally

Modern, simple forms

Yes, generous

Adding a Google Form

Step 1: Create Your Form

  1. Go to forms.google.com

  2. Click "Blank" or choose a template

  3. Add your questions:

  • Name

  • Email

  • Phone

  • Message

  • Any other fields you need

4. Configure settings (email notifications, etc.)

Step 2: Get the Embed Code

  1. Click "Send" button

  2. Click the "<>" (embed) icon

  3. Copy the iframe code
    ​

Step 3: Add to CraftedStays

  1. Go to your Template Editor

  2. Add or edit an HTML block on your page

  3. Paste the iframe code

  4. Save changes
    ​

Example Embed Code:

<iframesrc="https://docs.google.com/forms/d/e/YOUR_FORM_ID/viewform?embedded=true"width="100%"height="600"frameborder="0"marginheight="0"marginwidth="0">Loading…</iframe>

Adding a Typeform

Step 1: Create Your Form

  1. Go to typeform.com

  2. Create a new form

  3. Add your questions

  4. Style it to match your brand

Step 2: Get the Embed Code

  1. Click "Share"

  2. Select "Embed in a web page"

  3. Choose embed type (standard or popup)

  4. Copy the code

Step 3: Add to CraftedStays

  1. Add an HTML block to your page

  2. Paste the Typeform embed code

  3. Save changes

Common Form Use Cases

Contact Form

Fields to include:

  • Name (required)

  • Email (required)

  • Phone (optional)

  • Subject or Inquiry Type

  • Message (required)

Job Application Form

Fields to include:

  • Name

  • Email

  • Phone

  • Position applying for

  • Resume upload (if supported)

  • Cover letter / message

Guest Inquiry Form

Fields to include:

  • Name

  • Email

  • Phone

  • Preferred property (dropdown)

  • Check-in date

  • Check-out date

  • Number of guests

  • Special requests

Event Space Inquiry

Fields to include:

  • Name

  • Email

  • Event type

  • Event date

  • Number of attendees

  • Additional details

Styling Forms to Match Your Site

Google Forms

Limited styling options, but you can:

  • Choose a theme color

  • Add a header image

  • Adjust font

Typeform

More flexible styling:

  • Custom colors

  • Background images

  • Font selection

  • Matches brand better

Custom CSS (Advanced)

For more control, some form services allow custom CSS to style the embedded form.

Form Notifications

Make sure you set up notifications so you receive submissions:

Google Forms

  1. Go to form Settings

  2. Look for "Responses"

  3. Enable "Email notification for new responses"

Typeform

  1. Go to form settings

  2. Find "Notifications"

  3. Add your email address

General Tip

Always test your form by submitting it yourself to ensure notifications work.

Troubleshooting

Form not displaying

  1. Check the embed code was pasted correctly

  2. Look for missing closing tags

  3. Try a simpler embed code first

Form too small/cut off

Adjust the height in the iframe:

height="800"

Responsive issues on mobile

Wrap in a responsive container:

<div style="max-width: 100%; overflow: hidden;"><!-- Your iframe here --></div>

Not receiving submissions

  1. Check notification settings in your form service

  2. Check spam folder

  3. Test the form yourself

Alternative: Link to Form

If embedding doesn't work well, you can:

  1. Create your form on the form service

  2. Get the form's direct URL

  3. Add a button in CraftedStays linking to the form

  4. Opens in new tab

This is simpler but takes users away from your site.

Related Articles

Did this answer your question?