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

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 : https://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 : https://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:
https://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: https://www.reinasnaaicafe.nl/vilten#wysija saying: “Security failure during request.” Can you also fix this?

Daan

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

But when I copy/paste the code to the other page:
https://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: https://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: https://www.reinasnaaicafe.nl/feestje (see footer).

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

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 https://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.

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…