Forum Discussion
JenniferJuhasz
4 years agoQrew Cadet
Thank you so much - I couldn't get Dan's option to work without Syntax errors (the problem with learning how to do this on the go, without actually having an opportunity to sit and study/learn is a sizeable gap in knowledge on my part);
Jeff's formula works well for me, and test entries are now submitting (thank you!) - one question; I can't seem to increase the font size at all. Doesn't seem to matter if I list it as bold, bolder, 900, 32px or 64px - it's always the same size. The original code that I used was one I learned through QB Junkie for the <a class=\"Vibrant Primary\">; but I'm not sure how to call that out.
Suggestions? And thank you - I appreciate it very much - the appearance of the button matters quite a bit to our leadership team.
------------------------------
Jennifer Juhasz
------------------------------
Jeff's formula works well for me, and test entries are now submitting (thank you!) - one question; I can't seem to increase the font size at all. Doesn't seem to matter if I list it as bold, bolder, 900, 32px or 64px - it's always the same size. The original code that I used was one I learned through QB Junkie for the <a class=\"Vibrant Primary\">; but I'm not sure how to call that out.
Suggestions? And thank you - I appreciate it very much - the appearance of the button matters quite a bit to our leadership team.
------------------------------
Jennifer Juhasz
------------------------------
MikeTamoush
4 years agoQrew Elite
I'm no expert, but here are my notes to myself on making buttons. This allows for all kinds of options. I am guessing you can use what i have below in coordination with Jeffs notes. Notice the font-size....that may be all you need but I left all my notes just in case.
-------------------------
var text URL = Put your URL here
"<a style=\"text-decoration:none; background: #7aace0; border-radius: 1000px; color: #ffffff; display: inline-block; padding: 2px 0px; width:100px; text-align: center; text-shadow: none; border: 1px solid #030404; font-size: 16px; font-family=Times New Roman\"href='"
& $URL
& "'>Button Text</a>"
//NOTES BELOW
-Text Decoration I haven't used, google it through CSS websites
- Background uses a hex color, google hex color codes
- Border Radius curves the corners of the button. 5 is minimal, 1000 is totally rounded
- Color is text color
- Display inline-block means it is a button (I think?)
- Padding: Can be used with 2 or 4 variables. With 2 variables you are setting top/bottom then left/right padding. With 4 variables (2px 2px 5px 5px) you are setting, top,right,bottom, left (start at top and go clockwise)
- width: use EITHER width or padding typically. Width fixes the width. Could do the same with height if you wanted
-text-shadow: Ive only used this once, google for exact format. Shadows the text
- border: thickness of border and border color
-font-size/family is self explanatory
------------------------------
Mike Tamoush
------------------------------
-------------------------
var text URL = Put your URL here
"<a style=\"text-decoration:none; background: #7aace0; border-radius: 1000px; color: #ffffff; display: inline-block; padding: 2px 0px; width:100px; text-align: center; text-shadow: none; border: 1px solid #030404; font-size: 16px; font-family=Times New Roman\"href='"
& $URL
& "'>Button Text</a>"
//NOTES BELOW
-Text Decoration I haven't used, google it through CSS websites
- Background uses a hex color, google hex color codes
- Border Radius curves the corners of the button. 5 is minimal, 1000 is totally rounded
- Color is text color
- Display inline-block means it is a button (I think?)
- Padding: Can be used with 2 or 4 variables. With 2 variables you are setting top/bottom then left/right padding. With 4 variables (2px 2px 5px 5px) you are setting, top,right,bottom, left (start at top and go clockwise)
- width: use EITHER width or padding typically. Width fixes the width. Could do the same with height if you wanted
-text-shadow: Ive only used this once, google for exact format. Shadows the text
- border: thickness of border and border color
-font-size/family is self explanatory
------------------------------
Mike Tamoush
------------------------------
- JenniferJuhasz4 years agoQrew CadetHi Mike,
This is very much like what I had before for my Save & Submit button:
"<a class=\"Vibrant Primary\" style=\"width:310px; background: #2abdbc; text-align: center; font-size: 16px; font-family: Arial, Times, Sans-serif;\" href=\"targeturl" target=_blank><b>Submit</b></a>"
But the results ended up not submitting at all even though I have the 'Save on Redirect' option checked.
Jeff's solution works for saving my data - and my CSS code for the button appearance is:
var text bgcolor = "#2abdbc";
var text txtcolor = "white";
var text style = "style=\"text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: bold 700 32px/1 \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px"
But the font 'size' didn't increase to 32px at all - and I'm not sure why. Thoughts?
------------------------------
Jennifer Juhasz
------------------------------- LauraThacker_ID4 years agoQrew TraineeI was trying to replicate your issue; and I think there is a bug with the class SaveBeforeNavigating not working in some cases.
I got the button the right size/color etc, but the record is not saving before redirect. I have also noticed this to be a problem when trying to make a SaveBeforeNavigating button do another API_EditRecord before navigating to the redirect location; which possibly means it is suffering the same problem.var text targeturl="https://www.google.com"; "<a target=_blank class='Vibrant Success' SaveBeforeNavigating title='' style='font-size: 32px; display:inline-block; white-space; nowrap; background: #2abdbc; border: 1px solid #2abdbc; text-align: center; font-family: Arial, Times, Sans-serif; text-align:center; text-decoration:none' href=\"" & $targeturl & "\"" & ")'>Submit</a>"
Even if I take off the target=_blank (which means new window); I still do not get the save and even though the table is set to auto-save; it does not - it prompts me to leave the site.
Try the updates to the Styling in your formula and see if you're still getting the non-save issue that I am. If so, submit a support ticket. I suspect something bigger is going on here.
(I've submitted a ticket #676259 on the inability to do more than one API command when using SaveBeforeNavigating or being able to redirect somewhere else)
------------------------------
Laura Thacker IDS
------------------------------- JenniferJuhasz4 years agoQrew CadetHi Laura,
Thank you so much for your reply! It is so appreciated to have one of you more experienced QB users validate my understanding that there's a larger issue here; I have an open ticket with QB Support - I started there, initially, because we did receive successful 'Test' entries when I first built these surveys in late November and early December; but then when my team sent them out into the world, none of the replies were recorded. We found the issue last week, (of course during the holidays); and I opened a ticket right away.
QB has not been tremendously helpful - they insist nothing has changed on their end that would cause the 'Save on Redirect' option to stop working.
Jeff and Dan's solutions to update my formula to 'Save before Navigating' is working - and that's a relief; though we've lost all the data from last month, hopefully moving forward we have this resolved.
------------------------------
Jennifer Juhasz
------------------------------
- MikeTamoush4 years agoQrew EliteLooks like Jeff has some cool way to set the font to bold and 32 and all that. I dont know that way but I suspect it is messing things up. As a test remove the entire font bold 700 32px part, and see if it works, just to see if that is the issue.
------------------------------
Mike Tamoush
------------------------------- JenniferJuhasz4 years agoQrew CadetHi Mike,
No - removing that still keeps my font small... here's a screenshot with the code:
var text bgcolor = "#2abdbc";
var text txtcolor = "white";
var text style = "style=\"text-decoration: none; width: 310px; text-align: center; background:" & $bgcolor & "; border-radius: 5px; padding: 8px 10px; color: " & $txtcolor & "; display: inline-block; font: \"Arial, Times, Sans-serif\", sans-serif; text-shadow: none; font-size: 32px";
------------------------------
Jennifer Juhasz
------------------------------