inline form with submit button below

Home › Forums › AB Simple Subscribe WP Plugin › inline form with submit button below

This topic contains 11 replies, has 2 voices, and was last updated by  ab-themes 9 years, 3 months ago.

Viewing 10 posts - 1 through 10 (of 12 total)
1 2
  • Author
    Posts
  • February 9, 2015 at 3:27 pm #5441

    [email protected]
    Participant

    Trying to have an inline form with a wide submit button below the inputs, is this possible? Couldn’t figure it out. Also is it possible to make the submit button an image?

    February 10, 2015 at 6:40 am #5455

    ab-themes
    Keymaster

    Hi!

    To have inline form you’d need to place a shortcode on your page like this:

    [ABss_subscribe_form inline_form='1' name_placeholder='Your Name' email_placeholder='Your Email' button_text='Subscribe'][/ABss_subscribe_form]

    And having a wide button is not a problem, just target it via css, place that styling in custom.css, and it should work fine :)

    We never tried placing an image for submit button, but I think that something could be done via css (using pseudo elements and content: url(); ).

    February 10, 2015 at 7:30 am #5467

    [email protected]
    Participant

    Hey thanks for the reply!

    I tried the shortcode you provided but it didn’t put the subscribe button below it, just placed it to the right of the inputs.

    February 10, 2015 at 7:35 am #5468

    [email protected]
    Participant

    I’m trying to have the inputs inline and the submit button below the inputs

    February 10, 2015 at 10:51 am #5473

    ab-themes
    Keymaster

    Well you’d need to target it with css, and probably put the display: block on the button, that should put it below. The css styling of the form is all up to you. Can you provide the link with the form on it?

    February 10, 2015 at 7:08 pm #5498

    [email protected]
    Participant

    Hey! Sorry I’m honestly pretty amateur at css, I can style when it’s there but I don’t quite understand targeting, well how to target something specifically.

    I made a test page with the simple subscribe form
    http://votegretchen.com/test-2/

    February 11, 2015 at 7:26 am #5509

    ab-themes
    Keymaster

    Hi!

    In your custom.css file paste this, and tell us if it looks ok. Also change the text of the button from Submit to ‘SUBSCRIBE for UPDATES’

    .ABss_form_wrapper input.ABss_subscriber_name {
	height: 20px!important;
	width: 280px!important;
	padding: 18px 10px 17px!important;
	background-color: #eff0f3!important;
	-webkit-box-sizing: border-box!important;
	-moz-box-sizing: border-box!important;
	box-sizing: border-box!important;
	font-size: 13px!important;
	color: #767676!important;
	border: 1px solid #e3e3e3!important;
}

.ABss_form_wrapper input.ABss_subscriber_email {
	height: 20px!important;
	width: 280px!important;
	padding: 18px 10px 17px!important;
	background-color: #eff0f3!important;
	-webkit-box-sizing: border-box!important;
	-moz-box-sizing: border-box!important;
	box-sizing: border-box!important;
	font-size: 13px!important;
	color: #767676!important;
	border: 1px solid #e3e3e3!important;
}

.ABss_form_wrapper input[type="submit"] {
	background: #232f63!important;
	-webkit-border-radius: 4!important;
	-moz-border-radius: 4!important;
	border-radius: 3px!important;
	font-family: Arial!important;
	color: #ffffff!important;
	font-size: 17px!important;
	font-weight: 700!important;
	letter-spacing: 3px!important;
	padding: 12px 80px 8px 80px!important;
	text-decoration: none!important;
	border: 0!important;
	border-bottom: 4px solid #0f1636!important;
}

.ABss_inline_form p:last-of-type {
	display: block!important;
}

.ABss_inline_form p {
	display: inline-block!important;
	margin-right: 15px!important;
	margin-bottom: 10px!important;
}

    This will overwrite the styling of the subscribe form.

    Take note that if you want to use the subscribe form on other parts of your site, you’d need to add a custom class to this form, and prepend it to the styles, or target this specific form – the id of the form in the test page is ‘ABss_form_1’, so you could just add this to your custom css like #ABss_form_1 .ABss_form_wrapper input.ABss_subscriber_name for example.

    Tell us if you have any more issues with it.

    February 11, 2015 at 7:54 am #5514

    [email protected]
    Participant

    Thank you so much! It works great! Can’t thank you enough!

    February 11, 2015 at 7:55 am #5515

    [email protected]
    Participant

    Last thing, How do I change the success message text so it just says “Thank You”?

    February 11, 2015 at 9:45 am #5518

    ab-themes
    Keymaster

    You can use language files, or you can go to plugins folder\ab-simple-subscribe\shortcode.php and on line 65 there is a ‘success’ line. You’ll see the ‘You have successfully subscribed. Thank you!’ message. Change that to your liking :)

    Glad we could help.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 12 total)
1 2

The topic ‘inline form with submit button below’ is closed to new replies.