Extra space between label and button

Support Forms & Blueprints
1

Hi all,
I’m new about grav, I need to add some extra space between textarea and button like a br or p /p.
How can I do that?

Thank you.

2

Hi @Aiace, do you mean in Markdown or in a theme? If in Markdown, you can use HTML within your Markdown content, for example:

Hello  
<br><br>
Hello

More info at https://learn.getgrav.org/16/content/markdown#inline-html

4

Yes the Markdown inside “Page” section
this is my form, but i don’t know how add some Markdown inside of this form:

title: Contattami
form:
name: contact
fields:
-
name: name
label: Nome
placeholder: ‘Inserisci il tuo nome’
autocomplete: ‘on’
type: text
validate: null
required: true
-
name: email
label: Email
placeholder: ‘Inserisci la tua Email’
type: email
validate: null
required: true
-
name: message
label: Messaggio
placeholder: ‘Inserisci il tuo messaggio’
type: textarea
validate: null
required: true
-
name: g-recaptcha-response
label: Captcha
type: captcha
recaptcha_site_key: xxxxxx
recaptcha_not_validated: ‘Captcha not valid!’
validate: null
required: true

(MARKDOWN HERE SOME EXTRA SPACE)

buttons:
    -
        type: submit
        value: Submit
    -
        type: reset
        value: Reset
process:
    -
        captcha:
            recaptcha_secret: xxxx
    -
        email:
            subject: '[Site Contact Form] {{ form.value.name|e }}'
            body: '{% include ''forms/data.html.twig'' %}'
    -
        save:
            fileprefix: contact-
            dateformat: Ymd-His-u
            extension: txt
            body: '{% include ''forms/data.txt.twig'' %}'
    -
        message: 'Thank you for getting in touch!'
    -
        redirect: /grazie

Thanks

5

I’ve not used Grav forms myself @Aiace, but might this give you a lead about what you are looking for? https://learn.getgrav.org/16/forms/forms/fields-available#display-field

6

@Aiace, Although the form definition in frontmatter allows you to add style or classes to individual fields, you cannot add style/classes to the group of buttons.

This means you have to alter the forms template, or add some css (easiest). The following shows how to add some styling to the button group.

The generated HTML for the button section looks like this:

<div class="button-wrapper">
  <button class="btn " type="submit">Submit</button>
  <button class="btn " type="reset">Reset</button>
</div>

Note: The class ‘button-wrapper’ is set by theme Quark. Other themes may use different classes. Have a look at the generated HTML of the form using your theme and use that class.

If you add some css to the class selector form .button-wrapper you can set the top margin to your liking:

form .button-wrapper {  # replace 'button-wrapper' by class used by your theme
    margin-top: 3rem;   # replace with your own margin preferences.
}

See section Custom CSS in the docs to find out how and where you can add your own css.

Hope this helps…

1 Like
7

It’s working.
Thank you!

8

Thanks very much @pamtbaau👍