[Resolved] stylize the post form

[Author]

Posts

[andreaP-10]

I filled out my first postal form as attached and am quite satisfied
In fact, I still have to find a solution to 3 questions about the stylization of the module:
1) Change the text next to the privacy checkbox
2) change the color of the "submit" button to make it consistent with the rest of the site's design
3) stylize the fields after the "send" button. I can stylize the respective labels but not the fields

Here the code and the custom css of the form

Thank you very much

------------------------------------

Here the code in the form
[credform]
<div class="container-fluid">
<div class="row">
<div class="form-group col-md-12">
<label for="%%FORM_ID%%_post_title">[cred_i18n name='post_title-label']Titolo[/cred_i18n]</label>
[cred_field field='post_title' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="%%FORM_ID%%_email">[cred_i18n name='email-label']Email[/cred_i18n]</label>
[cred_field field='email' force_type='field' class='form-control' output='bootstrap' value='[wpv-current-user info='email']']
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="%%FORM_ID%%_categoria-ticket">[cred_i18n name='categoria-ticket-label']Categoria Ticket[/cred_i18n]</label>
[cred_field field='categoria-ticket' force_type='taxonomy' output='bootstrap' display="select" single_select="true"]
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="%%FORM_ID%%_messaggio">[cred_i18n name='messaggio-label']Messaggio[/cred_i18n]</label>
[cred_field field='messaggio' force_type='field' class='form-control' output='bootstrap']
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="%%FORM_ID%%_allegato0">[cred_i18n name='allegato-label']Allegato[/cred_i18n]</label>
[cred_field field='allegato' force_type='field' output='bootstrap' isRepetitive='true']
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="%%FORM_ID%%_chkprivacy">[cred_i18n name='chkprivacy-label']Autorizzo il trattamento dei dati personali inviati con questa pagina[/cred_i18n]</label>
[cred_field field='chkprivacy' force_type='field' class='form-check-input' output='bootstrap']
</div>
</div>
<div class="row">
<div class="col-md-12">
[cred_field field='form_submit' output='bootstrap' value='Apri Ticket' class='btn btn-primary btn-lg']
</div>
</div>
</div>

<div class="container-1">
<div class="row">
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_id-utente">[cred_i18n name='id-utente-label']Non modificare questi campi[/cred_i18n]</label>
[cred_field field='id-utente' force_type='field' class='form-control' output='bootstrap' value='[wpv-current-user info='id']']
</div>
<div class="form-group col-md-6">
<label for="%%FORM_ID%%_data-evento">[cred_i18n name='data-evento-label']-[/cred_i18n]</label>
[cred_field field='data-evento' force_type='field' class='form-control' output='bootstrap' value='[current_date format='U']']
</div>
</div>
</div>
[/credform]

----------------------

And here the custom CSS
div .container-fluid {
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px; color:#ffffff;
}

div .container-1 {
color:#ffffff;
background-color: #0c71c3
}

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

To suggest more specific instructions, I'll need to see the form on the front-end and the back-end admin area.

Can you please share temporary admin login details, along with the link to the form page?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[andreaP-10]

I apologize. I had not indicated the link for the form page
hidden link
Here the link to reach the back-end of the post form: hidden link

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thank you for sharing these details.

1) Change the text next to the privacy checkbox
- That text is coming from the field name for the "ChkPrivacy" field, in the "Campi ticket" custom field group.
( screenshot: hidden link )

2) change the color of the "submit" button to make it consistent with the rest of the site's design
- To make the submit button look consistent with the default green color button used on the website, you can include the following custom CSS code in the form:

.wpt-form-submit.btn-primary {
color: #ffffff!important;
border-width: 5px!important;
border-color: rgba(0,0,0,0);
border-radius: 5px;
letter-spacing: 2px;
font-size: 16px;
font-weight: 600!important;
text-transform: uppercase!important;
background-color: #62de9d!important;
}

.wpt-form-submit.btn-primary:hover,
.wpt-form-submit.btn-primary:focus {
background-image: initial!important;
background-color: #82ddb0!important;
}

3) stylize the fields after the "send" button. I can stylize the respective labels but not the fields
- I'm not exactly clear on what you mean by this. Currently, the "data-evento" field is set to get the default value from the shortcode [current_date format="U"], but as this shortcode is not registered the field is not showing correctly.

If your goal is to pre-fill the current date in that field, you can register a custom shortcode:

add_shortcode('wpv-post-today', 'today_shortcode');
function today_shortcode() {
	$current_date = current_datetime(); 
	$current_date_noon = $current_date->format( 'Y-m-d' ).' 00:00:00';
	$datetime = new DateTime( $current_date_noon );
	return $datetime->format( 'U' );
}

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

After that, you can add this new shortcode in the value attribute of that field, like this:

[cred_field field='data-evento' force_type='field' class='form-control' output='bootstrap' value='[wpv-post-today]']

I hope this helps and please let me know if you need any further assistance around this.

[andreaP-10]

Thank you so much for your assistance.
Either the 1) and 2) questions are ok
Regarding the question #3
3) stylize the fields after the "send" button. I can stylize the respective labels but not the fields
- I'm not exactly clear on what you mean by this. Currently, the "data-evento" field is set to get the default value from the shortcode [current_date format="U"], but as this shortcode is not registered the field is not showing correctly.

I apologize if I don't explained correctly the question. What I mean was:
In the "campi-ticket" custom field group I added the "IDutente" and the "data-evento" fields that allow me to filter and order the ticket to show when an user enter in his reserved area
when a user open a new ticket (that is a new assistance request) I whould like automaticalli fill either the IDutente and the data-evento fieds. Those two are, respectevely, the ID of the logged-in user and the date in wich the user open the ticket that is, obviousely, the current date
I achieve this goal putting in the fields the value as you assisted me to done
But this solution present some disfuncion: I have to show the fields in the "add a new ticket" form and users can modify them
To avoid it, I moved the two fields after the "submit" button you helped me to stylize even if this don't avoid an accidental modification.
So I'm searching a way to hide this fields for the users and what I thinked was to stylize them in the same color of the form background. In this way the user can't watch them, being in fact unabled to any modification
But if there is a different and more professional way to do it, please suggest it to me

Thank you so much

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for the update and glad that my message helped.

To hide the container with those two fields after the submit button, you can change the following custom CSS code in the form, from:

div .container-1 {
  color:#ffffff;
  background-color: #0c71c3
}

To:

div .container-1 {
  display: none;
}

This way the fields will be hidden, but will still be part of the form submission.

[andreaP-10]

Fantastic!
My issue is resolved now. Thank you!