- This topic has 6 replies, 3 voices, and was last updated 5 years, 8 months ago by
.
-
Posts
-
NOT SOLVED
Hi Clever.
To change the background of the form you need to go on LIST BUILDING > Subscribtion Form Fields, Buttons, Labels > Form Code.
If you already know al least the basis of html and css coding you can jump to point #2.Open a new browser tab.
Then I suggest you to edit in a code editor so you can immediately see the changes.
I use Sublime Text which is very comfortable but Notepad++ is a great free solution too.
Download the code editor, open a new file, select HTML as syntax and copy and past this code in the blank page:<!--START--> <!DOCTYPE html> <html> <head> <style> </style> </head> <body> </body> </html> <!--END-->2# Copy and paste between the tags <body> (here) </body> the code of your Standard Subscription Form.
Now save your file as, for example, MyNewFormTest.html (make sure of the .html extension) and open it in a new tab/window of your browser (but keep it open in the code editor too).Back to the code editor write this code between these tags <style> (here) </style>
.tnp { }We could say that .tnp is the name of the form, so if you want to change the global design of the form, you can write your rules between those curly brackets.
Now you have two choices.
I would suggest you trying with a linear or radial gradient background before using a picture for the simple reasons it’s a lighter solution (better load speed), it doesn’t create problems with the responsive design and you can get a stylish form anyway.
If you want to try with the gradient background I leave you a couple of link to easy-to-read and understand articles.
Remember that in both cases (gradient or image) you have to write few lines of CSS (it’s very easy).Linear gradient background https://www.w3schools.com/cssref/func_linear-gradient.asp (tip: try this using specifing a direction ex: to bottom right)
Radial gradient background https://www.w3schools.com/cssref/func_radial-gradient.aspThe syntax for the gradient color is:
background-image: linear-gradient( to top right, #225687, #856342);
If you are not sure about colors or start/end position you can use the “Try It Yourself” button in the articles and change the parameters.If you want to use a background image the road is more simple but you have to check image and form have similar sizes.
If you want a photo as background this is the syntax:background-image: url("");Useful article https://www.w3schools.com/cssref/pr_background-image.asp
NOTE: between “(here)” you have to write the url of your photo. To do that on WordPress just upload the photo, go in the media library, select and copy the url and then paste it “here”. BUT when you make your tests using the code editor you have to write the local address of the image (the full file path). In my case the local path looks like this background-image: url(“file:///C:/Users/Matteo/Desktop/FLORIPA/Casinha.jpg”);Once you tested the form using the code editor and the browser (refresh the page to see changes), save your html file.
I already styled a form but didn’t upload it yet so I don’t know if you can directly upload the code between <style> </style> in the standard form code field or what.
You’ll have to wait for someone more experienced.
In the meanwhile you can always style it offline and then upload it later.
If you need more info on the css, the w3school has a great knowledge base (I started learning it when I was 15 without help so you can do too). CSS is a very intuitive language 😉Hi Matteo,
sorry for the late feedback, other projects were urgentThank you very much for the very good instructions, it helped me a lot.
– image works :-)..but how can I changed now the style of the form code (position, font color, font-size, button for example)
please look here (the image is only a test image)
https://www.fliegen-sparen.de/imageform.html
thanks again
Hi clever,
no problem, I’m not a staff member.To style the form you have to write everything using css, there’s not a form visual composer.
If you’re not a coder I suggest you to write on the paper all what you want to change, from the font size, to the border style.
Make a list and check the weschool knowledge base. CSS is quite easy to read so you should be able to style the form quite easily.
Here the link to CSS knowledgebase of the w3school https://www.w3schools.com/css/default.aspI even saw the website is german. If you want to be GDPR compliant you have to use a different system, the plugin you’re using just display a blue bar with the option to accept or not but it’s not enough.
I suggest you to have alook at these free plugins (I tried almost every gdpr and cookie plugin and these three are the best and easiest I found):
1) https://wordpress.org/plugins/wp-gdpr-compliance/ (my favourite one);
2) https://wordpress.org/plugins/gdpr-cookie-compliance/ ;
3) https://wordpress.org/plugins/gdpr/ .Teo
Hi Teo,
Thanks a lot for your quick help!!! I will try, but I am not optimistic. What is missing is time.. :-(..best regards
If it’s not so complex form you can try to cpy and paste the original html here and write the changes you would have. I’ll try to have a look at
- You must be logged in to reply to this topic.