WordPress.org

Support

Support » Plugins and Hacks » MailPoet Newsletters » [Resolved] [Plugin: Wysija Newsletters] Input-field, submit button next to each other

[Resolved] [Plugin: Wysija Newsletters] Input-field, submit button next to each other

  • Hi there,

    I use the newsletter on a WP Page. I’ve used the “add Wysija newsletter subscription form” button in the editor and this gave me the form on my page. But I can’t read the code, so I can’t adjust the design.

    I would like to use description (text), input-field and the submit button next to each other instead of under each other (vertically). How can I do that?

    Thanks,
    Daan

    http://wordpress.org/extend/plugins/wysija-newsletters/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Hi Daan,

    You should style your form just by applying simple css rules. There is no need to alter the HTML to do what you’re trying to achieve.

    Here are few guidelines which might help you : http://support.wysija.com/knowledgebase/design-style-subscription-form-widget-shortcode/

    Hope this helps,

    Cheers,
    Ben

    Hi Ben,

    The example you refer to only shows how to change the style (different color, different border etc). What I want is a different positionfor the three parts (text,input and button).

    Maybe I’m overlooking something, i do know css, but what is the id/name for the input-field en what is the name/id for the submit otherwise how can i place them in for instance a div and change the position..

    What I want is:
    “text-input field-submit button” instead of

    text
    input-field
    submit button

    Regards,
    Daan

    Daan,

    I think the way you want to display your subscription form is all inline, just like on that example on top of the page : http://hairdesignertv.com/new_home/

    It is a wysija subcription form with the different paragraph with floating values.

    Maybe you can inspire yourself from the css of this site?

    #home-welcome p, #home-welcome .form-valid-sub input[type=”submit”] {
    display: inline;
    margin-left: 6px;
    }

    Tell me if I’m wrong with what you’re trying to achieve but I think this should just do the trick for you.

    Ben

    Hi Ben,
    That is exactly what I’m trying to achieve. Thank you for your help!
    Daan

    Great I’m happy to hear this! 🙂

    Cheers,
    Ben

    Cheers mate!

    Ben,

    Now there is a new problem. As a test I placed the code here:
    http://www.reinasnaaicafe.nl/vilten The style is ok now,

    But when I press the send button (with or without filled in email)

    I get a white page with this url: http://www.reinasnaaicafe.nl/vilten#wysija saying: “Security failure during request.” Can you also fix this?

    Daan

    Strange; on this page it works fine:
    http://www.reinasnaaicafe.nl/contact

    But when I copy/paste the code to the other page:
    http://www.reinasnaaicafe.nl/vilten

    I get the error message..

    That’s strange but it sounds that you used different method to insert the subscription form on one page and the other.

    You should not copy the html of an existing subscription form into an article for instance. It should always be generated dynamically.

    Hope this helps.

    Cheers,
    Ben

    What I did is I copied the html code into the editor of a WP page like this:

    <form id="form-wysija-nl-php-1" method="post" action="#wysija" class="widget_wysija form-valid-sub"><p class="wysija-instruct">To subscribe to our newsletter simply add your email.</p><p><input id="form-wysija-nl-php-1-wysija-to" class="wysija-email validate[required,custom[email]]" name="wysija[user][email]" type="text"><span class="wysija-p-firstname abs-req"><input defaultvalue="" id="form-wysija-nl-php-1-abs-firstname" value="" class="defaultlabels validated[abs][req]" name="wysija[user][abs][firstname]" type="text"></span><span class="wysija-p-lastname abs-req"><input defaultvalue="" id="form-wysija-nl-php-1-abs-lastname" value="" class="defaultlabels validated[abs][req]" name="wysija[user][abs][lastname]" type="text"></span><span class="wysija-p-email abs-req"><input defaultvalue="" id="form-wysija-nl-php-1-abs-email" value="" class="defaultlabels validated[abs][email]" name="wysija[user][abs][email]" type="text"></span><input class="wysija-submit wysija-submit-field" name="submit" value="Subscribe" type="submit"></p><input name="formid" value="form-wysija-nl-php-1" type="hidden">
                        <input name="action" value="save" type="hidden">
                    <input name="wysija[user_list][list_ids]" value="1" type="hidden">
                    <input name="message_success" value="You’ve successfully subscribed. Check your inbox now to confirm your subscription." type="hidden">
                    <input name="controller" value="subscribers" type="hidden"><input id="_wpnonce" name="_wpnonce" value="42e8b920d8" type="hidden"><input name="_wp_http_referer" value="/new_home/" type="hidden"><input value="1" name="wysija-page" type="hidden"><input value="9787924692" id="wysijax" type="hidden"></form>

    On this page there was already this form which came from the generator from Wysija. This one:

    <div class="wysija-register">YTo3OntzOjk6IndpZGdldF9pZCI7czoyMDoid3lzaWphLW5sLTEzNDA5MzE1ODUiO3M6NToibGlzdHMiO2E6MTp7aTowO3M6MToiMSI7fXM6MTA6Imxpc3RzX25hbWUiO2E6MTp7aToxO3M6MTc6Ik1pam4gZWVyc3RlIGxpanN0Ijt9czoxMjoiYXV0b3JlZ2lzdGVyIjtzOjE3OiJub3RfYXV0b19yZWdpc3RlciI7czoxMjoibGFiZWxzd2l0aGluIjtzOjEzOiJsYWJlbHNfd2l0aGluIjtzOjY6InN1Ym1pdCI7czoyOToiQWFubWVsZGVuIHZvb3IgZGUgbmlldXdzYnJpZWYiO3M6Nzoic3VjY2VzcyI7czo3MzoiVSBoZWVmdCB6aWNoIGluZ2VzY2hyZXZlbi4gQ2hlY2sgdXcgZW1haWwgb20gdXcgYWFubWVsZGluZyB0ZSBiZXZlc3RpZ2VuLiI7fQ==</div>

    And also in the footer I placed this html code in a widget and it also works fine on this same page. So in this page three times the form, and all work well. See: http://www.reinasnaaicafe.nl/contact

    But on the other pages is does not work although it’s inserted the same way with html on a page and in the footer.. For instance: http://www.reinasnaaicafe.nl/feestje (see footer).

    I’m sorry the (code) tag is not working in the editor..

    Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    I’ve fixed it. The code tag really does work, but please avoid wrapping code block in blockquote. 🙂

    Also for long lines put the backtick on a separate lines above and below your code.

    ddewit,

    If you still having the issue I invite you to create a support ticket on http://support.wysija.com

    This way we will be able to help you further with that.

    Cheers,
    Ben

    Jan I thought you fixed my problem.

    Ok Ben I will do that, cause the problem is still there, but the text-input and button are horizontal now.

    Moderator Jan Dembowski

    @jdembowski

    Brute Squad and Volunteer Moderator

    Whoops! Sorry, I was referring to this.

    I’m sorry the (code) tag is not working in the editor..

    I had fixed the formatting of your post above and not the problem you are having with your site…

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] [Plugin: Wysija Newsletters] Input-field, submit button next to each other’ is closed to new replies.
Skip to toolbar