Documentation - Form:create static form example

[TravisHi]

Hey guys, loving Statamic 3 so far. I've recently created a basic contact form using the docs here https://statamic.dev/tags/form-create.

The dynamic {{ fields }} work perfectly, however the resulting inputs on the website can't be targeted for individual styling (e.g. adding classes or inline styles). I've figured out that it's still fine to use normal inputs as long as the name="" field = the blueprint handle.

Is this is the correct way to accomplish what I want (custom form layouts)?

Forms do submit into the control panel when I use the name="{{blueprint_handle}}". I could add an example to the Statamic docs if I am doing this correctly.

[jasonvarga]

You may customize the html of each field that gets output in the fields loop.

https://statamic.dev/tags/form-create#prerendered-html

You may add classes in there.

[TravisHi]

Thanks @jasonvarga so using the pre-rendered HTML, in my contact.antlers.html would I do the following?

{{ form:contact }}
    {{ fields }}
        <div class="custom-class-1-that-isn't-in-a-loop">
            <label class="block">{{ display }}</label>
            {{ field }}
        </div>
        <div class="another-class-2-that-isn't-in-a-loop-either">
            <label class="block">{{ display }}</label>
            {{ field }}
        </div>
    {{ /fields }}
{{ /form:contact }}

Currently I have something like (which works fine, where name = what's in the blueprints/forms/contact.yaml file):

{{ form:contact }}
<div class="col-12 col-lg-3 form-group">
  <input
    type="text"
    class="form-control mb-3 mb-3 name-input"
    placeholder="name"
    name="name"
  />
</div>
{{ /form:contact }}

Is your approach the "Statamic" way of doing forms? Is there anything wrong about the way I'm doing it?

[jasonvarga]

There's no requirement to use the {{ fields }} loop. You're free to hard code each individual field if you prefer that.

[TravisHi]

Cool, thanks @jasonvarga :)