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.
Community guidelines
Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.
Forms & Blueprints
Solved by pamtbaau View solution
Hi @Aiace, do you mean in Markdown or in a theme? If in Markdown, you can use HTML within your Markdown content, for example:
HTML
Hello
<br><br>
Hello
More info at https://learn.getgrav.org/16/content/markdown#inline-html
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:
YAML
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)
YAML
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
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
@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:
HTML
<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:
CSS
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...
It's working.
Thank you!
Thanks very much @pamtbaau👍
Log in to reply.
Suggested topics
| Topic | Participants | Replies | Views | Activity |
|---|---|---|---|---|
| 13 | 1165 | 4 months ago | ||
| 0 | 88 | 5 months ago | ||
| 9 | 163 | 6 months ago | ||
| 7 | 138 | 7 months ago | ||
| 10 | 156 | 7 months ago |