Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-12-06 02:31:17

gary_in_austin
Member
Registered: 2015-02-11
Posts: 59

Edit Contact Form

I'd like to edit my Backlight > Designer > Contact Form

I want to make a form myself by going into Backlight and add code directly
to the "Extra Fields" section.

I want to do more and code radio buttons, checkmarks, animation
and design a better-looking HTML5 feature-rich contact form.
Where can I grab that file and code it raw without going through the
Backlight interface? If I can see what it's doing now, I feel I can
make the changes I want with html, a markdown editor or other code.

I have the TTG Wordpress add-on but I never enjoyed Wordpress
and I just want to edit my contact form directly with TTG somehow,
-is that possible without leaving the TTG structure?
..gary in Austin

I've been using TTG since CE2, CE3, CE4 and Backlight, and I love what
you guys are doing. You've been so helpful though the years. I used to
code contact forms in Pearl or I edited sendmail.pl years ago.
-I can code and test my form and let you know the results to help the
next build of Backlight.

Last edited by gary_in_austin (2017-12-06 06:22:38)

Offline

#2 2017-12-06 05:54:17

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Edit Contact Form

Don't know if you've seen it yet, but in the backlight/modules/pangolin-page/patterns/ folder are a number of html documents. One is form-contact.html. Perhaps start there?
There's also another named form-other.html that has various form elements you could possibly use.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#3 2017-12-06 06:15:51

gary_in_austin
Member
Registered: 2015-02-11
Posts: 59

Re: Edit Contact Form

Rod, you're awesome, as always! FAST, too. I'll look into your hints and let you know what I find out.
..gary

Offline

#4 2017-12-06 06:43:47

Ben
Moderator
From: Melbourne, Australia
Registered: 2012-09-29
Posts: 3,397

Re: Edit Contact Form

Hi Gary, the files Rod has pointed to won't help here.  There's no straightforward way for you to do what you'd like to do.  Contact Forms are driven by the database.

They're populated with the file backlight/modules/module-admin/application/views/contact/contact.php but that is only half the story.  If you were to add hardcoded fields in there, they wouldn't be picked up on submit as they're not in the database.  The structure is complicated further due to the historical nature of contact forms being bolted on to CE4.

More field types have come up on the radar before, and are something I'd like to add.  Checkboxes and radio buttons. 

Can you elaborate on what you thing an "HTML 5 feature-rich" contact form would entail?

Offline

#5 2017-12-06 06:44:50

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Edit Contact Form

I'll be interested in what you come up with since I'd like to make some specialized forms of my own. Just haven't take the time yet to investigate it.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#6 2017-12-06 06:48:21

Ben
Moderator
From: Melbourne, Australia
Registered: 2012-09-29
Posts: 3,397

Re: Edit Contact Form

rod barbee wrote:

I'll be interested in what you come up with since I'd like to make some specialized forms of my own. Just haven't take the time yet to investigate it.

I should have stated that modifying Backlight isn't something we recommend or support.  We don't want hacks shared on this forum.

Offline

#7 2017-12-06 07:03:35

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 13,606
Website

Re: Edit Contact Form

In that case, then for now I’d stick to creating WordPress pages and using one of the many good contact form plugins like Contact Form 7 or Gravity Forms.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 1.1.1 test site, Pangolin test site

Offline

#8 2017-12-06 07:54:10

gary_in_austin
Member
Registered: 2015-02-11
Posts: 59

Re: Edit Contact Form

I understand what you're saying, Rod and Ben. And certainly don't want to give you guys and Matthew more to deal with than is already in the pipeline.

I'm just wanting to add to my contact form: the ability to add checkboxes, change the size of the reply text box, maybe populate the text area with some populated text as a suggestion to the user instead of having the "Name: ______" area and change the appearance so the suggestion "name" appears within the text box where users type and not outside and left of the text box, ....other html5 things like animations coded in CSS, javascript, bootstrap, or other. -I just want to make it prettier than it already is and add checkboxes and make my contact form be more cool.

I right away understood and agree with what you said, Ben. ..about editing the ....../contact.php  and the fact that they wouldn't be picked up by hard coding upon hitting the Submit button. I'm just wanting to see if I can do CSS animations, rounded corners to the user text boxes, possibly change html contact form checkmarks to some graphics checkmarks I create in Photoshop. ..just trying to push the TTG contact form further.

Thank you all so much for the work you're doing. -It's quite awesome and I love it as I'm sure all the users love the change away from CE and over to the Backlight way you guys have coded. -Thanks, and if you have something to add to my reply, do it but know I'll not try to post any hacks to the system that would confuse other TTG users. Thanks, again!

Last edited by gary_in_austin (2017-12-06 08:35:25)

Offline

#9 2017-12-06 08:13:23

gary_in_austin
Member
Registered: 2015-02-11
Posts: 59

Re: Edit Contact Form

Thanks, Ben. Thanks, Matthew. -and also thanks again, -Rod.
I think I will go back to the TTG Wordpress Add-on so my questionnaire contact form page looks like the rest of my Backlight site, ..and then use something like Contact Form 7 from there.

I'm eagerly awaiting the [next version of Backlight] ...people like me do rub two pennies together to try to get three,
and I'm sure others want to share what they have to help get things like contact forms to go from cool, to excellent..

Last edited by gary_in_austin (2017-12-06 08:39:22)

Offline

#10 2017-12-06 09:25:17

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,118
Website

Re: Edit Contact Form

You can always write your own CSS, and implement it via our support of Custom Stylesheets in templates. So, some of the things you're asking for -- rounded corners, animations, etc. -- should be well within the realm of possibility. For animations, you might need to use some Javascript or jQuery to add/remove classes to the form under various conditions, so trigger changes in the animation state.

I reckon you can use CSS to hide the form labels as well, and Javascript to apply placeholders into the fields if you so like. I'm not sure I'm in love with that user experience, but to each their own.

Bootstrap isn't what you think it is. It's a starter framework on which to build a site, and a bloated, crappy one at that. The number of amateur designers who get started using Bootstrap and learn bad habits as a result, or start building website without ever actually understanding what they're building ... don't even get me started. We don't use it. Instead, Backlight is built on a custom framework of my own design, and does the things I want without all of Bootstrap's bloat and nonsense. In any case, it doesn't belong in the same breath as HTML5, CSS and Javascript.

Getting back to the point, you can still do a lot of customization to forms without hacking Backlight's files or databases, simply by using Custom Stylesheets and maybe PHPlugins to inject some Javascript into the page.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

#11 2017-12-06 10:01:39

gary_in_austin
Member
Registered: 2015-02-11
Posts: 59

Re: Edit Contact Form

I threw in the comment about Bootstrap as an aside and you picked up on it, -you're a smart guy, Matthew. heheheh. And what you said about keeping it with CSS and javascript and jQuery is right on!

Rounded corners, animations, etc. is a possibility. Now that you've given me a wink, I know where to go in my coding. And perhaps I need to look into PHPlugins since I haven't learned about how to use those hook functions, yet. Thanks for everything, Matthew!

Last edited by gary_in_austin (2017-12-06 10:02:20)

Offline

#12 2017-12-06 12:54:23

Matthew
Administrator
From: Seoul, South Korea
Registered: 2012-09-24
Posts: 5,118
Website

Re: Edit Contact Form

Cheers.

There are a lot of examples in the backlight/custom/phplugins/phplugins-pangolin.sample.php file to get you started. Note that each hook can appear only once, and duplicates will throw errors. So if you want to use ttg_scripts, use it once, and pile all of your scripts into it. That's where your Javascript should go, and the examples should help you get your bearings.


Campagna Pictures, http://campagnapictures.com
The Turning Gate, http://theturninggate.net

Offline

Board footer

Powered by FluxBB