Step 5: Grails form design

We will design a form using Grails form in this step. First of all we need to create a page for this, for page we need to create a controller and action. We want to design in contact page. So we need to create a controller named ContactController using grails command as following

grails create-controller contact

After creating controller, you will see this controller with default action index. Same index action, create a new action name add.  We will work in add action, for that we have to follow bellow things

1.     create a page under views/contact which name is add.gsp and add content as follows

 <div id="content" role="main">

    <section class="row">

        <g:if test="${flash.message}">

            <div class="message" role="alert">

                ${flash.message}

            </div>

        </g:if>

        <g:form controller="contact" action="add" class="form">

            <div class="form-group">

                <label for="firstName">First Name</label>

                <g:textField name="firstName" required="" placeholder="First Name" value="${params?.firstName}" />

            </div>

            <div class="form-group">

                <label for="lastName">Last Name</label>

                <g:textField name="lastName" required="" placeholder="Last Name"  value="${params?.lastName}" />

            </div>

            <div class="form-group">

                <label for="email">Email  </label>

                <g:textField name="email" required="" placeholder="Email"  value="${params?.email}" />

            </div>

            <div class="form-group">

                <label for="city">City  </label>

                <g:textField name="city" required="" placeholder="City"  value="${params?.city}" />

            </div>

            <div class="form-group">

                <label for="country">Country  </label>

                <g:textField name="country" required="" placeholder="Country"  value="${params?.country}" />

            </div>

            <div class="form-group">

                <label for="message">Message  </label>

                <g:textArea name="message" rows="5" cols="80" required="" placeholder="Message"  value="${params?.message}" />

            </div>

            <div class="checkbox">

                <label>

                    <input type="checkbox">Send a copy

                </label>

            </div>

            <fieldset>

                <g:submitButton name="send" value="Send" class="btn btn-success" />

            </fieldset>

        </g:form>

    </section>

</div>

For more HTML and Form tags, http://docs.grails.org/3.0.17/ref/Tags/actionSubmit.html