Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save brianpurkiss/60767704bd61149f17a4363dae641818 to your computer and use it in GitHub Desktop.
Save brianpurkiss/60767704bd61149f17a4363dae641818 to your computer and use it in GitHub Desktop.
Helpful function for adding Bootstrap 4 classes to Gravity Forms fields.
<?php
/**
* Gravity Forms Bootstrap Styles
*
* Applies bootstrap classes to various common field types.
* Requires Bootstrap to be in use by the theme.
*
* Using this function allows use of Gravity Forms default CSS
* in conjuction with Bootstrap (benefit for fields types such as Address).
*
* @see gform_field_content
* @link http://www.gravityhelp.com/documentation/page/Gform_field_content
*
* @return string Modified field content
*/
add_filter("gform_field_content", "bootstrap_styles_for_gravityforms_fields", 10, 5);
function bootstrap_styles_for_gravityforms_fields($content, $field, $value, $lead_id, $form_id){
// Currently only applies to most common field types, but could be expanded.
if($field["type"] != 'hidden' && $field["type"] != 'list' && $field["type"] != 'multiselect' && $field["type"] != 'checkbox' && $field["type"] != 'fileupload' && $field["type"] != 'date' && $field["type"] != 'html' && $field["type"] != 'address') {
$content = str_replace('class=\'medium', 'class=\'form-control medium', $content);
}
if($field["type"] == 'name' || $field["type"] == 'address') {
$content = str_replace('<input ', '<input class=\'form-control\' ', $content);
}
if($field["type"] == 'textarea') {
$content = str_replace('class=\'textarea', 'class=\'form-control textarea', $content);
}
if($field["type"] == 'checkbox') {
$content = str_replace('li class=\'', 'li class=\'form-check ', $content);
$content = str_replace('<input ', '<input style=\'margin-top:-2px\' ', $content);
$content = str_replace('<label ', '<label class=\'form-check-label\' ', $content);
}
if($field["type"] == 'radio') {
$content = str_replace('li class=\'', 'li class=\'radio ', $content);
$content = str_replace('<input ', '<input style=\'margin-left:1px;\' ', $content);
}
return $content;
} // End bootstrap_styles_for_gravityforms_fields()
add_filter("gform_submit_button", "form_submit_button", 10, 2);
function form_submit_button($button, $form){
return "<button class='button btn btn-primary' id='gform_submit_button_{$form["id"]}'><span>Submit</span></button>";
}
@emilekott
Copy link

Thanks for this. As a minor improvement, you could preserve custom submit button labels by changing the gform_submit_button filter:
add_filter("gform_submit_button", "form_submit_button", 10, 2); function form_submit_button($button, $form){ return "<button class='button btn btn-primary' id='gform_submit_button_{$form["id"]}'><span>" . $form['button']['text'] . "</span></button>"; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment