Skip to main content

This is a guide on using the GOV.UK Design System Form Builder

  1. Index
  2. Submit button

Submit button

Submit buttons submit the contents of the form

By default double click prevention is enabled to make applications easier to use by people using slow internet connections or suffering from motor impairments.

Generating a submit button using the default parameters

Input

= f.govuk_submit

Rendered output

HTML output

<div class="govuk-form-group">
  <input type="submit" name="commit" value="Continue" class="govuk-button" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Continue" />
</div>

Generating a secondary submit button

Input

= f.govuk_submit 'Find address', secondary: true

Rendered output

HTML output

<div class="govuk-form-group">
  <input type="submit" name="commit" value="Find address" class="govuk-button govuk-button--secondary" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Find address" />
</div>

Generating a warning submit button

Input

= f.govuk_submit 'Delete all records', warning: true

Rendered output

HTML output

<div class="govuk-form-group">
  <input type="submit" name="commit" value="Delete all records" class="govuk-button govuk-button--warning" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Delete all records" />
</div>

Generating a submit button without double click prevention

Input

= f.govuk_submit prevent_double_click: false

Rendered output

HTML output

<div class="govuk-form-group">
  <input type="submit" name="commit" value="Continue" class="govuk-button" formnovalidate="formnovalidate" data-module="govuk-button" data-disable-with="Continue" />
</div>

A submit button with an accompanying call to action

Some forms have secondary as well as primary functions. Any content passed in as a block will be rendered in-line with the primary submit button.

Input

= f.govuk_submit 'Save and continue' do
  a.govuk-button.govuk-button--secondary href='/#'
    ' Safe as draft

Rendered output

HTML output

<div class="govuk-form-group">
  <input type="submit" name="commit" value="Save and continue" class="govuk-button govuk-!-margin-right-1" formnovalidate="formnovalidate" data-module="govuk-button" data-prevent-double-click="true" data-disable-with="Save and continue" />
  <a class="govuk-button govuk-button--secondary" href="/#">
    Safe as draft 
  </a>
</div>