fbpx

Update to the Form Shortcode

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on reddit
Reddit

There were rumblings about the limitations of the form shortcode compared to the default functionality of other form builders, so we gave it an overhaul and made it bad-ass.

While our original intention was to provide limited form capabilities intentionally and instead provide connections to other super powerful form builders, this will not suit everyone.

So we decided to build a more robust in-house form markup still using basic Shortcodes, but with a lot more extend-ability.

Old Markup:

[gh_form id="1234" fields="first,last,email" submit="Submit" success="/thank-you/"]

New Markup:

[gh_form id="256" title="Step Name"]

The difference is that the new shortcode gives you a text editor within the funnel to add or remove fields. Allowing for greater ease of use across your entire site.

Default Fields.

ShortcodeDescription
[first_name]The first name field
[last_name]The last name field
[email]The email field
[phone]The default phone field
[terms]The terms agreement checkbox
[gdpr]The GDPR consent checkbox
[recaptcha]The Recaptcha checkbox if enabled in settings
[submit]Submit Text[/submit]A submit button.

You can modify  any of the above fields with some simple shortcode attribute markup.

AttributeExampleDescription
labellabel=”New Label”Changes the label of the field. Useful for translations
requiredrequired=”false”Makes a field unrequired
placeholderplaceholder=”example”Adds example text to any field.

This new markup also allows adding custom fields!!!!

Add custom fields to a form.

The following fields will be made available.

  • Text field
  • Textarea
  • Dropdown
  • Radio button
  • Number
  • Checkbox

Text Field

Allows the user to enter any form of text based response.

Attributes:

AttributeExampleDescription
labellabel=”Pet Name”The label of the field
placeholderplaceholder=”Frankie”The placeholder text
namename=”pet_name”Access by {_pet_name}
idid=”pet-name”The CSS ID
classclass=”custom”Custom CSS class
valuevalue=”Bill”A default value
titletitle=”Pet Name”A short description
attributesattributes=”data-foo=bar”Additional field attributes
requiredrequired=”false”Accepts “true” or “false”

Example:

[text label="Pet's name" placeholder="Frankie" required="false"]

Textarea

Allow users to enter a multi line text based response.

Attributes:

AttributeExampleDescription
labellabel=”Pet Description”The label of the field
placeholderplaceholder=”Short and fluffy”The placeholder text
namename=”pet_description”Access by {_pet_description}
idid=”pet-description”The CSS ID
classclass=”custom”Custom CSS class
valuevalue=””A default value
titletitle=”Pet Description “A short description
attributesattributes=”data-foo=bar”Additional field attributes
requiredrequired=”false”Accepts “true” or “false”

Example:

[textarea label="Pet Description" placeholder="Short and fluffy" required="false"]

Dropdown

Allow users to select a response from a list

Attributes:

AttributeExampleDescription
labellabel=”Breed”The label of the field
namename=”pet_breed”Access by {_pet_breed}
idid=”pet-breed”The CSS ID
classclass=”custom”Custom CSS class
optionsoptions=”Bulldog, German Sheppard, Poodle”Options for the drop down
defaultdefault=”Please Select One”The default drop down text for no selected value
titletitle=”Pet Breed”A short description
attributesattributes=”data-foo=bar”Additional field attributes
requiredrequired=”false”Accepts “true” or “false”

Example:

[select label="Breed" options="Bull Dog, Mastiff, German Sheppard" default="Select a dog breed"]

Radio Button

Allow users to choose from the given options.

Attributes:

AttributeExampleDescription
labellabel=”Gender”The label of the field
namename=”pet_gender”Access by {_pet_gender}
idid=”pet-gender”The CSS ID
classclass=”custom”Custom CSS class
optionsoptions=”Male, Female”Radio button options
attributesattributes=”data-foo=bar”Additional field attributes
requiredrequired=”false”Accepts “true” or “false”

Example:

[radio label="gender" options="Male, Female"]

Number

Allow users to choose from the given options.

Attributes:

AttributeExampleDescription
labellabel=”Age”The label of the field
namename=”pet_age”Access by {_pet_age}
idid=”pet-age”The CSS ID
classclass=”custom”Custom CSS class
minmin=”0″Minimum allowed value
maxmax=”40″Maximum allowed value
attributesattributes=”data-foo=bar”Additional field attributes
requiredrequired=”false”Accepts “true” or “false”

Example:

[number label="Age" min="0" max="40"]

Checkbox

A yes or no valued field.

Attributes:

AttributeExampleDescription
labellabel=”Is your pet neutered?”The label of the field
namename=”pet_neutered”Access by {_pet_neutered}
idid=”pet-neutered”The CSS ID
classclass=”custom”Custom CSS class
valuevalue=”yes”The value if they selected it.
titletitle=”is neutered”Short Description.
attributesattributes=”data-foo=bar”Additional field attributes
requiredrequired=”false”Accepts “true” or “false”

Example:

[checkbox label="Has your pet been neutered?" value="yes"]
Adrian Tobey

Adrian Tobey

Adrian is the CEO & founder of Groundhogg. He is the founder of FormLift, a popular add-on for Infusionsoft. After several years of working in the digital marketing industry he decided to take his experience and turn it into a tool aimed at helping as many businesses as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *

Get started today!

Build your ideal customer experience in just a few hours using Groundhogg!
Scroll to Top