Creating a Contact Form Using Kwes – Shifter

This document explains how to create a contact form on your Shifter site using Kwes.

What You’ll Need

  • A Kwes account
  • Theme editing or a script insertion plugin (e.g., Scripts n Styles or Header and Footer)

Steps

Here are the steps to create a contact form on your Shifter
site using Kwes.

  1. Create a Kwes account: If you don’t already have a Kwes account, visit the Kwes website to create one.
  2. Create a new form in Kwes: Log in to your Kwes account and create a new form. Add the required fields to the form (name, email address, message, etc.).
  3. Get the form’s HTML code: Once you’ve created the form in Kwes, retrieve the HTML code for embedding. This is typically provided in the Kwes dashboard.
  4. Embed the HTML code on your Shifter site: Log in to your Shifter site and edit the page or post where you want to display the contact form.
    • Edit the theme: Use the theme editor to insert the HTML code in the appropriate location. Script Insertion Plugins:
    • Use a script insertion plugin, such as Scripts n Styles or Header and Footer, to insert the HTML code.

    For example, when using the Scripts n Styles plugin, you can insert the HTML code with the following steps.

    1. Activate the “Scripts n Styles” plugin from the WordPress admin dashboard.
    2. Open the “Scripts n Styles” settings page.
    3. Paste the HTML code in the appropriate location (typically within the <body> tag).
    4. Save your changes.
    <form action="YOUR_KWES_FORM_ENDPOINT" method="POST">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br><br>

  <button type="submit">Submit</button>
</form>

    Note: YOUR_KWES_FORM_ENDPOINT with the actual form endpoint provided by Kwes.

  5. Test the form: Shifter Verify that the form displays correctly and can be submitted on the site.

Additional Information

  • OGP (Open Graph Protocol) Settings: This document contains OGP tags. These tags are used to ensure that information such as the page title, description, and image is displayed correctly when the page is shared on social media platforms like Facebook and Twitter.

    Example:

    <meta property="og:title" content="Kwes を使ったお問い合わせフォームの作成 - Shifter" />
<meta property="og:description" content="必要なもの Kwes アカウント テーマの編集またはスクリプト挿入プラグイン (例: Scripts n Styles または Header and Footer [&hellip;]" />
<meta property="og:image" content="https://getshifter.io/wp-content/uploads/2024/03/197381359-d13baf9bfd66846f99bbf352.png" />

  • JSON-LD Schema: This document contains a schema in JSON-LD format. This is used to help search engines understand the page’s content.

    “`json { “@context”: “https://schema.org”, “@graph”: [ { “@type”: “WebPage”, “@id”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/”, “url”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/”,
    “name”: “Kwes を使ったお問い合わせフォームの作成 – Shifter”, “isPartOf”:
    { “@id”:
    “https://getshifter.io/#website” }, “primaryImageOfPage”: { “@id”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/#primaryimage”
    }, “image”: { “@id”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/#primaryimage”
    }, “thumbnailUrl”:
    “https://getshifter.io/wp-content/uploads/2024/03/197381359-d13baf9bfd66846f99bbf352.png”,
    “datePublished”: “2023-12-08T14:42:35+00:00”, “breadcrumb”: { “@id”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/#breadcrumb”
    }, “inLanguage”: “ja”, “potentialAction”: [ { “@type”: “ReadAction”, “target”: [
    “https://getshifter.io/support/creating-contact-form-with-kwes/” ] } }
    }, { “@type”:
    “ImageObject”, “inLanguage”: “ja”, “@id”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/#primaryimage”,
    “url”:
    “https://getshifter.io/wp-content/uploads/2024/03/197381359-d13baf9bfd66846f99bbf352.png”,
    “contentUrl”:
    “https://getshifter.io/wp-content/uploads/2024/03/197381359-d13baf9bfd66846f99bbf352.png”
    }, { “@type”:
    “BreadcrumbList”, “@id”:
    “https://getshifter.io/support/creating-contact-form-with-kwes/#breadcrumb”,
    “itemListElement”: [ { “@type”: “ListItem”, “position”: 1, “name”:
    “Home”, “item”: “https://getshifter.io/” }, { “@type”: “ListItem”, “position”: 2, “name”:
    “ドキュメント”, “item”: “https://getshifter.io/support/” }, { “@type”: “ListItem”,
    “position”: 3, “name”: “Kwes を使ったお問い合わせフォームの作成” } ] },
    { “@type”: “WebSite”,
    “@id”:
    “https://getshifter.io/#website”, “url”: “https://getshifter.io/”,
    “name”: “Shifter”, “description”: “数分で WordPress ウェブサイトを構築”,
    “publisher”: { “@id”:
    “https://getshifter.io/#organization” }, “potentialAction”: [ { “@type”: “SearchAction”,
    “target”: { “@type”:
    “EntryPoint”, “urlTemplate”:
    “https://getshifter.io/?s={search_term_string}” }, “query-input”: {
    “@type”:
    “PropertyValueSpecification”, “valueRequired”: true, “valueName”:
    “search_term_string” } } ], “inLanguage”: “ja” }, { “@type”: “Organization”, “@id”:
    “https://getshifter.io/#organization”, “name”: “Shifter”, “url”:
    “https://getshifter.io/”, “logo”: { “@type”: “ImageObject”, “inLanguage”: “ja”,
    “@id”:
    “https://getshifter.io/#/schema/logo/image/”, “url”:
    “https://cdn.getshifter.co/6979d2c20e0f14c46f6b6eac8659c6136a0b4a67/uploads/2023/01/logo.svg”,
    “contentUrl”:
    “https://cdn.getshifter.co/6979d2c20e0f14c46f6b6eac8659c6136a0b4a67/uploads/2023/01/logo.svg”,
    “width”: “1024”, “height”: “1024”, “caption”: “Shifter” }, “image”: {
    “@id”:
    “https://getshifter.io/#/schema/logo/image/” }, “sameAs”: [
    “https://www.facebook.com/getshifter/”, “https://x.com/getshifter”,
    “https://github.com/getshifter”,
    “https://www.youtube.com/channel/UCkw20zzfSAxD-KNKUEW3bAw”,
    “https://profiles.wordpress.org/getshifter/”,
    “https://www.instagram.com/getshifter/” ] } ] }