Adding Icon to Toolset Form Submit

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to add an icon to the submit button in a Form.

Solution: Apply a custom CSS class to the submit button, then use CSS to apply a background image icon or other graphic effect.

This support ticket is created 6 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Toolset Forms

This topic contains 2 replies, has 2 voices.

Last updated by randallH-3 6 years, 6 months ago.

Assisted by: Christian Cox.

Author

Posts

July 30, 2018 at 7:12 am #958724

randallH-3

I am using:

  [cred_field field='form_submit' value='Submit' urlparam='' class='x-btn x-btn-global mam']

For submit button in post forms, how can I add icons without changing to like this:

<button type='submit' name='form_submit' class="x-btn x-btn-global mam">
<span class="dashicons dashicons-star-filled"></span>
 Submit
</button>

Because I am using it for the jQuery for changing text:

jQuery(window).bind("load", function() {
   jQuery( "form[id^='cred_form_44488']").find("input[type='submit']").val(jQuery( "input[name='remove-favorite']").length ? "Remove from Favorites" : "Add to Favorites");
});

July 30, 2018 at 3:39 pm #993258

Christian Cox

The value attribute of an input field does not accept HTML, so the only way to add an icon to the button is to use CSS. You can add a custom CSS classname to the list in the shortcode like this:

[cred_field field='form_submit' value='Submit' urlparam='' class='btn btn-primary btn-lg custom-css-class' output='bootstrap']

Then use that class to add a background image, extra left padding, or whatever overrides are needed to style the submit button.

July 31, 2018 at 7:04 am #1069108

randallH-3

Thank you.