{% extends "../../layout.twig" %}

{% set page_title = 'Getting Started' %}
{% set page_slug = '/getting-started/' %}

{% block page %}
    <h1 id="getting-started">Getting Started</h1>
    <p>Turning web forms into conversations. Conversational Form is an open-source concept by <a href="https://space10.io/" target="_blank">SPACE10</a> to easily turn any form element on a web page into a conversational form interface. It features conversational replacement of all input elements, reusable variables from previous questions and complete customization and control over the styling.</p>
    
    <h2 id="include-conversationalform-in-your-page">Include ConversationalForm in your page</h2>
    <pre><code class="language-html" data-lang="html">&lt;script type="text/javascript" src="https://cdn.jsdelivr.net/gh/space10-community/conversational-form@1.0.1/dist/conversational-form.min.js" crossorigin>&lt;/script></code></pre>
    
    <p>ConversationalForm will automatically look through the DOM for a form element with the attibute cf-form, and auto-instantiate.</p>
    <pre><code class="language-html" data-lang="html">&lt;form id="my-form-element" cf-form ...></code></pre>

    <p><strong>That's it! Your form is now conversational 👍</strong></p>

    <h2 id="instantiate-with-jquery">Instantiate with jQuery</h2>
    <p>See <a href="../options/">ConversationalFormOptions</a> for all available options.</p>
    <pre><code class="language-javascript" data-lang="javascript">$("form").conversationalForm({
        
});</code></pre>

    <h2 id="self-instantiate-with-vanilla-javascript">Self-instantiate with vanilla Javascript</h2>
    <p>Only parameter <code>formEl</code> is mandatory for the object you pass to the constructor. See full list of <a href="../options/">ConversationalFormOptions</a>.</p>
    <pre><code class="language-javascript" data-lang="javascript">new cf.ConversationalForm({
    // HTMLFormElement
    formEl/*: HTMLFormElement;*/
});</code></pre>

    <h2 id="react">React</h2>
    <iframe src="https://stackblitz.com/edit/react-conversational-form-example?ctl=1&embed=1&file=myForm.js" width="100%" height="500" frameBorder="0"></iframe>
    
    <h2 id="vue">Vue</h2>
    <iframe src="https://stackblitz.com/edit/vue-conversational-form-example?ctl=1&embed=1&file=myForm.js" width="100%" height="500" frameBorder="0"></iframe>

    <h2 id="angular">Angular</h2>
    <iframe src="https://stackblitz.com/edit/angular-conversational-form-example?ctl=1&embed=1&file=src/app/form.component.ts" width="100%" height="500" frameBorder="0"></iframe>
    

    <h2 id="use-with-various-es6-module-bundlers"></a>Use with various ES6 module bundlers</h2>
    <p>like <a href="https://github.com/webpack/webpack" target="_blank">Webpack</a> and <a href="https://github.com/rollup/rollup" target="_blank">Rollup</a></p>
    <pre><code class="language-javascript" data-lang="javascript">import { ConversationalForm, EventDispatcher } from 'conversational-form';
    var cfInstance = ConversationalForm.startTheConversation({
    formEl: document.getElementById("form")
});</code></pre>

    <h2 id="include-conversational-form-in-your-project"></a>Include Conversational Form in your project</h2>
    <h3 id="npm"></a>NPM</h3>
    <pre class="command-line language-bash"><code class="language-terminal" data-lang="terminal">npm install conversational-form</code></pre>

    

{% endblock %}

{% block toc %}
	<ul class="section-nav">
		<li class="toc-entry toc-h2"><a href="#getting-started">Getting Started</a></li>
		<li class="toc-entry toc-h2"><a href="#include-conversationalform-in-your-page">Include ConversationalForm in your page</a></li>
		<li class="toc-entry toc-h2"><a href="#instantiate-with-jquery">Instantiate with jQuery</a></li>
		<li class="toc-entry toc-h2"><a href="#self-instantiate-with-vanilla-javascript">Self-instantiate with vanilla Javascript</a>
        <li class="toc-entry toc-h2"><a href="#react">React</a></li>
        <li class="toc-entry toc-h2"><a href="#vue">Vue</a></li>
        <li class="toc-entry toc-h2"><a href="#angular">Angular</a></li>
        <li class="toc-entry toc-h2"><a href="#use-with-various-es6-module-bundlers">Use with various ES6 module bundlers</a></li>
        <li class="toc-entry toc-h2"><a href="#include-conversational-form-in-your-project">Include Conversational Form in your project</a>
            <ul>
                <li class="toc-entry toc-h3"><a href="#npm">NPM</a></li>
            </ul>
        </li>
	</ul>
{% endblock %}