WordPress.org

Ready to get started?Download WordPress

Forums

MailPoet Newsletters
[resolved] [Plugin: Wysija Newsletters] Input-field, submit button next to each other (17 posts)

  1. ddewit
    Member
    Posted 2 years ago #

    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/

  2. Ben
    Member
    Plugin Author

    Posted 2 years ago #

    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

  3. ddewit
    Member
    Posted 2 years ago #

    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

  4. Ben
    Member
    Plugin Author

    Posted 2 years ago #

    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

  5. ddewit
    Member
    Posted 2 years ago #

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

  6. Ben
    Member
    Plugin Author

    Posted 2 years ago #

    Great I'm happy to hear this! :)

    Cheers,
    Ben

  7. ddewit
    Member
    Posted 2 years ago #

    Cheers mate!

  8. ddewit
    Member
    Posted 2 years ago #

    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

  9. ddewit
    Member
    Posted 2 years ago #

    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..

  10. Ben
    Member
    Plugin Author

    Posted 2 years ago #

    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

  11. ddewit
    Member
    Posted 2 years ago #

    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).

  12. ddewit
    Member
    Posted 2 years ago #

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

  13. 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.

  14. Ben
    Member
    Plugin Author

    Posted 2 years ago #

    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

  15. ddewit
    Member
    Posted 2 years ago #

    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.

  16. 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...

  17. Ben
    Member
    Plugin Author

    Posted 2 years ago #

    That's too bad Jan! I would love a helping hand here ;)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic